display proper icon on columns
This commit is contained in:
parent
46e0d4e1b5
commit
1acad1ca03
|
@ -4,9 +4,9 @@
|
||||||
[browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse" [browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
|
[browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse" [browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
|
||||||
|
|
||||||
<div class="stream-column__stream-header">
|
<div class="stream-column__stream-header">
|
||||||
<fa-icon [icon]="faCoffee"></fa-icon>
|
|
||||||
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
|
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
|
||||||
<h1>{{ streamElement.name.toUpperCase() }}</h1>
|
<fa-icon class="stream-column__stream-selector--icon" [icon]="faIcon"></fa-icon>
|
||||||
|
<h1 class="stream-column__stream-selector--title">{{ streamElement.name.toUpperCase() }}</h1>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()"
|
<app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()"
|
||||||
|
|
|
@ -16,17 +16,27 @@ $stream-header-height: 40px;
|
||||||
width: calc(100%);
|
width: calc(100%);
|
||||||
height: $stream-header-height;
|
height: $stream-header-height;
|
||||||
background-color: $column-header-background-color;
|
background-color: $column-header-background-color;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
// &:hover {
|
||||||
text-decoration: none;
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
color: whitesmoke;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
left: 11px;
|
||||||
|
top: 9px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& h1 {
|
&--title {
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin: 0;
|
// margin: 0 0 0 25px;
|
||||||
padding: 13px 0 0 10px;
|
padding: 14px 0 0 35px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Component, OnInit, Input, ElementRef, ViewChild, HostListener } from "@angular/core";
|
import { Component, OnInit, Input, ElementRef, ViewChild, HostListener } from "@angular/core";
|
||||||
import { Subject } from "rxjs";
|
import { Subject } from "rxjs";
|
||||||
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
|
import { faHome, faGlobe, faUser, faHashtag, faListUl, IconDefinition } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
import { StreamElement } from "../../states/streams.state";
|
import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
|
||||||
import { Status } from "../../services/models/mastodon.interfaces";
|
import { Status } from "../../services/models/mastodon.interfaces";
|
||||||
import { AccountInfo } from "../../states/accounts.state";
|
import { AccountInfo } from "../../states/accounts.state";
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ import { AccountInfo } from "../../states/accounts.state";
|
||||||
styleUrls: ["./stream.component.scss"]
|
styleUrls: ["./stream.component.scss"]
|
||||||
})
|
})
|
||||||
export class StreamComponent implements OnInit {
|
export class StreamComponent implements OnInit {
|
||||||
faCoffee = faCoffee;
|
faIcon: IconDefinition;
|
||||||
|
|
||||||
overlayActive: boolean;
|
overlayActive: boolean;
|
||||||
overlayAccountToBrowse: string;
|
overlayAccountToBrowse: string;
|
||||||
|
@ -21,7 +21,34 @@ export class StreamComponent implements OnInit {
|
||||||
|
|
||||||
goToTopSubject: Subject<void> = new Subject<void>();
|
goToTopSubject: Subject<void> = new Subject<void>();
|
||||||
|
|
||||||
@Input() streamElement: StreamElement;
|
private _streamElement: StreamElement;
|
||||||
|
|
||||||
|
@Input('streamElement')
|
||||||
|
set streamElement(stream: StreamElement) {
|
||||||
|
switch (stream.type) {
|
||||||
|
case StreamTypeEnum.personnal:
|
||||||
|
this.faIcon = faHome;
|
||||||
|
break;
|
||||||
|
case StreamTypeEnum.global:
|
||||||
|
this.faIcon = faGlobe;
|
||||||
|
break;
|
||||||
|
case StreamTypeEnum.local:
|
||||||
|
this.faIcon = faUser;
|
||||||
|
break;
|
||||||
|
case StreamTypeEnum.tag:
|
||||||
|
this.faIcon = faHashtag;
|
||||||
|
break;
|
||||||
|
case StreamTypeEnum.list:
|
||||||
|
this.faIcon = faListUl;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._streamElement = stream;
|
||||||
|
}
|
||||||
|
get streamElement(): StreamElement {
|
||||||
|
return this._streamElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue