Adjusted CSS and added default notification options in the environment config files

config/environment.default.js

@@ -25,7 +25,12 @@ module.exports = {
   notifications: {
     rtl: false,
     position: ['top', 'right'],
-    maxStack: 8
+    maxStack: 8,
+    // NOTE: after how many seconds notification is closed automatically. If set to zero notifications are not closed automatically
+    timeOut: 5000, // 5 second
+    clickToClose: true,
+    // NOTE: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale'
+    animate: 'scale'
   },
   // Angular Universal settings
   universal: {

src/app/app.module.ts

@@ -28,7 +28,6 @@ import { HeaderComponent } from './header/header.component';
 import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 
 import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
-import { NotificationsService } from './shared/notifications/notifications.service';
 import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
 import { NotificationComponent } from './shared/notifications/notification/notification.component';
 

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

@@ -1,57 +1,54 @@
-<div class="alert {{item.type}} alert-dismissible" role="alert"
+<div class="alert {{item.type}} alert-dismissible p-3" role="alert"
      [@enterLeave]="animate">
 
-  <div class="sn-progress-loader" *ngIf="showProgressBar">
-    <span [ngStyle]="{'width': progressWidth + '%'}"></span>
+  <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
+    <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-left"></span>
   </div>
 
-
     <button *ngIf="item.options.clickToClose"
             (click)="remove()"
-            type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">
+            type="button" class="close pt-0 pr-1 pl-0 pb-0" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
 
 
   <div class="d-flex flex-row">
-    <div class="d-flex flex-column justify-content-center">
-      <div class="p-2">
-        <div class="icon"><i
-          [ngClass]="{'fa fa-2x': true,
-        'fa-check': item.type == 'alert-success',
-        'fa-times-circle': item.type == 'alert-danger',
-        'fa-exclamation-triangle': item.type == 'alert-warning',
-        'fa-info': item.type == 'alert-info'
-        }"></i></div>
-      </div>
+    <div class="d-flex flex-column justify-content-center align-items-center">
+      <div class="notification-icon d-flex justify-content-center"><i
+        [ngClass]="{'fa fa-2x': true,
+      'fa-check': item.type == 'alert-success',
+      'fa-times-circle': item.type == 'alert-danger',
+      'fa-exclamation-triangle': item.type == 'alert-warning',
+      'fa-info': item.type == 'alert-info'
+      }"></i></div>
     </div>
     <div class="d-flex flex-column justify-content-center align-content-stretch">
       <div class="p-2 mr-3"  *ngIf="title">
         <strong>
-          <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
+          <div class="pl-1" *ngIf="titleIsTemplate; else regularTitle">
             <ng-container *ngTemplateOutlet="title"></ng-container>
           </div>
           <ng-template #regularTitle>
-            <div class="sn-title" [innerHTML]="(title | async)"></div>
+            <div class="pl-1" [innerHTML]="(title | async)"></div>
           </ng-template>
         </strong>
       </div>
 
       <div class="p-2 mr-3"  *ngIf="content">
-        <div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
+        <div class="pl-1" *ngIf="contentIsTemplate; else regularContent">
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </div>
         <ng-template #regularContent>
-          <div class="sn-content" [innerHTML]="(content | async)"></div>
+          <div class="pl-1" [innerHTML]="(content | async)"></div>
         </ng-template>
       </div>
 
       <div class="p-2 mr-3" *ngIf="item.html">
-        <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
+        <div class="pl-1" *ngIf="htmlIsTemplate; else regularHtml">
           <ng-container *ngTemplateOutlet="html"></ng-container>
         </div>
         <ng-template #regularHtml>
-          <div class="sn-content" [innerHTML]="html"></div>
+          <div class="pl-1" [innerHTML]="html"></div>
         </ng-template>
       </div>
     </div>

src/app/shared/notifications/notification/notification.component.scss

@@ -1,40 +1,28 @@
-.alert-dismissible .close {
-  top: -13px;
-  right: -15px;
+@import '../../../../styles/variables.scss';
+
+.close {
+  outline: none !important
 }
 
-.notificationClose:focus {
-  outline: none !important;
+.notification-icon {
+  min-width: 3rem;
 }
 
-.icon {
-  //float: left;
-  //padding: 5px;
-}
-
-.alert-dismissible {
-  padding: 10px;
-}
-
-.sn-title, .sn-content, .sn-html {
-  position: relative;
-  left: 20px;
-}
-
-.sn-progress-loader {
-  position: absolute;
-  top: 0;
-  left: 1px;
-  width: 99%;
+.notification-progress-loader {
+  top: -1px;
+  left: 0;
   height: 1px;
 }
 
-.sn-progress-loader span {
-  float: left;
-  height: 100%;
+.alert-success .notification-progress-loader span {
+  background: darken(adjust-hue(map-get($theme-colors, success), -10), 10%);
+}
+.alert-danger .notification-progress-loader span {
+  background: darken(adjust-hue(map-get($theme-colors, danger), -10), 10%);
+}
+.alert-info .notification-progress-loader span {
+  background: darken(adjust-hue(map-get($theme-colors, info), -10), 10%);
+}
+.alert-warning .notification-progress-loader span {
+  background: darken(adjust-hue(map-get($theme-colors, warning), -10), 10%);
 }
-
-.alert-success .sn-progress-loader span { background: #CBC1AD;  }
-.alert-danger .sn-progress-loader span { background: #D5BABA; }
-.alert-info .sn-progress-loader span { background: #B4C9CF; }
-.alert-warning .sn-progress-loader span { background: #DBD1BD; }

src/app/shared/notifications/notifications-board/notifications-board.component.html

@@ -1,4 +1,4 @@
-<div class="simple-notification-wrapper" [ngClass]="position">
+<div class="notifications-wrapper position-fixed" [ngClass]="position">
   <ds-notification
     *ngFor="let a of notifications; let i = index"
     [item]="a">

src/app/shared/notifications/notifications-board/notifications-board.component.scss

@@ -1,41 +1,43 @@
-.simple-notification-wrapper {
-  position: fixed;
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
+
+.notifications-wrapper {
   width: 300px;
   z-index: 1051;
 }
 
-.simple-notification-wrapper.left {
+.notifications-wrapper.left {
   left: 20px;
 }
 
-.simple-notification-wrapper.top {
+.notifications-wrapper.top {
   top: 20px;
 }
 
-.simple-notification-wrapper.right {
+.notifications-wrapper.right {
   right: 20px;
 }
 
-.simple-notification-wrapper.bottom {
+.notifications-wrapper.bottom {
   bottom: 20px;
 }
 
-.simple-notification-wrapper.center {
+.notifications-wrapper.center {
   left: 50%;
   transform: translateX(-50%);
 }
 
-.simple-notification-wrapper.middle {
+.notifications-wrapper.middle {
   top: 50%;
   transform: translateY(-50%);
 }
 
-.simple-notification-wrapper.middle.center {
+.notifications-wrapper.middle.center {
   transform: translate(-50%, -50%);
 }
 
-@media (max-width: 340px) {
-  .simple-notification-wrapper {
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
+  .notifications-wrapper {
     width: auto;
     left: 20px;
     right: 20px;

src/app/shared/notifications/notifications-board/notifications-board.component.ts

@@ -7,14 +7,16 @@ import {
   OnInit,
   ViewEncapsulation
 } from '@angular/core';
-import { NotificationsService } from '../notifications.service';
+
 import { Store } from '@ngrx/store';
+import { Subscription } from 'rxjs/Subscription';
+import { difference } from 'lodash';
+
+import { NotificationsService } from '../notifications.service';
 import { AppState } from '../../../app.reducer';
 import { notificationsStateSelector } from '../selectors';
-import { difference } from 'lodash';
 import { INotification } from '../models/notification.model';
 import { NotificationsState } from '../notifications.reducers';
-import { Subscription } from 'rxjs/Subscription';
 import { INotificationBoardOptions } from '../../../../config/notifications-config.interfaces';
 
 @Component({

src/app/shared/notifications/notifications.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { INotification, Notification } from './models/notification.model';
 import { NotificationType } from './models/notification-type';
 import { NotificationOptions } from './models/notification-options.model';
@@ -6,11 +6,13 @@ import { uniqueId } from 'lodash';
 import { Store } from '@ngrx/store';
 import { NewNotificationAction, RemoveAllNotificationsAction, RemoveNotificationAction } from './notifications.actions';
 import { Observable } from 'rxjs/Observable';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
 
 @Injectable()
 export class NotificationsService {
 
-  constructor(private store: Store<Notification>) {
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+              private store: Store<Notification>) {
   }
 
   private add(notification: Notification) {
@@ -21,7 +23,7 @@ export class NotificationsService {
 
   success(title: any = Observable.of(''),
           content: any = Observable.of(''),
-          options = new NotificationOptions(),
+          options: NotificationOptions = this.getDefaultOptions(),
           html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options, html);
     this.add(notification);
@@ -30,7 +32,7 @@ export class NotificationsService {
 
   error(title: any = Observable.of(''),
         content: any = Observable.of(''),
-        options = new NotificationOptions(),
+        options: NotificationOptions = this.getDefaultOptions(),
         html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options, html);
     this.add(notification);
@@ -39,7 +41,7 @@ export class NotificationsService {
 
   info(title: any = Observable.of(''),
        content: any = Observable.of(''),
-       options = new NotificationOptions(),
+       options: NotificationOptions = this.getDefaultOptions(),
        html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options, html);
     this.add(notification);
@@ -48,7 +50,7 @@ export class NotificationsService {
 
   warning(title: any = Observable.of(''),
           content: any = Observable.of(''),
-          options = new NotificationOptions(),
+          options: NotificationOptions = this.getDefaultOptions(),
           html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options, html);
     this.add(notification);
@@ -65,4 +67,11 @@ export class NotificationsService {
     this.store.dispatch(actionRemoveAll);
   }
 
+  private getDefaultOptions(): NotificationOptions {
+    return new NotificationOptions(
+      this.config.notifications.timeOut,
+      this.config.notifications.clickToClose,
+      this.config.notifications.animate
+    );
+  }
 }

src/config/notifications-config.interfaces.ts

@@ -1,7 +1,11 @@
 import { Config } from './config.interface';
+import { NotificationAnimationsType } from '../app/shared/notifications/models/notification-animations-type';
 
 export interface INotificationBoardOptions extends Config {
   rtl: boolean;
   position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
   maxStack: number;
+  timeOut: number;
+  clickToClose: boolean;
+  animate: NotificationAnimationsType;
 }