From 360784c1bb1104834011565a84d75e5d9360ea93 Mon Sep 17 00:00:00 2001
From: Andrea Chiapparelli - 4Science <andrea.chiapparelli@gmail.com>
Date: Fri, 9 Mar 2018 12:53:04 +0100
Subject: [PATCH] flex

---
 .../models/notification.model.ts              |  12 +-
 .../notification/notification.component.html  | 151 +++++++++++++-----
 .../notification/notification.component.scss  |  13 +-
 .../notification/notification.component.ts    |   8 +-
 4 files changed, 130 insertions(+), 54 deletions(-)

diff --git a/src/app/shared/notifications/models/notification.model.ts b/src/app/shared/notifications/models/notification.model.ts
index cafd5513ae..938bd3c5a9 100644
--- a/src/app/shared/notifications/models/notification.model.ts
+++ b/src/app/shared/notifications/models/notification.model.ts
@@ -6,8 +6,8 @@ import { Observable } from 'rxjs/Observable';
 export interface INotification {
   id: string;
   type: NotificationType;
-  title?: Observable<string>;
-  content?: Observable<string>;
+  title?: Observable<string> | string;
+  content?: Observable<string> | string;
   options?: INotificationOptions;
   html?: any;
 }
@@ -15,15 +15,15 @@ export interface INotification {
 export class Notification implements INotification {
   public id: string;
   public type: NotificationType;
-  public title: Observable<string>;
-  public content: Observable<string>;
+  public title: Observable<string>  | string;
+  public content: Observable<string>  | string;
   public options: INotificationOptions;
   public html: any;
 
   constructor(id: string,
               type: NotificationType,
-              title?: Observable<string>,
-              content?: Observable<string>,
+              title?: Observable<string>  | string,
+              content?: Observable<string>  | string,
               options?: NotificationOptions,
               html?: any) {
 
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index bb57714db8..d0fa5e0e87 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,55 +1,118 @@
 <div class="alert {{item.type}} alert-dismissible" role="alert"
      [@enterLeave]="animate">
 
-  <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>
-
-  <button *ngIf="item.options.clickToClose"
-          (click)="remove()"
-          type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">
-    <span aria-hidden="true">&times;</span>
-  </button>
-
-  <div *ngIf="!item.html">
-
-    <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
-      <ng-container *ngTemplateOutlet="title"></ng-container>
-    </div>
-
-    <ng-template #regularTitle>
-      <div class="sn-title" [innerHTML]="(title | async)"></div>
-    </ng-template>
-
-    <div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </div>
-
-    <ng-template #regularContent>
-      <div class="sn-content" [innerHTML]="(content | async)"></div>
-    </ng-template>
-
-  </div>
-
-  <div *ngIf="item.html">
-    <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
-      <ng-container *ngTemplateOutlet="html"></ng-container>
-    </div>
-
-    <ng-template #regularHtml>
-      <div class="sn-content" [innerHTML]="html"></div>
-    </ng-template>
-  </div>
-
   <div class="sn-progress-loader" *ngIf="showProgressBar">
     <span [ngStyle]="{'width': progressWidth + '%'}"></span>
   </div>
 
 
+    <button *ngIf="item.options.clickToClose"
+            (click)="remove()"
+            type="button" class="notificationClose close" 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>
+    <div class="d-flex flex-column justify-content-center align-content-stretch">
+      <div class="p-2"  *ngIf="title">
+        <strong>
+          <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
+            <ng-container *ngTemplateOutlet="title"></ng-container>
+          </div>
+          <ng-template #regularTitle>
+            <div class="sn-title" [innerHTML]="(title | async)"></div>
+          </ng-template>
+        </strong>
+      </div>
+
+      <div class="p-2"  *ngIf="content">
+        <div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </div>
+        <ng-template #regularContent>
+          <div class="sn-content" [innerHTML]="(content | async)"></div>
+        </ng-template>
+      </div>
+
+      <div class="p-2" *ngIf="item.html">
+        <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
+          <ng-container *ngTemplateOutlet="html"></ng-container>
+        </div>
+        <ng-template #regularHtml>
+          <div class="sn-content" [innerHTML]="html"></div>
+        </ng-template>
+      </div>
+    </div>
+  </div>
+
+
+
+
+
+
+
+
+  <!--<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>-->
+
+  <!--<button *ngIf="item.options.clickToClose"-->
+          <!--(click)="remove()"-->
+          <!--type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">-->
+    <!--<span aria-hidden="true">&times;</span>-->
+  <!--</button>-->
+
+  <!--<div *ngIf="!item.html">-->
+
+    <!--<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">-->
+      <!--<ng-container *ngTemplateOutlet="title"></ng-container>-->
+    <!--</div>-->
+
+    <!--<ng-template #regularTitle>-->
+      <!--<div class="sn-title" [innerHTML]="(title | async)"></div>-->
+    <!--</ng-template>-->
+
+    <!--<div class="sn-content" *ngIf="contentIsTemplate; else regularContent">-->
+      <!--<ng-container *ngTemplateOutlet="content"></ng-container>-->
+    <!--</div>-->
+
+    <!--<ng-template #regularContent>-->
+      <!--<div class="sn-content" [innerHTML]="(content | async)"></div>-->
+    <!--</ng-template>-->
+
+  <!--</div>-->
+
+  <!--<div *ngIf="item.html">-->
+    <!--<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">-->
+      <!--<ng-container *ngTemplateOutlet="html"></ng-container>-->
+    <!--</div>-->
+
+    <!--<ng-template #regularHtml>-->
+      <!--<div class="sn-content" [innerHTML]="html"></div>-->
+    <!--</ng-template>-->
+  <!--</div>-->
+
+  <!--<div class="sn-progress-loader" *ngIf="showProgressBar">-->
+    <!--<span [ngStyle]="{'width': progressWidth + '%'}"></span>-->
+  <!--</div>-->
+
+
 
 
 </div>
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index 8c4933d3e6..318153add8 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,10 +1,19 @@
+.alert-dismissible .close {
+  top: -13px;
+  right: -15px;
+}
+
 .notificationClose:focus {
   outline: none !important;
 }
 
 .icon {
-  float: left;
-  padding: 5px;
+  //float: left;
+  //padding: 5px;
+}
+
+.alert-dismissible {
+  padding: 10px;
 }
 
 .sn-title, .sn-content, .sn-html {
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index cd0bba30c2..04fadf4941 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -127,8 +127,12 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private contentType(item: any, key: string) {
     if (item instanceof TemplateRef) {
       this[key] = item;
-    } else if (key === 'title' || key === 'content' ) {
-      this[key] = isNotEmpty(item) ? item : Observable.of('');
+    } else if (key === 'title' || key === 'content') {
+      this[key] = isNotEmpty(item) ?
+        typeof item === 'string' ?
+          Observable.of(item)
+          : typeof item === 'object' && isNotEmpty(item.payload) ? Observable.of(item.payload) : null
+        : null;
     } else {
       this[key] = this.domSanitizer.bypassSecurityTrustHtml(item);
     }