Merge pull request #14672 from ArtemDzhereleiko/AD/enh/alarm-color-css-var

Enhancement for alarm severity colors

ui-ngx/src/app/core/services/utils.service.ts

@@ -454,11 +454,11 @@ export class UtilsService {
     return base64toObj(b64Encoded);
   }
 
-  public applyCssToElement(renderer: Renderer2, element: any, cssClassPrefix: string, css: string): string {
+  public applyCssToElement(renderer: Renderer2, element: any, cssClassPrefix: string, css: string, addTbDefaultClass: boolean = false): string {
     const cssParser = new cssjs();
     cssParser.testMode = false;
     const cssClass = `${cssClassPrefix}-${guid()}`;
-    cssParser.cssPreviewNamespace = cssClass;
+    cssParser.cssPreviewNamespace = addTbDefaultClass ? 'tb-default .' + cssClass : cssClass;
     cssParser.createStyleElement(cssClass, css);
     renderer.addClass(element, cssClass);
     return cssClass;

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -548,6 +548,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       const cssParser = new cssjs();
       cssParser.testMode = false;
       this.dashboardPageClass  = 'tb-dashboard-page-css-' + guid();
+      this.dashboardCtx.dashboardCssClass = this.dashboardPageClass;
       cssParser.cssPreviewNamespace = 'tb-default .' + this.dashboardPageClass;
       cssParser.createStyleElement(this.dashboardPageClass, cssString);
     }

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts

@@ -51,6 +51,7 @@ export interface DashboardContext {
   stateChanged: Observable<string>;
   stateId: Observable<string>;
   runChangeDetection: () => void;
+  dashboardCssClass?: string;
 }
 
 export interface IDashboardController {

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts

@@ -968,7 +968,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       (AlarmDetailsDialogComponent,
         {
           disableClose: true,
-          panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+          panelClass: ['tb-dialog', 'tb-fullscreen-dialog', this.ctx.stateController.dashboardCtrl.dashboardCtx.dashboardCssClass, this.ctx.widgetCssClass],
           data: {
             alarmId: alarm.id.id,
             allowAcknowledgment: this.allowAcknowledgment,

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

@@ -151,8 +151,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
     this.widget.widgetContext.containerChangeDetector = this.cd;
     const cssString = this.widget.widget.config.widgetCss;
     if (isNotEmptyStr(cssString)) {
-      this.cssClass =
-        this.utils.applyCssToElement(this.renderer, this.gridsterItem.el, 'tb-widget-css', cssString);
+      this.cssClass = this.utils.applyCssToElement(this.renderer, this.gridsterItem.el, 'tb-widget-css', cssString, true);
+      this.widget.widgetContext.widgetCssClass = this.cssClass;
     }
     $(this.gridsterItem.el).on('mousedown', (e) => this.onMouseDown(e.originalEvent));
     $(this.gridsterItem.el).on('click', (e) => this.onClicked(e.originalEvent));

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

@@ -308,6 +308,8 @@ export class WidgetContext {
   widgetNamespace?: string;
   subscriptionApi?: WidgetSubscriptionApi;
 
+  widgetCssClass?: string;
+
   actionsApi?: WidgetActionsApi;
   activeEntityInfo?: SubscriptionEntityInfo;
 

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

@@ -42,7 +42,7 @@
       <mat-icon>check_circle_outline</mat-icon>
     </button>
     <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM && !notification.info.cleared"
-         [style.background-color]="alarmColorSeverity(0.06)">
+         [style.background-color]="alarmColorSeverityBackground()">
       <span [style]="notificationIconColor()" class="severity">
         {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
       </span>

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

@@ -24,7 +24,11 @@ import {
 } from '@shared/models/notification.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
-import { alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models';
+import {
+  alarmSeverityBackgroundColors,
+  alarmSeverityColors,
+  alarmSeverityTranslations
+} from '@shared/models/alarm.models';
 import tinycolor from 'tinycolor2';
 import { StateObject } from '@core/api/widget-api.models';
 import { objToBase64URI } from '@core/utils';
@@ -133,8 +137,8 @@ export class NotificationComponent implements OnInit {
     }
   }
 
-  alarmColorSeverity(alpha: number) {
-    return tinycolor(alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
+  alarmColorSeverityBackground() {
+    return alarmSeverityBackgroundColors.get(this.notification.info.alarmSeverity);
   }
 
   notificationColor(): string {

ui-ngx/src/app/shared/models/alarm.models.ts

@@ -88,11 +88,21 @@ export const alarmSearchStatusTranslations = new Map<AlarmSearchStatus, string>(
 
 export const alarmSeverityColors = new Map<AlarmSeverity, string>(
   [
-    [AlarmSeverity.CRITICAL, '#D12730'],
-    [AlarmSeverity.MAJOR, '#FEAC0C'],
-    [AlarmSeverity.MINOR, '#F2DA05'],
-    [AlarmSeverity.WARNING, '#F66716'],
-    [AlarmSeverity.INDETERMINATE, '#00000061']
+    [AlarmSeverity.CRITICAL, 'var(--tb-alarm-severity-critical, rgb(209, 39, 48))'],
+    [AlarmSeverity.MAJOR, 'var(--tb-alarm-severity-major, rgb(246, 103, 22))'],
+    [AlarmSeverity.MINOR, 'var(--tb-alarm-severity-minor, rgb(250, 164, 5))'],
+    [AlarmSeverity.WARNING, 'var(--tb-alarm-severity-warning, rgb(242, 218, 5))'],
+    [AlarmSeverity.INDETERMINATE, 'var(--tb-alarm-severity-indeterminate, rgba(0, 0, 0, 0.38))']
+  ]
+);
+
+export const alarmSeverityBackgroundColors = new Map<AlarmSeverity, string>(
+  [
+    [AlarmSeverity.CRITICAL, `var(--tb-alarm-severity-critical-bg, rgba(209, 39, 48, 0.06))`],
+    [AlarmSeverity.MAJOR, 'var(--tb-alarm-severity-major-bg, rgba(246, 103, 22, 0.06))'],
+    [AlarmSeverity.MINOR, 'var(--tb-alarm-severity-minor-bg, rgba(250, 164, 5, 0.06))'],
+    [AlarmSeverity.WARNING, 'var(--tb-alarm-severity-warning-bg, rgba(242, 218, 5, 0.06))'],
+    [AlarmSeverity.INDETERMINATE, 'var(--tb-alarm-severity-indeterminate-bg, rgba(0, 0, 0, 0.06))']
   ]
 );