change action bar based on account's rights
This commit is contained in:
parent
fa75e81685
commit
71a41ca9ba
|
@ -1,11 +1,11 @@
|
||||||
<div class="action-bar">
|
<div class="action-bar">
|
||||||
<a href class="action-bar__link" title="Reply" (click)="reply()">
|
<a *ngIf="!isLocked" href class="action-bar__link" title="Reply" (click)="reply()">
|
||||||
<ion-icon name="ios-undo"></ion-icon>
|
<ion-icon name="ios-undo"></ion-icon>
|
||||||
</a>
|
</a>
|
||||||
<a href class="action-bar__link" title="Boost" [class.boosted]="isBoosted" (click)="boost()">
|
<a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link" title="Boost" [class.boosted]="isBoosted" (click)="boost()">
|
||||||
<ion-icon name="md-swap"></ion-icon>
|
<ion-icon name="md-swap"></ion-icon>
|
||||||
</a>
|
</a>
|
||||||
<a href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited" (click)="favorite()">
|
<a *ngIf="!isLocked" href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited" (click)="favorite()">
|
||||||
<ion-icon name="md-star"></ion-icon>
|
<ion-icon name="md-star"></ion-icon>
|
||||||
</a>
|
</a>
|
||||||
<a href class="action-bar__link" title="More" (click)="more()">
|
<a href class="action-bar__link" title="More" (click)="more()">
|
||||||
|
|
|
@ -1,16 +1,19 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
|
||||||
import { Store } from '@ngxs/store';
|
import { Store } from '@ngxs/store';
|
||||||
|
|
||||||
import { StatusWrapper } from '../../stream.component';
|
import { StatusWrapper } from '../../stream.component';
|
||||||
import { MastodonService } from '../../../../services/mastodon.service';
|
import { MastodonService } from '../../../../services/mastodon.service';
|
||||||
import { AccountInfo } from '../../../../states/accounts.state';
|
import { AccountInfo } from '../../../../states/accounts.state';
|
||||||
|
import { Observable, Subscription } from 'rxjs';
|
||||||
|
// import { map } from "rxjs/operators";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-action-bar',
|
selector: 'app-action-bar',
|
||||||
templateUrl: './action-bar.component.html',
|
templateUrl: './action-bar.component.html',
|
||||||
styleUrls: ['./action-bar.component.scss']
|
styleUrls: ['./action-bar.component.scss']
|
||||||
})
|
})
|
||||||
export class ActionBarComponent implements OnInit {
|
export class ActionBarComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
@Input() statusWrapper: StatusWrapper;
|
@Input() statusWrapper: StatusWrapper;
|
||||||
|
|
||||||
isFavorited: boolean;
|
isFavorited: boolean;
|
||||||
|
@ -19,11 +22,50 @@ export class ActionBarComponent implements OnInit {
|
||||||
isBoostLocked: boolean;
|
isBoostLocked: boolean;
|
||||||
isLocked: boolean;
|
isLocked: boolean;
|
||||||
|
|
||||||
|
private isProviderSelected: boolean;
|
||||||
|
private selectedAccounts: AccountInfo[];
|
||||||
|
|
||||||
|
private accounts$: Observable<AccountInfo[]>;
|
||||||
|
private accountSub: Subscription;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly store: Store,
|
private readonly store: Store,
|
||||||
private readonly mastodonService: MastodonService) { }
|
private readonly mastodonService: MastodonService) {
|
||||||
|
|
||||||
|
this.accounts$ = this.store.select(state => state.registeredaccounts.accounts);
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
// const selectedAccounts = this.getSelectedAccounts();
|
||||||
|
// this.checkStatus(selectedAccounts);
|
||||||
|
|
||||||
|
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
|
||||||
|
console.warn('selectedAccounts');
|
||||||
|
this.checkStatus(accounts);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.accountSub.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
private checkStatus(accounts: AccountInfo[]): void {
|
||||||
|
const status = this.statusWrapper.status;
|
||||||
|
const provider = this.statusWrapper.provider;
|
||||||
|
this.selectedAccounts = accounts.filter(x => x.isSelected);
|
||||||
|
this.isProviderSelected = this.selectedAccounts.filter(x => x.id === provider.id).length > 0;
|
||||||
|
|
||||||
|
if (status.visibility === 'direct' || status.visibility === 'private') {
|
||||||
|
this.isBoostLocked = true;
|
||||||
|
} else {
|
||||||
|
this.isBoostLocked = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((status.visibility === 'direct' || status.visibility === 'private') && !this.isProviderSelected) {
|
||||||
|
this.isLocked = true;
|
||||||
|
} else {
|
||||||
|
this.isLocked = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
reply(): boolean {
|
reply(): boolean {
|
||||||
|
@ -32,6 +74,9 @@ export class ActionBarComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
boost(): boolean {
|
boost(): boolean {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.warn('boost');
|
console.warn('boost');
|
||||||
this.isBoosted = !this.isBoosted;
|
this.isBoosted = !this.isBoosted;
|
||||||
return false;
|
return false;
|
||||||
|
@ -50,6 +95,6 @@ export class ActionBarComponent implements OnInit {
|
||||||
|
|
||||||
private getSelectedAccounts(): AccountInfo[] {
|
private getSelectedAccounts(): AccountInfo[] {
|
||||||
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
|
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
|
||||||
return regAccounts.filter(x => x.isSelected);
|
return regAccounts;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue