wirering from account presentation comp to smart comp

This commit is contained in:
Nicolas Constant 2018-09-09 20:12:32 -04:00
parent 50a4580ad8
commit c19fc50804
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 64 additions and 36 deletions

View File

@ -1,22 +1,23 @@
<div id="mam-left-bar">
<div id="mam-create-toot">
<a href title="write toot!" (click)="createNewToot()">Toot!</a>
</div>
<div id="mam-create-toot">
<a href title="write toot!" (click)="createNewToot()">Toot!</a>
</div>
<div *ngFor="let account of accounts" >
<app-account-icon [account]="account" ></app-account-icon>
<div *ngFor="let account of accounts">
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)" (openMenuNotify)="onOpenMenuNotify($event)">
</app-account-icon>
<!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
</div>
<!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
</div>
<div id="mam-account-add">
<a href title="add new account" [routerLink]="['/register']">+</a>
</div>
<div id="mam-account-add">
<a href title="add new account" [routerLink]="['/register']">+</a>
</div>
</div>
</div>

View File

@ -17,6 +17,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
accounts: AccountWrapper[] = [];
accounts$: Observable<AccountInfo[]>;
private loadedAccounts: { [index: string]: AccountInfo } = {};
private sub: Subscription;
constructor(
@ -29,24 +30,19 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
private currentLoading: number;
ngOnInit() {
this.accounts$.subscribe((accounts: AccountInfo[]) => {
console.warn(' this.accounts$.subscribe(');
console.warn(accounts);
if (accounts) {
for (let acc of accounts) {
this.loadedAccounts = {};
this.accounts.length = 0;
for (let acc of accounts) {
const accWrapper = new AccountWrapper();
accWrapper.username = `${acc.username}@${acc.instance}`;
this.accounts.push(accWrapper);
this.loadedAccounts[accWrapper.username] = acc;
this.accountsService.retrieveAccountDetails(acc)
.then((result: Account) => {
console.error(result);
const accounts = this.accounts.filter(x => result.url.includes(acc.username) && result.url.includes(acc.instance));
for (const account of accounts) {
account.avatar = result.avatar;
}
accWrapper.avatar = result.avatar;
});
}
}
@ -56,11 +52,15 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
this.sub.unsubscribe();
}
addNewAccount(): boolean {
return false;
onToogleAccountNotify(username: string) {
console.warn(`onToogleAccountNotify username ${username}`);
}
onOpenMenuNotify(username: string) {
console.warn(`onOpenMenuNotify username ${username}`);
}
createNewToot(): boolean {
return false;
}

View File

@ -1,3 +1,4 @@
<a class="account-icon" href title="{{ account.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
<img class="account-icon__avatar" src="{{ account.avatar }}" />
<a class="account-icon"
href title="{{ account.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
<img class="account-icon__avatar" [class.account-icon__avatar--selected]="isSelected" src="{{ account.avatar }}" />
</a>

View File

@ -1,15 +1,39 @@
.account-icon {
display: inline-block;
width: 50px;
padding-top: 4px;
// padding-top: 4px;
// margin-left: 5px;
margin: 0 0 5px 5px;
&__avatar {
border-radius: 50%;
border-radius: 2px;
width: 40px;
}
opacity: .3;
transition: all .2s;
&:hover {
filter: alpha(opacity=50);
opacity: .5;
}
&--selected {
// border-radius: 20%;
filter: alpha(opacity=100);
opacity: 1;
&:hover {
filter: alpha(opacity=100);
opacity: 1;
}
}
}
// & a {
// margin-left: 4px;
// /*margin-top: 4px;*/

View File

@ -1,8 +1,5 @@
import { Component, OnInit, Input } from '@angular/core';
import { AccountInfo } from '../../../../states/accounts.state';
import { AccountsService } from '../../../../services/accounts.service';
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { AccountWrapper } from '../../../../models/account.models';
import { Account } from "../../../../services/models/mastodon.interfaces";
@Component({
selector: 'app-account-icon',
@ -11,6 +8,10 @@ import { Account } from "../../../../services/models/mastodon.interfaces";
})
export class AccountIconComponent implements OnInit {
@Input() account: AccountWrapper;
@Output() toogleAccountNotify = new EventEmitter<string>();
@Output() openMenuNotify = new EventEmitter<string>();
isSelected: boolean = false;
constructor() { }
@ -18,12 +19,13 @@ export class AccountIconComponent implements OnInit {
}
toogleAccount(): boolean {
console.warn(`click`);
this.toogleAccountNotify.emit(this.account.username);
this.isSelected = !this.isSelected;
return false;
}
openMenu(event): boolean {
console.warn(`openMenu`);
this.openMenuNotify.emit(this.account.username);
return false;
}
}

View File

@ -43,8 +43,8 @@ export class RegisterNewAccountComponent implements OnInit {
this.authService.getToken(appDataWrapper.instance, appInfo.app.client_id, appInfo.app.client_secret, code, appInfo.app.redirect_uri)
.then((tokenData: TokenData) => {
const accountInfo = new AccountInfo();
accountInfo.username = appDataWrapper.username;
accountInfo.instance = appDataWrapper.instance;
accountInfo.username = appDataWrapper.username.toLowerCase();
accountInfo.instance = appDataWrapper.instance.toLowerCase();
accountInfo.token = tokenData;
this.store.dispatch([new AddAccount(accountInfo)])