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

@@ -12,6 +12,8 @@
       [showTabs]="!newNavigation"
       [showShadows]="!newNavigation"
       [showInfiniteScroll]="!newNavigation"
+      [showElapsedTime]="newNavigation"
+      limit="5"
     ></minds-notifications>
   </div>
   <div

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

@@ -14,6 +14,41 @@ m-notifications--flyout {
     right: -80px;
   }
 
+  &.m-notificationsFlyout__newDesign {
+    minds-notifications {
+      .notifications-grid {
+        &.m-notificationsGrid__noScroll {
+          overflow-y: auto;
+        }
+
+        .mdl-cell--12-col minds-notification {
+          .body {
+            a {
+              @include m-theme() {
+                color: themed($m-textColor--primary);
+              }
+              .pseudo-link {
+                @include m-theme() {
+                  color: themed($m-link) !important;
+                }
+              }
+            }
+
+            .ts.m-notification__friendlyTS {
+              text-transform: unset;
+              font-size: 12px;
+              letter-spacing: 0;
+
+              @include m-theme() {
+                color: themed($m-textColor--secondary);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   minds-notifications {
     .mdl-tabs__tab-bar {
       height: 40px;

src/app/modules/notifications/flyout.component.spec.ts

 ///<reference path="../../../../node_modules/@types/jasmine/index.d.ts"/>
-import {
-  async,
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-} from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Client } from '../../services/api/client';
 import { By } from '@angular/platform-browser';
 import { clientMock } from '../../../tests/client-mock.spec';
-import { MaterialMock } from '../../../tests/material-mock.spec';
 import { NotificationsFlyoutComponent } from './flyout.component';
 
-import { Mock, MockComponent, MockDirective } from '../../utils/mock';
+import { MockComponent, MockDirective } from '../../utils/mock';
 import { RouterTestingModule } from '@angular/router/testing';
+import { FeaturesService } from '../../services/features.service';
+import { featuresServiceMock } from '../../../tests/features-service-mock.spec';
 
 describe('NotificationsFlyoutComponent', () => {
   let comp: NotificationsFlyoutComponent;
@@ -28,14 +22,26 @@ describe('NotificationsFlyoutComponent', () => {
         MockComponent(
           {
             selector: 'minds-notifications',
-            inputs: ['loadOnDemand', 'hidden', 'visible', 'useOwnScrollSource'],
+            inputs: [
+              'loadOnDemand',
+              'hidden',
+              'visible',
+              'useOwnScrollSource',
+              'showTabs',
+              'showShadows',
+              'showInfiniteScroll',
+              'showElapsedTime',
+            ],
           },
           ['onVisible']
         ),
         NotificationsFlyoutComponent,
       ],
       imports: [RouterTestingModule],
-      providers: [{ provide: Client, useValue: clientMock }],
+      providers: [
+        { provide: Client, useValue: clientMock },
+        { provide: FeaturesService, useValue: featuresServiceMock },
+      ],
     }).compileComponents(); // compile template and css
   }));
 
@@ -44,6 +50,9 @@ describe('NotificationsFlyoutComponent', () => {
     jasmine.MAX_PRETTY_PRINT_DEPTH = 10;
     jasmine.clock().uninstall();
     jasmine.clock().install();
+
+    featuresServiceMock.mock('navigation', false);
+
     fixture = TestBed.createComponent(NotificationsFlyoutComponent);
     clientMock.response = {};
 

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

@@ -4,6 +4,7 @@ import {
   Output,
   EventEmitter,
   ViewChild,
+  HostBinding,
 } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -21,6 +22,7 @@ export class NotificationsFlyoutComponent {
 
   @ViewChild('notifications', { static: true }) notificationList: any;
 
+  @HostBinding('class.m-notificationsFlyout__newDesign')
   newNavigation: boolean = false;
 
   constructor(private featuresService: FeaturesService) {

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

@@ -1803,7 +1803,20 @@
     <span hidden>View: {{ notification.notification_view }}</span>
   </ng-template>
 
-  <span class="ts mdl-color-text--grey">{{
-    notification.time_created * 1000 | date: 'medium'
-  }}</span>
+  <span
+    class="ts mdl-color-text--grey m-notification__friendlyTS"
+    [title]="notification.time_created * 1000 | date: 'medium'"
+    *ngIf="
+      showElapsedTime && notificationAge$ | async as notificationAge;
+      else creationDateBlock
+    "
+  >
+    {{ notificationAge | friendlydatediff }}
+  </span>
+
+  <ng-template #creationDateBlock>
+    <span class="ts mdl-color-text--grey">
+      {{ notification.time_created * 1000 | date: 'medium' }}
+    </span>
+  </ng-template>
 </div>

src/app/modules/notifications/notification.component.spec.ts

@@ -23,6 +23,8 @@ import { sessionMock } from '../../../tests/session-mock.spec';
 
 import { ExcerptPipe } from '../../common/pipes/excerpt';
 import { ConfigsService } from '../../common/services/configs.service';
+import { FriendlyDateDiffPipe } from '../../common/pipes/friendlydatediff';
+import { TimeDiffService } from '../../services/timediff.service';
 
 describe('NotificationComponent', () => {
   let comp: NotificationComponent;
@@ -32,6 +34,7 @@ describe('NotificationComponent', () => {
     TestBed.configureTestingModule({
       declarations: [
         MaterialMock,
+        FriendlyDateDiffPipe,
         NotificationComponent,
         TokenPipe,
         ExcerptPipe,
@@ -40,6 +43,7 @@ describe('NotificationComponent', () => {
       providers: [
         { provide: Session, useValue: sessionMock },
         { provide: ConfigsService, useValue: MockService(ConfigsService) },
+        { provide: TimeDiffService, useValue: MockService(TimeDiffService) },
       ],
     }).compileComponents(); // compile template and css
   }));

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

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Session } from '../../services/session';
 import { Reason, rejectionReasons } from '../boost/rejection-reasons';
 import { ConfigsService } from '../../common/services/configs.service';
+import { TimeDiffService } from '../../services/timediff.service';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'minds-notification',
-  inputs: ['_notification: notification'],
   templateUrl: 'notification.component.html',
 })
 export class NotificationComponent {
-  notification: any;
   readonly cdnUrl: string;
+  notification: any;
 
-  constructor(public session: Session, configs: ConfigsService) {
-    this.cdnUrl = configs.get('cdn_url');
-  }
+  notificationAge$: Observable<number>;
+
+  @Input() showElapsedTime: boolean = false;
 
+  @Input('notification')
   set _notification(value: any) {
     this.notification = value;
+
+    if (this.showElapsedTime) {
+      this.notificationAge$ = this.timeDiffService.source.pipe(
+        map(secondsElapsed => {
+          return (this.notification.time_created - secondsElapsed) * 1000;
+        })
+      );
+    }
+  }
+
+  constructor(
+    public session: Session,
+    private timeDiffService: TimeDiffService,
+    private configs: ConfigsService
+  ) {
+    this.cdnUrl = configs.get('cdn_url');
   }
 
   openMessengerWindow(event) {

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

@@ -118,6 +118,7 @@
 </div>
 <div
   class="mdl-grid notifications-grid"
+  [class.m-notificationsGrid__noScroll]="!showInfiniteScroll"
   #notificationGrid
   style="max-width:600px"
 >
@@ -127,6 +128,7 @@
       class="mdl-card item"
       [class.mdl-shadow--2dp]="showShadows"
       [notification]="notification"
+      [showElapsedTime]="showElapsedTime"
     ></minds-notification>
 
     <infinite-scroll

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

@@ -14,10 +14,6 @@ minds-notification.mdl-card {
       background-color: themed($m-bgColor--secondary);
       border-bottom: 1px solid themed($m-borderColor--primary);
     }
-
-    .notifications-grid {
-      overflow-y: auto;
-    }
   }
 
   .avatar {

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

@@ -21,6 +21,8 @@ import { Mock, MockComponent, MockService } from '../../utils/mock';
 import { RouterTestingModule } from '@angular/router/testing';
 import { sessionMock } from '../../../tests/session-mock.spec';
 import { ConfigsService } from '../../common/services/configs.service';
+import { TimeDiffService } from '../../services/timediff.service';
+import { FriendlyDateDiffPipe } from '../../common/pipes/friendlydatediff';
 
 describe('NotificationsComponent', () => {
   let comp: NotificationsComponent;
@@ -33,7 +35,7 @@ describe('NotificationsComponent', () => {
         NotificationsComponent,
         MockComponent({
           selector: 'minds-notification',
-          inputs: ['notification'],
+          inputs: ['notification', 'showElapsedTime'],
         }),
         MockComponent({
           selector: 'infinite-scroll',

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

-import { Component, Input, ElementRef, ViewChild } from '@angular/core';
+import {
+  Component,
+  Input,
+  ElementRef,
+  ViewChild,
+  OnInit,
+  OnDestroy,
+} from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { Subscription } from 'rxjs';
@@ -13,7 +20,7 @@ import { InfiniteScroll } from '../../common/components/infinite-scroll/infinite
   selector: 'minds-notifications',
   templateUrl: 'notifications.component.html',
 })
-export class NotificationsComponent {
+export class NotificationsComponent implements OnInit, OnDestroy {
   @Input() visible: boolean = true;
   @Input() params: any;
   @Input() count: number;
@@ -22,6 +29,8 @@ export class NotificationsComponent {
   @Input() showTabs: boolean = true;
   @Input() showShadows: boolean = true;
   @Input() showInfiniteScroll: boolean = true;
+  @Input() showElapsedTime: boolean = false;
+  @Input() limit: number = 12;
   @ViewChild('notificationGrid', { static: true }) notificationList: ElementRef;
   notifications: Array<Object> = [];
   entity;
@@ -94,7 +103,7 @@ export class NotificationsComponent {
 
     this.client
       .get(`api/v1/notifications/${this._filter}`, {
-        limit: 12,
+        limit: this.limit,
         offset: this.offset,
       })
       .then((data: any) => {