chore: mark unread notifications with a different background color

Author: AXeL-dev

src/app/modules/popup/layout/layout.component.html

@@ -49,7 +49,7 @@
     </main>
   </div>
 
-  <aside mdcDrawerContainer="temporary" class="right" [(open)]="openNotifications">
+  <aside mdcDrawerContainer="temporary" class="right" [(open)]="openNotifications" (openChange)="onOpenNotificationsChange($event)">
     <nav mdcDrawer>
       <div mdcDrawerToolbarSpacer></div>
       <div mdcDrawerHeader>

src/app/modules/popup/layout/layout.component.ts

@@ -13,6 +13,7 @@ export class LayoutComponent implements OnInit {
 
   openMenu: boolean = false;
   openNotifications: boolean = false;
+  private wasNotificationsOpened: boolean = false;
   @Input() view: View = null;
   @Input() isLoading: boolean = false;
   @Output() private isLoadingChange: EventEmitter<boolean> = new EventEmitter();
@@ -41,13 +42,13 @@ export class LayoutComponent implements OnInit {
 
   toggleNotifications() {
     this.openNotifications = !this.openNotifications;
-    if (this.openNotifications) {
-      this.notifications.markAllAsRead();
-    }
+    this.wasNotificationsOpened = this.openNotifications;
   }
 
-  closeNotifications() {
-    this.openNotifications = false;
+  onOpenNotificationsChange(open: boolean) {
+    if (!open && this.wasNotificationsOpened) {
+      this.notifications.markAllAsRead();
+    }
   }
 
   onSearchTap() {

src/app/modules/popup/notifications/notifications.component.html

@@ -2,7 +2,7 @@
 <ng-container *ngIf="notifications.get().length > 0; else noNotificationsTpl">
   <div mdcListGroup>
     <nav mdcList *ngFor="let notification of notifications.get()">
-      <a mdcListItem>
+      <a mdcListItem [class.unread]="notification.status === notificationStatus.Unread">
         <ng-container
           [ngTemplateOutlet]="notificationIconTpl"
           [ngTemplateOutletContext]="{ $implicit: notification }"

src/app/modules/popup/notifications/notifications.component.scss

@@ -12,6 +12,10 @@
   color: $green-color;
 }
 
+.unread {
+  background-color: #ECF8FE;
+}
+
 .no-notifications-container {
   display: flex;
   width: 100%;

src/app/modules/popup/notifications/notifications.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Notification, NotificationType } from 'src/app/models/notification';
+import { NotificationType, NotificationStatus } from 'src/app/models/notification';
 import { NotificationsService } from 'src/app/services/notifications.service';
 
 @Component({
@@ -10,6 +10,7 @@ import { NotificationsService } from 'src/app/services/notifications.service';
 export class NotificationsComponent implements OnInit {
 
   notificationTypes: typeof NotificationType = NotificationType;
+  notificationStatus: typeof NotificationStatus = NotificationStatus;
 
   constructor(public notifications: NotificationsService) { }