Merge pull request #10139 from ArtemDzhereleiko/AD/imp/update-toast-notification

Update toast notification

ui-ngx/src/app/core/notification/notification.models.ts

@@ -33,6 +33,7 @@ export class NotificationMessage {
   horizontalPosition?: NotificationHorizontalPosition;
   verticalPosition?: NotificationVerticalPosition;
   panelClass?: string | string[];
+  modern?: boolean;
 }
 
 export class HideNotification {

ui-ngx/src/app/modules/home/models/widget-component.models.ts

@@ -349,35 +349,35 @@ export class WidgetContext {
   showSuccessToast(message: string, duration: number = 1000,
                    verticalPosition: NotificationVerticalPosition = 'bottom',
                    horizontalPosition: NotificationHorizontalPosition = 'left',
-                   target: string = 'dashboardRoot') {
+                   target: string = 'dashboardRoot', modern = false) {
-    this.showToast('success', message, duration, verticalPosition, horizontalPosition, target);
+    this.showToast('success', message, duration, verticalPosition, horizontalPosition, target, modern);
   }
 
   showInfoToast(message: string,
                 verticalPosition: NotificationVerticalPosition = 'bottom',
                 horizontalPosition: NotificationHorizontalPosition = 'left',
-                target: string = 'dashboardRoot') {
+                target: string = 'dashboardRoot', modern = false) {
-    this.showToast('info', message, undefined, verticalPosition, horizontalPosition, target);
+    this.showToast('info', message, undefined, verticalPosition, horizontalPosition, target, modern);
   }
 
   showWarnToast(message: string,
                 verticalPosition: NotificationVerticalPosition = 'bottom',
                 horizontalPosition: NotificationHorizontalPosition = 'left',
-                target: string = 'dashboardRoot') {
+                target: string = 'dashboardRoot', modern = false) {
-    this.showToast('warn', message, undefined, verticalPosition, horizontalPosition, target);
+    this.showToast('warn', message, undefined, verticalPosition, horizontalPosition, target, modern);
   }
 
   showErrorToast(message: string,
                  verticalPosition: NotificationVerticalPosition = 'bottom',
                  horizontalPosition: NotificationHorizontalPosition = 'left',
-                 target: string = 'dashboardRoot') {
+                 target: string = 'dashboardRoot', modern = false) {
-    this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target);
+    this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target, modern);
   }
 
   showToast(type: NotificationType, message: string, duration: number,
             verticalPosition: NotificationVerticalPosition = 'bottom',
             horizontalPosition: NotificationHorizontalPosition = 'left',
-            target: string = 'dashboardRoot') {
+            target: string = 'dashboardRoot', modern = false) {
     this.store.dispatch(new ActionNotificationShow(
       {
         message,
@@ -387,7 +387,8 @@ export class WidgetContext {
         horizontalPosition,
         target,
         panelClass: this.widgetNamespace,
-        forceDismiss: true
+        forceDismiss: true,
+        modern
       }));
   }
 

ui-ngx/src/app/shared/components/snack-bar-component.html

@@ -15,15 +15,30 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" class="tb-toast"
+<div fxLayout="row" fxLayoutAlign="start center"
      [@showHideAnimation]="{value: animationState, params: animationParams}"
      (@showHideAnimation.done)="onHideFinished($event)"
      [ngClass]="{
-          'error-toast': notification.type === 'error',
+        'tb-toast': !notification.modern,
-          'warn-toast': notification.type === 'warn',
+        'tb-modern-toast': notification.modern,
-          'success-toast': notification.type === 'success',
+        'error-toast': notification.type === 'error',
-          'info-toast': notification.type === 'info'
+        'warn-toast': notification.type === 'warn',
+        'success-toast': notification.type === 'success',
+        'info-toast': notification.type === 'info'
      }">
-  <div class="toast-text" [innerHTML]="notification.message"></div>
+  <ng-container *ngIf="!notification.modern; else modern">
-  <button #actionButton type="button" mat-button (click)="action($event)">{{ 'action.close' | translate }}</button>
+    <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
+    <button #actionButton type="button" mat-button (click)="action($event)">{{ 'action.close' | translate }}</button>
+  </ng-container>
+  <ng-template #modern>
+    <div class="tb-modern-toast-panel" [ngClass]="{
+        'error-toast': notification.type === 'error',
+        'warn-toast': notification.type === 'warn',
+        'success-toast': notification.type === 'success',
+        'info-toast': notification.type === 'info'
+     }">
+      <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
+      <button #actionButton class="tb-mat-20" mat-icon-button (click)="action($event)"><mat-icon>close</mat-icon></button>
+    </div>
+  </ng-template>
 </div>

ui-ngx/src/app/shared/components/snack-bar-component.scss

@@ -71,4 +71,42 @@
       background: #008000;
     }
   }
+
+  .tb-modern-toast {
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    &-panel {
+      display: flex;
+      padding: 4px 4px 4px 12px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 4px;
+      box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.2);
+      &.info-toast {
+        background: #e6e6e6;
+        color: rgba(50, 50, 50, 1);
+      }
+      &.warn-toast {
+        background: #fff3eb;
+        color: rgba(220, 109, 27, 1);
+
+      }
+      &.error-toast {
+        background-color: #fff2f3;
+        color: rgba(209, 39, 48, 1);
+      }
+      &.success-toast {
+        background: #ebfcec;
+        color: rgba(0, 128, 0, 1);
+      }
+    }
+    .toast-text {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+    }
+  }
 }

ui-ngx/src/app/shared/components/toast.directive.ts

@@ -280,7 +280,7 @@ export type ToastAnimationState = 'default' | 'opened' | 'closing';
 })
 export class TbSnackBarComponent implements AfterViewInit, OnDestroy {
 
-  @ViewChild('actionButton', {static: true}) actionButton: MatButton;
+  @ViewChild('actionButton') actionButton: MatButton;
 
   @HostBinding('class')
   get panelClass(): string[] {