Refactor how we use icons

Inject them in an angular component so we can easily change their color

5 files changed, 119 insertions, 62 deletions

diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 5ff816fb8..c5996a8a1 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -1,4 +1,5 @@
-import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
+import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
+import { Actor } from '@app/shared/actor/actor.model'
 
 export class UserNotification implements UserNotificationServer {
   id: number
@@ -6,10 +7,7 @@ export class UserNotification implements UserNotificationServer {
   read: boolean
 
   video?: VideoInfo & {
-    channel: {
-      id: number
-      displayName: string
-    }
+    channel: ActorInfo & { avatarUrl?: string }
   }
 
   videoImport?: {
@@ -23,10 +21,7 @@ export class UserNotification implements UserNotificationServer {
   comment?: {
     id: number
     threadId: number
-    account: {
-      id: number
-      displayName: string
-    }
+    account: ActorInfo & { avatarUrl?: string }
     video: VideoInfo
   }
 
@@ -40,18 +35,11 @@ export class UserNotification implements UserNotificationServer {
     video: VideoInfo
   }
 
-  account?: {
-    id: number
-    displayName: string
-    name: string
-  }
+  account?: ActorInfo & { avatarUrl?: string }
 
   actorFollow?: {
     id: number
-    follower: {
-      name: string
-      displayName: string
-    }
+    follower: ActorInfo & { avatarUrl?: string }
     following: {
       type: 'account' | 'channel'
       name: string
@@ -76,12 +64,22 @@ export class UserNotification implements UserNotificationServer {
     this.read = hash.read
 
     this.video = hash.video
+    if (this.video) this.setAvatarUrl(this.video.channel)
+
     this.videoImport = hash.videoImport
+
     this.comment = hash.comment
+    if (this.comment) this.setAvatarUrl(this.comment.account)
+
     this.videoAbuse = hash.videoAbuse
+
     this.videoBlacklist = hash.videoBlacklist
+
     this.account = hash.account
+    if (this.account) this.setAvatarUrl(this.account)
+
     this.actorFollow = hash.actorFollow
+    if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower)
 
     this.createdAt = hash.createdAt
     this.updatedAt = hash.updatedAt
@@ -150,4 +148,7 @@ export class UserNotification implements UserNotificationServer {
     return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
   }
 
+  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) {
+    actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
+  }
 }
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index 67ed8f74e..f8a30955d 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -15,8 +15,6 @@ export class UserNotificationService {
   static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
   static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
 
-  private socket: SocketIOClient.Socket
-
   constructor (
     private auth: AuthService,
     private authHttp: HttpClient,
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 86379d941..caa518e7f 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -1,61 +1,101 @@
 <div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
 
 <div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
-  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
 
-    <div [ngSwitch]="notification.type">
+    <ng-container [ngSwitch]="notification.type">
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
-        {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+
+        <div class="message">
+          {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        <my-global-icon iconName="undo"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        <my-global-icon iconName="no"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        <my-global-icon iconName="alert"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
-        {{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          {{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
-        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        <my-global-icon iconName="sparkle"></my-global-icon>
+
+        <div class="message">
+          Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        <my-global-icon iconName="cloud-download"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        <my-global-icon iconName="cloud-error"></my-global-icon>
+
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
-        User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        <my-global-icon iconName="user-add"></my-global-icon>
+
+        <div class="message">
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
-        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
 
-        <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">
-          your channel {{ notification.actorFollow.following.displayName }}
-        </ng-container>
-        <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        <div class="message">
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+
+          <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">your channel {{ notification.actorFollow.following.displayName }}</ng-container>
+          <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+        </div>
       </ng-container>
 
       <ng-container i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
-        {{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+
+        <div class="message">
+          {{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+        </div>
       </ng-container>
-    </div>
+    </ng-container>
 
-    <div i18n title="Mark as read" class="mark-as-read">
-      <div class="glyphicon glyphicon-ok" (click)="markAsRead(notification)"></div>
-    </div>
+    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
   </div>
 </div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 0ae26ea39..315d504c9 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .no-notification {
   display: flex;
   justify-content: center;
@@ -7,31 +10,42 @@
 
 .notification {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   font-size: inherit;
-  padding: 15px 10px;
+  padding: 15px 5px 15px 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.10);
 
-  .mark-as-read {
-    min-width: 35px;
+  &.unread {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  my-global-icon {
+    width: 24px;
+    margin-right: 11px;
+    margin-left: 3px;
 
-    .glyphicon {
-      display: none;
-      cursor: pointer;
-      color: rgba(20, 20, 20, 0.5)
-    }
+    @include apply-svg-color(#333);
   }
 
-  &.unread {
-    background-color: rgba(0, 0, 0, 0.05);
+  .avatar {
+    @include avatar(30px);
+
+    margin-right: 10px;
+  }
 
-    &:hover .mark-as-read .glyphicon {
-      display: block;
+  .message {
+    flex-grow: 1;
 
-      &:hover {
-        color: rgba(20, 20, 20, 0.8);
-      }
+    a {
+      font-weight: $font-semibold;
     }
   }
+
+  .from-date {
+    font-size: 0.85em;
+    color: $grey-foreground-color;
+    padding-left: 5px;
+    min-width: 70px;
+    text-align: right;
+  }
 }
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
index e3913ba56..b5f9fd399 100644
--- a/client/src/app/shared/users/user-notifications.component.ts
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -20,11 +20,7 @@ export class UserNotificationsComponent implements OnInit {
   // So we can access it in the template
   UserNotificationType = UserNotificationType
 
-  componentPagination: ComponentPagination = {
-    currentPage: 1,
-    itemsPerPage: this.itemsPerPage,
-    totalItems: null
-  }
+  componentPagination: ComponentPagination
 
   constructor (
     private userNotificationService: UserNotificationService,
@@ -32,6 +28,12 @@ export class UserNotificationsComponent implements OnInit {
   ) { }
 
   ngOnInit () {
+    this.componentPagination = {
+      currentPage: 1,
+      itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
+      totalItems: null
+    }
+
     this.loadMoreNotifications()
   }
 
@@ -58,6 +60,8 @@ export class UserNotificationsComponent implements OnInit {
   }
 
   markAsRead (notification: UserNotification) {
+    if (notification.read) return
+
     this.userNotificationService.markAsRead(notification)
         .subscribe(
           () => {