From 4541b7b092d491e5a3ffe4646492b0b07196a5d8 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 1 Apr 2019 23:54:08 -0400
Subject: [PATCH] added following account notification infos #55

---
 .../notifications.component.html              | 19 ++++++----
 .../notifications.component.scss              | 38 +++++++++++++++++++
 .../notifications/notifications.component.ts  |  8 ++++
 3 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.html b/src/app/components/floating-column/manage-account/notifications/notifications.component.html
index 8ec19e05..69ce399f 100644
--- a/src/app/components/floating-column/manage-account/notifications/notifications.component.html
+++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.html
@@ -23,16 +23,21 @@
                 <fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
             </div>
             <div class="stream__notification--label">
-                <a href class="stream__link">{{ notification.account.display_name }}</a> followed you!
+                <a href class="stream__link"
+                    (click)="openAccount(notification.account)">{{ notification.account.display_name }}</a> followed
+                you!
             </div>
+
+            <a href (click)="openAccount(notification.account)" class="follow-account" title="{{notification.account.acct}}">
+                <img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
+                <span class="follow-account__display-name" >{{ notification.account.display_name }}</span>
+                <span class="follow-account__acct">@{{ notification.account.acct }}</span>
+            </a>
         </div>
 
-        <app-status *ngIf="notification.status" class="stream__status" 
-            [statusWrapper]="notification.status"
-            [notificationAccount]="notification.account"
-            [notificationType]="notification.type"
-            (browseAccountEvent)="browseAccount($event)"
-            (browseHashtagEvent)="browseHashtag($event)" 
+        <app-status *ngIf="notification.status" class="stream__status" [statusWrapper]="notification.status"
+            [notificationAccount]="notification.account" [notificationType]="notification.type"
+            (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
             (browseThreadEvent)="browseThread($event)"></app-status>
     </div>
 
diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.scss b/src/app/components/floating-column/manage-account/notifications/notifications.component.scss
index 02d7ed7e..177fdae3 100644
--- a/src/app/components/floating-column/manage-account/notifications/notifications.component.scss
+++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.scss
@@ -49,4 +49,42 @@
 
 .followed {
     color: $boost-color;
+}
+
+.follow-account {
+    padding: 5px;
+    height: 60px;
+    width: calc(100%);
+    overflow: hidden;
+    display: block;
+    position: relative;
+    text-decoration: none;
+
+    &__avatar {
+        float: left;
+        margin: 0 0 0 10px;
+        width: 45px;
+        height: 45px;
+        border-radius: 2px;
+    }
+
+    $acccount-info-left: 70px;
+    &__display-name {
+        position: absolute;
+        top: 7px;
+        left:  $acccount-info-left;
+        color: whitesmoke;      
+    }
+
+    &:hover &__display-name {
+        text-decoration: underline;
+    }
+
+    &__acct {
+        position: absolute;
+        top: 27px;
+        left: $acccount-info-left;
+        font-size: 13px;
+        color: $status-links-color;
+    }
 }
\ No newline at end of file
diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.ts b/src/app/components/floating-column/manage-account/notifications/notifications.component.ts
index 8dcb35dc..34051570 100644
--- a/src/app/components/floating-column/manage-account/notifications/notifications.component.ts
+++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.ts
@@ -117,7 +117,15 @@ export class NotificationsComponent implements OnInit, OnDestroy {
                 this.isLoading = false;
             });
     }
+    
+    openAccount(account: Account): boolean {
+        let accountName = account.acct;
+        if (!accountName.includes('@'))
+            accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
 
+        this.browseAccountEvent.next(accountName);
+        return false;
+    }
     
     browseAccount(accountName: string): void {
         this.browseAccountEvent.next(accountName);