Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

changing column overlay's buttons color depending on account selection

This commit is contained in:
Nicolas Constant 2019-02-21 22:17:35 -05:00
parent 07c291e056
commit 6637489bae
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/stream/stream-overlay/stream-overlay.component.html
View File

@ -4,13 +4,13 @@
<fa-icon [icon]="faTimes"></fa-icon>
</button>
<button class="overlay__button overlay-previous" title="previous" (click)="previous()">
<button class="overlay__button overlay-previous" [ngClass]="{'overlay__button--focus': previousElements.length > 0 }" title="previous" (click)="previous()">
<fa-icon [icon]="faAngleLeft"></fa-icon>
</button>
<button class="overlay__button overlay-refresh" *ngIf="canRefresh" title="refresh" (click)="refresh()">
<button class="overlay__button overlay-refresh" [ngClass]="{'overlay__button--focus': refreshFocused }" title="refresh" (click)="refresh()">
<fa-icon [icon]="faRedoAlt"></fa-icon>
</button>
<button class="overlay__button overlay-next" title="next" (click)="next()">
<button class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': nextElements.length > 0 }" title="next" (click)="next()">
<fa-icon [icon]="faAngleRight"></fa-icon>
</button>

48
src/app/components/stream/stream-overlay/stream-overlay.component.scss
View File

@ -1,28 +1,20 @@
@import "variables";
@import "mixins";
@import "commons";
$header-content: 40px;
.stream-overlay {
// width: $stream-column-width;
height: calc(100%);
background-color: $column-color;
background-color: $column-color;
&__header {
width: calc(100%);
height: $header-content;
background-color: $column-header-background-color;
// padding: 6px 10px 0 10px;
background-color: $column-header-background-color; // padding: 6px 10px 0 10px;
border-bottom: 1px solid #222736;
& a {
color: whitesmoke;
font-size: 0.8em;
font-weight: normal;
font-weight: normal;
}
}
&__content {
@ -30,7 +22,6 @@ $header-content: 40px;
width: calc(100%);
height: calc(100% - #{$header-content});
}
&__title {
width: calc(100%);
height: 30px;
@ -43,39 +34,25 @@ $header-content: 40px;
.overlay {
margin: 0;
&__button {
@include clearButton;
width: 25px;
height: 25px;
// border-radius: 50%;
// background-color: $button-background-color;
// background-color: #303031;
// background-color: greenyellow;
color: #252c42;
color: #2e3752;
color: #354060;
color: #354060;
transition: all .2s;
margin: 8px 0 0 8px;
&:hover {
// background-color: $button-background-color-hover;
// color: $button-color-hover;
color: whitesmoke;
}
&--focus {
color: whitesmoke;
}
}
&-previous {
display: block;
float: left;
font-size: 18px;
& fa-icon{
font-size: 18px;
& fa-icon {
position: relative;
left: -1px;
}
@ -84,23 +61,16 @@ $header-content: 40px;
display: block;
float: left;
font-size: 14px;
// & fa-icon{
// position: relative;
// top: 1px;
// }
}
&-next {
display: block;
float: left;
font-size: 18px;
// padding-right: 20px;
}
&-close {
display: block;
float: right;
font-size: 14px;
color: white;
margin-right: 8px;
}

59
src/app/components/stream/stream-overlay/stream-overlay.component.ts
View File

@ -1,33 +1,37 @@
import { Component, OnInit, Output, EventEmitter, Input, ViewChild } from '@angular/core';
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ViewChild } from '@angular/core';
import { faAngleLeft, faAngleRight, faTimes, faRedoAlt } from "@fortawesome/free-solid-svg-icons";
import { Observable, Subscription } from 'rxjs';
import { Store } from '@ngxs/store';
import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
import { StreamElement, StreamTypeEnum } from '../../../states/streams.state';
import { ThreadComponent } from '../thread/thread.component';
import { UserProfileComponent } from '../user-profile/user-profile.component';
import { HashtagComponent } from '../hashtag/hashtag.component';
import { AccountInfo } from '../../../states/accounts.state';
@Component({
selector: 'app-stream-overlay',
templateUrl: './stream-overlay.component.html',
styleUrls: ['./stream-overlay.component.scss']
})
export class StreamOverlayComponent implements OnInit {
export class StreamOverlayComponent implements OnInit, OnDestroy {
faAngleLeft = faAngleLeft;
faAngleRight = faAngleRight;
faTimes = faTimes;
faRedoAlt = faRedoAlt;
private previousElements: OverlayBrowsing[] = [];
private nextElements: OverlayBrowsing[] = [];
refreshFocused: boolean;
previousElements: OverlayBrowsing[] = [];
nextElements: OverlayBrowsing[] = [];
private currentElement: OverlayBrowsing;
canRefresh: boolean = true;
canGoForward: boolean;
// canRefresh: boolean = true;
// canGoForward: boolean;
accountName: string;
thread: OpenThreadEvent;
// hashtag: string;
hashtagElement: StreamElement;
@Output() closeOverlay = new EventEmitter();
@ -35,7 +39,6 @@ export class StreamOverlayComponent implements OnInit {
@Input('browseAccountData')
set browseAccountData(accountName: string) {
this.browseAccount(accountName);
// this.accountName = accountName;
}
@Input('browseThreadData')
@ -52,9 +55,30 @@ export class StreamOverlayComponent implements OnInit {
@ViewChild('appHashtag') appHashtag: HashtagComponent;
@ViewChild('appThread') appThread: ThreadComponent;
constructor(private readonly toolsService: ToolsService) { }
private currentlyUsedAccount: AccountInfo;
private accounts$: Observable<AccountInfo[]>;
private accountSub: Subscription;
constructor(
private readonly store: Store,
private readonly toolsService: ToolsService) {
this.accounts$ = this.store.select(state => state.registeredaccounts.accounts);
}
ngOnInit() {
this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
this.checkAccountChanges(accounts);
});
}
checkAccountChanges(accounts: AccountInfo[]): any {
const selectedAccount = accounts.filter(x => x.isSelected)[0];
this.refreshFocused = selectedAccount.id !== this.currentlyUsedAccount.id;
}
ngOnDestroy() {
this.accountSub.unsubscribe();
}
close(): boolean {
@ -74,7 +98,8 @@ export class StreamOverlayComponent implements OnInit {
const nextElement = this.nextElements.pop();
this.loadElement(nextElement);
if(this.nextElements.length === 0) this.canGoForward = false;
//if(this.nextElements.length === 0) this.canGoForward = false;
return false;
}
@ -91,11 +116,14 @@ export class StreamOverlayComponent implements OnInit {
const previousElement = this.previousElements.pop();
this.loadElement(previousElement);
this.canGoForward = true;
//this.canGoForward = true;
return false;
}
refresh(): boolean {
this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
this.refreshFocused = false;
if(this.thread){
this.appThread.refresh();
} else if(this.hashtagElement){
@ -116,7 +144,7 @@ export class StreamOverlayComponent implements OnInit {
}
const newElement = new OverlayBrowsing(null, accountName, null);
this.loadElement(newElement);
this.canGoForward = false;
//this.canGoForward = false;
}
browseHashtag(hashtag: string): void {
@ -131,7 +159,7 @@ export class StreamOverlayComponent implements OnInit {
const hashTagElement = new StreamElement(StreamTypeEnum.tag, hashtag, selectedAccount.id, hashtag, null, `#${hashtag}@${selectedAccount.instance}`);
const newElement = new OverlayBrowsing(hashTagElement, null, null);
this.loadElement(newElement);
this.canGoForward = false;
// this.canGoForward = false;
}
browseThread(openThread: OpenThreadEvent): any {
@ -144,10 +172,13 @@ export class StreamOverlayComponent implements OnInit {
const newElement = new OverlayBrowsing(null, null, openThread);
this.loadElement(newElement);
this.canGoForward = false;
//this.canGoForward = false;
}
private loadElement(element: OverlayBrowsing) {
this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
this.refreshFocused = false;
this.currentElement = element;
this.accountName = this.currentElement.account;