UI: Improvement notification web view

ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts

@@ -78,7 +78,7 @@ export class NotificationBellComponent implements OnInit {
             showNotificationPopover.hide();
           }
         },
-        {maxHeight: '100vh', height: '100%', padding: '10px'},
+        {maxHeight: '90vh', height: '100%', padding: '10px'},
         {width: '400px', minWidth: '100%', maxWidth: '100%'},
         {height: '100%', flexDirection: 'column', boxSizing: 'border-box', display: 'flex'}, false);
       showNotificationPopover.tbComponentRef.instance.popoverComponent = showNotificationPopover;

ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html

@@ -29,14 +29,13 @@
    <div *ngFor="let notification of (notifications$ | async); let last = last">
      <tb-notification [notification]="notification"
                       [onClose]="onClose"
-                      [preview]="true"
                       (markAsRead)="markAsRead($event)">
      </tb-notification>
      <mat-divider *ngIf="!last" style="margin-bottom: 4px"></mat-divider>
    </div>
   </section>
   <mat-divider></mat-divider>
-  <section fxLayoutAlign="center center">
+  <section fxLayoutAlign="center center" style="margin-bottom: 12px">
     <button fxFlex mat-button color="primary" (click)="viewAll($event)">
       {{ 'notification.view-all' | translate }}
     </button>

ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html

@@ -43,15 +43,15 @@
             {{ 'notification.target-name-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <label class="tb-title no-padding" style="margin-bottom: 8px">{{ 'notification.type' | translate }}</label>
+        <mat-form-field fxFlex class="mat-block">
-        <mat-radio-group formControlName="notificationType" fxLayout="column">
+          <mat-label translate>notification.type</mat-label>
-          <mat-radio-button *ngFor="let notificationType of notificationTypes" [value]="notificationType" fxFlex>
+          <mat-select formControlName="notificationType">
-            <div fxLayout="column">
+            <mat-option *ngFor="let notificationType of notificationTypes" [value]="notificationType">
-              <div>{{ notificationTemplateTypeTranslateMap.get(notificationType).name | translate }}</div>
+              {{ notificationTemplateTypeTranslateMap.get(notificationType).name | translate }}
-              <div class="tb-hint">{{ notificationTemplateTypeTranslateMap.get(notificationType).hint | translate }}</div>
+            </mat-option>
-            </div>
+          </mat-select>
-          </mat-radio-button>
+          <mat-hint>{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}</mat-hint>
-        </mat-radio-group>
+        </mat-form-field>
         <section formGroupName="configuration">
           <mat-form-field class="mat-block">
             <mat-label translate>notification.subject</mat-label>

ui-ngx/src/app/shared/components/notification/notification.component.html

@@ -23,7 +23,7 @@
     </mat-icon>
   </div>
   <ng-template #defaultIcon>
-    <mat-icon class="icon" [fxShow]="notificationTypeIcons.get(notification.type)" [ngStyle]="{color: notificationColor()}">
+    <mat-icon class="icon" *ngIf="notificationTypeIcons.get(notification.type)" [ngStyle]="notificationIconColor()">
       {{ notificationTypeIcons.get(notification.type) }}
     </mat-icon>
   </ng-template>
@@ -37,14 +37,15 @@
     </button>
   </div>
   <div class="description" fxLayout="column" fxLayoutAlign="start end">
-    <button mat-icon-button class="tb-mat-28 mark-read" (click)="markRead($event)">
+    <div fxLayout="row" fxLayoutAlign="end center" class="mark-read">
-      <mat-icon>check_circle_outline</mat-icon>
+      <span class="time" *ngIf="!preview">{{ notification.createdTime | dateAgo }}</span>
-    </button>
+      <button mat-icon-button class="tb-mat-28" (click)="markRead($event)">
-    <span class="time" *ngIf="preview">{{ notification.createdTime | dateAgo }}</span>
+        <mat-icon>check_circle_outline</mat-icon>
-    <div class="alarm-severity-border" *ngIf="notification.type === notificationType.ALARM"
+      </button>
+    </div>
+    <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM"
          [ngStyle]="{backgroundColor: alarmColorSeverity(0.08)}">
-      <span class="alarm-severity-text"
+      <span [ngStyle]="{color: alarmColorSeverity(0.78)}">
-            [ngStyle]="{color: alarmColorSeverity(0.78)}">
         {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
       </span>
     </div>

ui-ngx/src/app/shared/components/notification/notification.component.scss

@@ -19,12 +19,7 @@
     padding: 10px;
     display: block;
     border: 1px solid;
-    border-radius: 8px;
+    border-radius: 4px;
-  }
-
-  .alarm-severity-border {
-    padding: 5px;
-    border-radius: 8px;
   }
 
   .icon {
@@ -45,7 +40,7 @@
     }
 
     .button {
-      margin-top: 8px;
+      margin-top: 12px;
       border-color: initial;
     }
   }
@@ -62,7 +57,12 @@
     .time {
       font-size: 12px;
       letter-spacing: 0.25px;
-      margin: 2px 2px 5px;
+      margin: 0 4px;
+    }
+
+    .alarm-severity {
+      padding: 5px;
+      border-radius: 8px;
     }
   }
 }

ui-ngx/src/app/shared/components/notification/notification.component.ts

@@ -15,16 +15,11 @@
 ///
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import {
+import { Notification, NotificationType, NotificationTypeIcons } from '@shared/models/notification.models';
-  Notification,
-  NotificationType,
-  NotificationTypeColors,
-  NotificationTypeIcons
-} from '@shared/models/notification.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { AlarmSeverity, alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models';
+import { alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models';
 import * as tinycolor_ from 'tinycolor2';
 
 @Component({
@@ -59,10 +54,7 @@ export class NotificationComponent implements OnInit {
   tinycolor = tinycolor_;
 
   notificationType = NotificationType;
-  notificationTypeColors = NotificationTypeColors;
   notificationTypeIcons = NotificationTypeIcons;
-  alarmSeverity = AlarmSeverity;
-  alarmSeverityColors = alarmSeverityColors;
   alarmSeverityTranslations = alarmSeverityTranslations;
 
   constructor(
@@ -103,14 +95,20 @@ export class NotificationComponent implements OnInit {
   }
 
   alarmColorSeverity(alpha: number) {
-    return this.tinycolor(this.alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
+    return this.tinycolor(alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
   }
 
-  notificationColor() {
+  notificationColor(): string {
     if (this.notification.type === this.notificationType.ALARM) {
-      return this.alarmSeverityColors.get(this.notification.info.alarmSeverity);
+      return alarmSeverityColors.get(this.notification.info.alarmSeverity);
-    } else {
-      return this.notificationTypeColors.get(this.notification.type);
     }
+    return 'transparent';
+  }
+
+  notificationIconColor(): object {
+    if (this.notification.type === this.notificationType.ALARM) {
+      return {color: alarmSeverityColors.get(this.notification.info.alarmSeverity)};
+    }
+    return null;
   }
 }