(Mail-ngrx) unread, selected class added for mail list item

src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts

@@ -33,6 +33,17 @@ export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChange
     ngOnChanges()
     {
         this.updateModel(this.mailInput);
+        this.markAsRead();
+    }
+
+    markAsRead()
+    {
+        if ( this.mail && !this.mail.read )
+        {
+            this.mail.markRead();
+            this.updateMail();
+        }
+
     }
 
     toggleStar(event)

src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss

@@ -6,6 +6,7 @@
     padding: 16px 24px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     cursor: pointer;
+    background: #FAFAFA;
 
     &.unread {
         background: #FFFFFF;

src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts

@@ -15,6 +15,7 @@ export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
 {
     @Input() mail: Mail;
     @HostBinding('class.selected') selected: boolean;
+    @HostBinding('class.unread') unread: boolean;
     labels$: Observable<any>;
     selectedMailIds$: Observable<any>;
 
@@ -33,6 +34,7 @@ export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
     {
         // Set the initial values
         this.mail = new Mail(this.mail);
+        this.unread = !this.mail.read;
 
         this.selectedMailIds$.subscribe((selectedMailIds) => {
             this.selected = selectedMailIds.length > 0 && selectedMailIds.find(id => id === this.mail.id) !== undefined;

src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts

@@ -12,7 +12,7 @@ import { MailNgrxService } from '../mail.service';
 export class FuseMailNgrxListComponent implements OnInit, OnDestroy
 {
     @Input() mails: Mail[];
-    currentMail: Mail;
+    @Input() currentMail: Mail[];
 
     constructor(
         private route: ActivatedRoute,

src/app/main/content/apps/mail-ngrx/mail.component.html

@@ -98,7 +98,7 @@
                 <!-- CONTENT -->
                 <div class="content" fxLayoutAlign="row">
 
-                    <fuse-mail-list fusePerfectScrollbar fxFlex [mails]="mails$ | async"></fuse-mail-list>
+                    <fuse-mail-list fusePerfectScrollbar fxFlex [mails]="mails$ | async" [currentMail]="currentMail$ | async"></fuse-mail-list>
 
                     <fuse-mail-details [mail]="currentMail$ | async" fusePerfectScrollbar fxFlex></fuse-mail-details>
 

src/app/main/content/apps/mail-ngrx/mail.model.ts

@@ -53,4 +53,14 @@ export class Mail
     {
         this.important = !this.important;
     }
+
+    markRead()
+    {
+        this.read = true;
+    }
+
+    markUnRead()
+    {
+        this.read = false;
+    }
 }