From 51f048bfd5621f7a96bd76ad735f31a6ad8316b1 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 20 Apr 2020 02:06:42 -0400
Subject: [PATCH] tunning TL header depending of settings

---
 .../components/stream/stream.component.html   | 20 +++++----
 .../components/stream/stream.component.scss   | 45 ++++++++++++++++---
 src/app/components/stream/stream.component.ts | 23 +++++++---
 src/app/services/tools.service.ts             |  1 -
 4 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html
index 8d0d8ec1..a71ca301 100644
--- a/src/app/components/stream/stream.component.html
+++ b/src/app/components/stream/stream.component.html
@@ -7,19 +7,20 @@
         <!-- <div> -->
         <div class="stream-column__stream-header">
             <a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
+                <img *ngIf="timelineHeader === 3 || timelineHeader === 4" class="stream-column__stream-selector--avatar" src="{{avatar}}" />
                 <fa-icon class="stream-column__stream-selector--icon" [icon]="columnFaIcon"></fa-icon>
-                <h1 class="stream-column__stream-selector--title">{{ streamElement.name.toUpperCase() }}</h1>
-                <span class="stream-column__stream-selector--subtitle"
-                    *ngIf="streamElement.instance">{{ streamElement.instance.toLowerCase() }}</span>
+                <span class="stream-column__stream-selector--text">
+                    <h1 class="stream-column__stream-selector--title" [class.stream-column__stream-selector--title--only]="timelineHeader === 4 || timelineHeader === 5">{{ streamElement.name.toUpperCase() }}</h1>
+                    <span class="stream-column__stream-selector--subtitle" *ngIf="streamElement.instance && timelineHeader !== 4 && timelineHeader !== 5"><span *ngIf="timelineHeader === 2">{{account.username}}@</span>{{ streamElement.instance.toLowerCase() }}</span>
+                </span>
             </a>
             <a class="stream-column__open-menu" href title="edit column" (click)="openEditionMenu()">
                 <fa-icon class="stream-column__open-menu--icon" [icon]="menuFaIcon"></fa-icon>
             </a>
         </div>
 
-        <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" 
-            [streamElement]="streamElement" [displayingNotifications]="displayingNotifications"
-            (closed)="streamEditionClosed()">
+        <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement"
+            [displayingNotifications]="displayingNotifications" (closed)="streamEditionClosed()">
         </app-stream-edition>
 
         <app-stream-statuses *ngIf="!displayingNotifications" class="stream-statuses" [streamElement]="streamElement"
@@ -27,9 +28,10 @@
             (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
         </app-stream-statuses>
 
-        <app-stream-notifications *ngIf="displayingNotifications" class="stream-statuses" [streamElement]="streamElement"
-            [goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)"
-            (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
+        <app-stream-notifications *ngIf="displayingNotifications" class="stream-statuses"
+            [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()"
+            (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
+            (browseThreadEvent)="browseThread($event)">
 
         </app-stream-notifications>
         <!-- </div> -->
diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss
index 9df6f4d2..1ff98325 100644
--- a/src/app/components/stream/stream.component.scss
+++ b/src/app/components/stream/stream.component.scss
@@ -48,27 +48,58 @@
         text-decoration: none; 
         color: whitesmoke;
         position: relative;
+        &--avatar {
+            width: 20px;
+            float: left;
+            margin-left: 11px;
+            position: relative;
+            // left: 11px;
+            top: 9px;
+        }
         &--icon {
             float: left;
+            margin-left: 11px;
             position: relative;
-            left: 11px;
+            // left: 11px;
             top: 9px;
         }
+        &--text {
+            float: left;
+            margin-left: 9px;
+        }
         &--title {
             font-size: 0.8em;
             font-weight: normal;
-            position: absolute;
+            // float: left;
+            // margin-left: 10px;
+            // position: absolute;
+            position: relative;
             top: 9px;
-            left: 35px;
-        }
+            // left: 35px;
+
+            &--only {
+                top: 13px;
+            }
+        }        
+
         &--subtitle {
             color: $font-link-primary-hover;
             font-size: 0.7em;
             font-weight: normal;
             font-style: italic;
-            position: absolute;
-            top: 21px;
-            left: 35px;;
+            // position: absolute;
+            position: relative;
+            top: -2px;
+            // top: 21px;
+            // top: 10px;
+            // left: 35px;;
+            // outline: 1px solid greenyellow;
+            display: inline-block;
+            white-space: nowrap;
+            max-width: 240px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            padding-right: 5px;
         }
     }
 }
diff --git a/src/app/components/stream/stream.component.ts b/src/app/components/stream/stream.component.ts
index dd7878fb..bb7850e1 100644
--- a/src/app/components/stream/stream.component.ts
+++ b/src/app/components/stream/stream.component.ts
@@ -3,9 +3,11 @@ import { Subject } from "rxjs";
 import { faHome, faGlobe, faUser, faHashtag, faListUl, faBars, IconDefinition, faBell } from "@fortawesome/free-solid-svg-icons";
 
 import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
-import { OpenThreadEvent } from "../../services/tools.service";
+import { OpenThreadEvent, ToolsService } from "../../services/tools.service";
 import { StreamStatusesComponent } from './stream-statuses/stream-statuses.component';
 import { StreamNotificationsComponent } from './stream-notifications/stream-notifications.component';
+import { TimeLineHeaderEnum } from '../../states/settings.state';
+import { AccountInfo } from '../../states/accounts.state';
 
 @Component({
     selector: "app-stream",
@@ -21,6 +23,10 @@ export class StreamComponent implements OnInit {
     overlayHashtagToBrowse: string;
     overlayThreadToBrowse: OpenThreadEvent;
 
+    timelineHeader: TimeLineHeaderEnum;
+    account: AccountInfo;
+    avatar: string;
+
     displayingNotifications: boolean;
 
     goToTopSubject: Subject<void> = new Subject<void>();
@@ -48,26 +54,33 @@ export class StreamComponent implements OnInit {
             case StreamTypeEnum.list:
                 this.columnFaIcon = faListUl;
                 break;
-            case StreamTypeEnum.activity: 
+            case StreamTypeEnum.activity:
                 this.columnFaIcon = faBell;
                 this.displayingNotifications = true;
                 break;
         }
 
         this._streamElement = stream;
+        this.account = this.toolsService.getAccountById(stream.accountId);
+        this.toolsService.getAvatar(this.account)
+            .then(a => {
+                this.avatar = a;
+            })
+            .catch(err => { });
     }
     get streamElement(): StreamElement {
         return this._streamElement;
     }
 
-
-    constructor() { }
+    constructor(private toolsService: ToolsService) { }
 
     ngOnInit() {
+        let settings = this.toolsService.getSettings();
+        this.timelineHeader = settings.timelineHeader;
     }
 
     focus(): boolean {
-        if(this.overlayActive) return false;
+        if (this.overlayActive) return false;
 
         if (!this.displayingNotifications) {
             this.streamStatusesComponent.focus();
diff --git a/src/app/services/tools.service.ts b/src/app/services/tools.service.ts
index c9da9260..7aa3426d 100644
--- a/src/app/services/tools.service.ts
+++ b/src/app/services/tools.service.ts
@@ -6,7 +6,6 @@ import { MastodonWrapperService } from './mastodon-wrapper.service';
 import { Account, Results, Status, Emoji } from "./models/mastodon.interfaces";
 import { StatusWrapper } from '../models/common.model';
 import { AccountSettings, SaveAccountSettings, GlobalSettings, SaveSettings, ContentWarningPolicy, SaveContentWarningPolicy, ContentWarningPolicyEnum, TimeLineModeEnum, TimeLineHeaderEnum } from '../states/settings.state';
-import { AppInfo, RegisteredAppsStateModel } from '../states/registered-apps.state';
 
 @Injectable({
     providedIn: 'root'