added notification in component

src/app/app.module.ts

@@ -78,6 +78,7 @@ import { PollEntryComponent } from './components/create-status/poll-editor/poll-
 import { ScheduledStatusesComponent } from './components/floating-column/scheduled-statuses/scheduled-statuses.component';
 import { ScheduledStatusComponent } from './components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component';
 import { StreamNotificationsComponent } from './components/stream/stream-notifications/stream-notifications.component';
+import { NotificationComponent } from './components/floating-column/manage-account/notifications/notification/notification.component';
 
 
 const routes: Routes = [
@@ -138,7 +139,8 @@ const routes: Routes = [
         PollEntryComponent,
         ScheduledStatusesComponent,
         ScheduledStatusComponent,
-        StreamNotificationsComponent
+        StreamNotificationsComponent,
+        NotificationComponent
     ],
     entryComponents: [
         EmojiPickerComponent

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

@@ -0,0 +1,26 @@
+<div class="notification">
+    <div *ngIf="notification.type === 'follow'">
+        <div class="stream__notification--icon" title="{{notification.account.acct}}">
+            <fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
+        </div>
+        <div class="stream__notification--label">
+            <a href class="stream__link" title="{{notification.account.acct}}"
+                (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
+                innerHTML="{{ notification.account | accountEmoji }}"></a>
+            followed
+            you!
+        </div>
+
+        <a href (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
+            class="follow-account" title="{{notification.account.acct}}">
+            <img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
+            <span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></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/notification/notification.component.scss

@@ -0,0 +1,85 @@
+@import "variables";
+@import "commons";
+@import "mixins";
+
+.notification {
+    position: relative;
+}
+
+.stream {
+    position: relative;
+    &__notification {
+        position: relative;
+
+        &--icon {
+            position: absolute;
+            top: 5px;
+            left: 43px;
+            text-align: center;
+            width: 20px;
+            // outline: 1px dotted greenyellow;
+        }
+
+        &--label {
+            margin: 0 10px 0 $avatar-column-space;
+            padding-top: 5px;
+        }
+
+
+        &:not(:last-child) {
+            border: solid #06070b;
+            border-width: 0 0 1px 0;
+        }
+    }
+
+    &__link {
+        color: $status-links-color;
+    }
+
+    &__status {
+        display: block;
+        // opacity: 0.65;
+    }
+}
+
+.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/notification/notification.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+xdescribe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
+
+import { NotificationWrapper } from '../notifications.component';
+import { OpenThreadEvent, ToolsService } from '../../../../../services/tools.service';
+import { Account } from '../../../../../services/models/mastodon.interfaces';
+
+@Component({
+    selector: 'app-notification',
+    templateUrl: './notification.component.html',
+    styleUrls: ['./notification.component.scss']
+})
+export class NotificationComponent implements OnInit {
+    faUserPlus = faUserPlus;
+
+    @Input() notification: NotificationWrapper;
+
+    @Output() browseAccountEvent = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
+    @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
+
+    constructor(private readonly toolsService: ToolsService) { }
+
+    ngOnInit() {
+    }
+
+    browseAccount(accountName: string): void {
+        this.browseAccountEvent.next(accountName);
+    }
+
+    browseHashtag(hashtag: string): void {
+        this.browseHashtagEvent.next(hashtag);
+    }
+
+    browseThread(openThreadEvent: OpenThreadEvent): void {
+        this.browseThreadEvent.next(openThreadEvent);
+    }
+
+    openAccount(account: Account): boolean {
+        let accountName = this.toolsService.getAccountFullHandle(account);
+        this.browseAccountEvent.next(accountName);
+        return false;
+    }
+    
+    openUrl(url: string): boolean {
+        window.open(url, '_blank');
+        return false;
+    }
+}

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

@@ -1,50 +1,6 @@
 <div class="stream flexcroll" #statusstream (scroll)="onScroll()">
     <div class="stream__notification" *ngFor="let notification of notifications">
-        <!-- <div *ngIf="notification.type === 'favourite'">
+        <app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-notification>
-            <div class="stream__notification--icon">
-                <fa-icon class="favorite" [icon]="faStar"></fa-icon>
-            </div>
-            <div class="stream__notification--label">
-                <a href class="stream__link">{{ notification.account.username }}</a> favorited your status
-            </div>
-        </div>
-
-        <div *ngIf="notification.type === 'reblog'">
-            <div class="stream__notification--icon">
-                <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
-            </div>
-            <div class="stream__notification--label">
-                <a href class="stream__link">{{ notification.account.username }}</a> boosted your status
-            </div>
-        </div> -->
-
-        <div *ngIf="notification.type === 'follow'">
-            <div class="stream__notification--icon" title="{{notification.account.acct}}">
-                <fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
-            </div>
-            <div class="stream__notification--label">
-                <a href class="stream__link" 
-                    title="{{notification.account.acct}}"
-                    (click)="openAccount(notification.account)" 
-                    (auxclick)="openUrl(notification.account.url)"
-                    innerHTML="{{ notification.account | accountEmoji }}"></a> followed
-                you!
-            </div>
-
-            <a href 
-                (click)="openAccount(notification.account)" 
-                (auxclick)="openUrl(notification.account.url)"
-                class="follow-account" title="{{notification.account.acct}}">
-                <img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
-                <span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></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>
 
     <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>

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

@@ -13,78 +13,78 @@
         color: rgb(255, 113, 113);
     }
 
-    &__notification {
+    // &__notification {
-        position: relative;
+    //     position: relative;
 
-        &--icon {
+    //     &--icon {
-            position: absolute;
+    //         position: absolute;
-            top: 5px;
+    //         top: 5px;
-            left: 43px;
+    //         left: 43px;
-            text-align: center;
+    //         text-align: center;
-            width: 20px;
+    //         width: 20px;
-            // outline: 1px dotted greenyellow;
+    //         // outline: 1px dotted greenyellow;
-        }
+    //     }
 
-        &--label {
+    //     &--label {
-            margin: 0 10px 0 $avatar-column-space;
+    //         margin: 0 10px 0 $avatar-column-space;
-            padding-top: 5px;
+    //         padding-top: 5px;
-        }
+    //     }
 
 
-        &:not(:last-child) {
+    //     &:not(:last-child) {
-            border: solid #06070b;
+    //         border: solid #06070b;
-            border-width: 0 0 1px 0;
+    //         border-width: 0 0 1px 0;
-        }
+    //     }
-    }
+    // }
 
-    &__link {
+    // &__link {
-        color: $status-links-color;
+    //     color: $status-links-color;
-    }
+    // }
 
-    &__status {
+    // &__status {
-        display: block;
+    //     display: block;
-        // opacity: 0.65;
+    //     // opacity: 0.65;
-    }
+    // }
 }
 
-.followed {
+// .followed {
-    color: $boost-color;
+//     color: $boost-color;
-}
+// }
 
-.follow-account {
+// .follow-account {
-    padding: 5px;
+//     padding: 5px;
-    height: 60px;
+//     height: 60px;
-    width: calc(100%);
+//     width: calc(100%);
-    overflow: hidden;
+//     overflow: hidden;
-    display: block;
+//     display: block;
-    position: relative;
+//     position: relative;
-    text-decoration: none;
+//     text-decoration: none;
 
-    &__avatar {
+//     &__avatar {
-        float: left;
+//         float: left;
-        margin: 0 0 0 10px;
+//         margin: 0 0 0 10px;
-        width: 45px;
+//         width: 45px;
-        height: 45px;
+//         height: 45px;
-        border-radius: 2px;
+//         border-radius: 2px;
-    }
+//     }
 
-    $acccount-info-left: 70px;
+//     $acccount-info-left: 70px;
-    &__display-name {
+//     &__display-name {
-        position: absolute;
+//         position: absolute;
-        top: 7px;
+//         top: 7px;
-        left:  $acccount-info-left;
+//         left:  $acccount-info-left;
-        color: whitesmoke;      
+//         color: whitesmoke;      
-    }
+//     }
 
-    &:hover &__display-name {
+//     &:hover &__display-name {
-        text-decoration: underline;
+//         text-decoration: underline;
-    }
+//     }
 
-    &__acct {
+//     &__acct {
-        position: absolute;
+//         position: absolute;
-        top: 27px;
+//         top: 27px;
-        left: $acccount-info-left;
+//         left: $acccount-info-left;
-        font-size: 13px;
+//         font-size: 13px;
-        color: $status-links-color;
+//         color: $status-links-color;
-    }
+//     }
-}
+// }

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

@@ -1,7 +1,5 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { faStar, faUserPlus, faRetweet } from "@fortawesome/free-solid-svg-icons";
-import { faStar as faStar2 } from "@fortawesome/free-regular-svg-icons";
 
 import { AccountWrapper } from '../../../../models/account.models';
 import { UserNotificationService, UserNotification } from '../../../../services/user-notification.service';
@@ -18,10 +16,6 @@ import { OpenThreadEvent, ToolsService } from '../../../../services/tools.servic
     styleUrls: ['./notifications.component.scss']
 })
 export class NotificationsComponent implements OnInit, OnDestroy {
-    faUserPlus = faUserPlus;
-    // faStar = faStar;
-    // faRetweet = faRetweet;
-
     notifications: NotificationWrapper[] = [];
     isLoading = false;
 
@@ -45,8 +39,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     private userNotificationServiceSub: Subscription;
     private lastId: string;
 
-    constructor(
+    constructor(        
-        private readonly toolsService: ToolsService,
         private readonly notificationService: NotificationService,
         private readonly userNotificationService: UserNotificationService,
         private readonly mastodonService: MastodonWrapperService) { }
@@ -125,17 +118,6 @@ export class NotificationsComponent implements OnInit, OnDestroy {
                 this.isLoading = false;
             });
     }
-    
-    openAccount(account: Account): boolean {
-        let accountName = this.toolsService.getAccountFullHandle(account);
-        this.browseAccountEvent.next(accountName);
-        return false;
-    }
-    
-    openUrl(url: string): boolean {
-        window.open(url, '_blank');
-        return false;
-    }
 
     browseAccount(accountName: string): void {
         this.browseAccountEvent.next(accountName);
@@ -150,7 +132,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     }
 }
 
-class NotificationWrapper {
+export class NotificationWrapper {
     constructor(notification: Notification,  provider: AccountInfo) {
         this.type = notification.type;
         switch(this.type){