diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html index abd8682b56..060af50b18 100644 --- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html +++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html @@ -35,7 +35,7 @@ -
+
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html index 5720c5ce04..f1ef65d56c 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.html +++ b/ui-ngx/src/app/shared/components/notification/notification.component.html @@ -44,8 +44,8 @@
- + [ngStyle]="{backgroundColor: alarmColorSeverity(0.06)}"> + {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss index 5a660b0df5..64841e837b 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.scss +++ b/ui-ngx/src/app/shared/components/notification/notification.component.scss @@ -63,6 +63,11 @@ .alarm-severity { padding: 5px; border-radius: 8px; + + .severity { + font-weight: 500; + letter-spacing: 0.25px; + } } } } diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.ts b/ui-ngx/src/app/shared/components/notification/notification.component.ts index 0eb7c74513..2ac8f2f9dd 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.ts +++ b/ui-ngx/src/app/shared/components/notification/notification.component.ts @@ -15,11 +15,16 @@ /// import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { Notification, NotificationType, NotificationTypeIcons } from '@shared/models/notification.models'; +import { + AlarmSeverityNotificationColors, + Notification, + NotificationType, + 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 { alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models'; +import { alarmSeverityTranslations } from '@shared/models/alarm.models'; import * as tinycolor_ from 'tinycolor2'; @Component({ @@ -86,8 +91,12 @@ export class NotificationComponent implements OnInit { $event.stopPropagation(); } if (!this.preview) { - this.router.navigateByUrl(this.router.parseUrl(this.notification.additionalConfig.actionButtonConfig.link)).then(() => { - }); + if (this.notification.additionalConfig.actionButtonConfig.link.startsWith('/')) { + this.router.navigateByUrl(this.router.parseUrl(this.notification.additionalConfig.actionButtonConfig.link)).then(() => { + }); + } else { + window.open(this.notification.additionalConfig.actionButtonConfig.link, '_blank'); + } if (this.onClose) { this.onClose(); } @@ -95,19 +104,19 @@ export class NotificationComponent implements OnInit { } alarmColorSeverity(alpha: number) { - return this.tinycolor(alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString(); + return this.tinycolor(AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString(); } notificationColor(): string { - if (this.notification.type === this.notificationType.ALARM) { - return alarmSeverityColors.get(this.notification.info.alarmSeverity); + if (this.notification.type === NotificationType.ALARM) { + return AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity); } return 'transparent'; } notificationIconColor(): object { - if (this.notification.type === this.notificationType.ALARM) { - return {color: alarmSeverityColors.get(this.notification.info.alarmSeverity)}; + if (this.notification.type === NotificationType.ALARM) { + return {color: AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)}; } return null; } diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts index 86d1115584..cf907dfe70 100644 --- a/ui-ngx/src/app/shared/models/notification.models.ts +++ b/ui-ngx/src/app/shared/models/notification.models.ts @@ -284,14 +284,6 @@ export enum NotificationType { ALARM_COMMENT = 'ALARM_COMMENT' } -export const NotificationTypeColors = new Map([ - [NotificationType.GENERAL, 'transparent'], - [NotificationType.ALARM, '#D12730'], - [NotificationType.DEVICE_INACTIVITY, '#305680'], - [NotificationType.ENTITY_ACTION, '#305680'], - [NotificationType.ALARM_COMMENT, '#D12730'] -]); - export const NotificationTypeIcons = new Map([ [NotificationType.ALARM, 'warning'], [NotificationType.DEVICE_INACTIVITY, 'phonelink_off'], @@ -299,6 +291,16 @@ export const NotificationTypeIcons = new Map([ [NotificationType.ALARM_COMMENT, 'warning'] ]); +export const AlarmSeverityNotificationColors = new Map( + [ + [AlarmSeverity.CRITICAL, '#D12730'], + [AlarmSeverity.MAJOR, '#FEAC0C'], + [AlarmSeverity.MINOR, '#F2DA05'], + [AlarmSeverity.WARNING, '#F66716'], + [AlarmSeverity.INDETERMINATE, '#00000061'] + ] +); + interface NotificationTemplateTypeTranslate { name: string; hint?: string;