added following account notification infos #55

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!
-            </div>
+                <a href class="stream__link"
+                    (click)="openAccount(notification.account)">{{ notification.account.display_name }}</a> followed
+                you!
             </div>
 
-        <app-status *ngIf="notification.status" class="stream__status" 
-            [statusWrapper]="notification.status"
-            [notificationAccount]="notification.account"
-            [notificationType]="notification.type"
-            (browseAccountEvent)="browseAccount($event)"
-            (browseHashtagEvent)="browseHashtag($event)" 
+            <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)"
             (browseThreadEvent)="browseThread($event)"></app-status>
     </div>
 

src/app/components/floating-column/manage-account/notifications/notifications.component.scss

@@ -50,3 +50,41 @@
 .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;
+    }
+}

src/app/components/floating-column/manage-account/notifications/notifications.component.ts

@@ -118,6 +118,14 @@ export class NotificationsComponent implements OnInit, OnDestroy {
             });
     }
     
+    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);