From da8962ac54b2cf70b6c2aa1bec36558a68c5e1b5 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 8 Mar 2023 15:16:07 +0200 Subject: [PATCH] UI: Change style notification system and improv notification ws --- .../notification-bell.component.ts | 11 ++++++- .../inbox-table-header.component.scss | 5 ++-- .../notification-table/inbox-table-config.ts | 2 +- .../request-table-config.ts | 8 ++--- ...request-notification-dialog.component.html | 18 ++++++------ ...request-notification-dialog.component.scss | 29 ++++++++++++------- .../target-notification-dialog.componet.scss | 2 +- ...emplate-notification-dialog.component.html | 2 +- ...emplate-notification-dialog.component.scss | 13 ++++++--- .../template-notification-dialog.component.ts | 9 ++---- .../notification/notification.component.html | 2 +- .../notification/notification.component.ts | 13 ++++----- 12 files changed, 65 insertions(+), 49 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts index 69055a76de..2283e14c31 100644 --- a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts +++ b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts @@ -30,6 +30,9 @@ import { MatButton } from '@angular/material/button'; import { TbPopoverService } from '@shared/components/popover.service'; import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component'; import { NotificationSubscriber } from '@shared/models/websocket/notification-ws.models'; +import { select, Store } from '@ngrx/store'; +import { selectIsAuthenticated } from '@core/auth/auth.selectors'; +import { AppState } from '@core/core.state'; @Component({ selector: 'tb-notification-bell', @@ -56,8 +59,14 @@ export class NotificationBellComponent implements OnDestroy { private cd: ChangeDetectorRef, private popoverService: TbPopoverService, private renderer: Renderer2, - private viewContainerRef: ViewContainerRef) { + private viewContainerRef: ViewContainerRef, + private store: Store,) { this.initSubscription(); + this.store.pipe(select(selectIsAuthenticated)).subscribe((value) => { + if (value) { + this.initSubscription(); + } + }) } ngOnDestroy() { diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/inbox-table/inbox-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/inbox-table/inbox-table-header.component.scss index 384175dc84..01519235aa 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/inbox-table/inbox-table-header.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/inbox-table/inbox-table-header.component.scss @@ -37,7 +37,7 @@ left: 2px; right: 2px; bottom: 2px; - border-radius: 12px; + border-radius: 14px; } } @@ -60,8 +60,9 @@ .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { line-height: 24px; - font-size: 16px; + font-size: 14px; font-weight: 500; + letter-spacing: .25px; } .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay { diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts index 782baaffe6..c1382b3827 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts @@ -66,7 +66,7 @@ export class InboxTableConfig extends EntityTableConfig { }]; this.columns.push( - new DateEntityTableColumn('createdTime', 'notification.created-time', this.datePipe, '150px'), + new DateEntityTableColumn('createdTime', 'notification.created-time', this.datePipe, '170px'), new EntityTableColumn('type', 'notification.type', '10%', (notification) => this.translate.instant(NotificationTemplateTypeTranslateMap.get(notification.type).name)), new EntityTableColumn('subject', 'notification.subject', '30%'), diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts index c6017fb636..526afb0cef 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts @@ -69,14 +69,14 @@ export class RequestTableConfig extends EntityTableConfig('createdTime', 'notification.created-time', this.datePipe, '150px'), + new DateEntityTableColumn('createdTime', 'notification.created-time', this.datePipe, '170px'), new EntityTableColumn('status', 'notification.status', '15%', request => this.requestStatus(request.status), request => this.requestStatusStyle(request.status)), - new EntityTableColumn('deliveryMethods', 'notification.delivery-method', '35%', + new EntityTableColumn('deliveryMethods', 'notification.delivery-method', '15%', (request) => request.deliveryMethods .map((deliveryMethod) => this.translate.instant(NotificationDeliveryMethodTranslateMap.get(deliveryMethod))).join(', '), () => ({}), false), - new EntityTableColumn('templateName', 'notification.template', '50%') + new EntityTableColumn('templateName', 'notification.template', '70%') ); } @@ -131,7 +131,7 @@ export class RequestTableConfig extends EntityTableConfig + return `
${this.translate.instant(translateKey)}
`; } diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html index 5406922042..1f29a6918f 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html @@ -28,7 +28,7 @@
- @@ -41,8 +41,8 @@ - {{ 'notification.use-template' | translate }} {{ 'notification.start-from-scratch' | translate }} + {{ 'notification.use-template' | translate }}
{{ "notification.delivery-methods" | translate }} -
+
notification.at-least-one-should-be-selected
+
@@ -83,7 +84,6 @@
-
notification.at-least-one-should-be-selected
@@ -270,7 +270,7 @@
- +
notification.delivery-method-type.push-preview
@@ -279,7 +279,7 @@
- +
notification.delivery-method-type.email-preview
@@ -290,7 +290,7 @@
- +
notification.delivery-method-type.sms-preview
@@ -299,7 +299,7 @@
- +
notification.delivery-method-type.slack-preview
@@ -308,7 +308,7 @@
- supervisor_account + supervisor_account
{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss index 89cd88dd8e..2fe0583a1b 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss @@ -25,7 +25,16 @@ flex-direction: column; .tb-form-fields { - margin-bottom: 8px; + margin-bottom: 18px; + } + + .tb-title { + font-size: 16px; + line-height: 24px; + } + + .tb-hint { + padding: 0 0 8px; } .tb-hint-available-params { @@ -47,7 +56,7 @@ .delivery-method { padding: 16px 12px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; width: 100%; height: 100%; @@ -55,15 +64,15 @@ } .additional-config-group { - padding: 16px 16px 4px; + padding: 16px 16px 0; margin-bottom: 12px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; width: 100%; height: 100%; .toggle { - margin-bottom: 12px; + margin-bottom: 16px; } } @@ -79,7 +88,7 @@ .group-title { font-weight: 500; - letter-spacing: .25px; + font-size: 14px; } &> div:not(:last-child) { @@ -89,7 +98,6 @@ .details-recipient { font-size: 14px; line-height: 14px; - letter-spacing: .2px; .number { font-weight: 500; @@ -110,13 +118,14 @@ tb-notification { border: 1px groove $tb-primary-color; border-radius: 4px; + max-width: 400px; width: 80%; background-color: #fff; } } .notification-content { - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; background: #fff; padding: 12px 16px; @@ -154,7 +163,7 @@ } .mat-horizontal-content-container { - height: 600px; + height: 680px; max-height: 100%; width: 100%;; overflow-y: auto; @@ -170,7 +179,7 @@ &.mat-button-toggle-group-appearance-standard { border: none; border-radius: 18px; - margin-bottom: 8px; + margin-bottom: 24px; .mat-button-toggle + .mat-button-toggle { border-left: none; diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss index 6cdc59b92a..e7cf6f7725 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss @@ -42,7 +42,7 @@ .mat-mdc-radio-button { flex: 1 1 100%; padding: 4px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; &.mat-mdc-radio-checked { diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html index ab7d29f589..9fe5c1412a 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html @@ -72,6 +72,7 @@ [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"> {{ "notification.delivery-methods" | translate }} +
notification.at-least-one-should-be-selected
@@ -80,7 +81,6 @@
-
notification.at-least-one-should-be-selected
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss index 4b96d57a12..4a8eead30a 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.scss @@ -25,11 +25,16 @@ flex-direction: column; .tb-form-fields { - margin-bottom: 8px; + margin-bottom: 18px; + } + + .tb-title { + font-size: 16px; + line-height: 24px; } .tb-hint { - padding: 0; + padding: 0 0 8px; } .tb-hint-available-params { @@ -51,7 +56,7 @@ .delivery-method { padding: 16px 12px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; width: 100%; height: 100%; @@ -61,7 +66,7 @@ .additional-config-group { padding: 16px 16px 4px; margin-bottom: 12px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; width: 100%; height: 100%; diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts index 1306942a09..328374e474 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts @@ -14,18 +14,13 @@ /// limitations under the License. /// -import { - NotificationDeliveryMethod, - NotificationDeliveryMethodTranslateMap, - NotificationTemplate, - NotificationType -} from '@shared/models/notification.models'; +import { NotificationDeliveryMethod, NotificationTemplate, NotificationType } from '@shared/models/notification.models'; import { Component, Inject, OnDestroy, ViewChild } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { Router } from '@angular/router'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder } from '@angular/forms'; import { NotificationService } from '@core/http/notification.service'; import { deepClone, isDefinedAndNotNull } from '@core/utils'; import { Observable } from 'rxjs'; 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 0523dda919..5baa62fdc5 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.html +++ b/ui-ngx/src/app/shared/components/notification/notification.component.html @@ -38,7 +38,7 @@
- {{ notification.createdTime | dateAgo }} + {{ notification.createdTime ?? currentDate | dateAgo }} 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 6732c8d956..0fedd3a978 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.ts +++ b/ui-ngx/src/app/shared/components/notification/notification.component.ts @@ -24,11 +24,11 @@ import { } from '@shared/models/notification.models'; import { UtilsService } from '@core/services/utils.service'; import { Router } from '@angular/router'; -import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { alarmSeverityTranslations } from '@shared/models/alarm.models'; import * as tinycolor_ from 'tinycolor2'; import { StateObject } from '@core/api/widget-api.models'; import { objToBase64URI } from '@core/utils'; +import { coerceBoolean } from '@shared/decorators/coerce-boolean'; @Component({ selector: 'tb-notification', @@ -46,14 +46,9 @@ export class NotificationComponent implements OnInit { @Output() markAsRead = new EventEmitter(); - private previewValue = false; - get preview(): boolean { - return this.previewValue; - } @Input() - set preview(value: boolean) { - this.previewValue = coerceBooleanProperty(value); - } + @coerceBoolean() + preview = false; showIcon = false; showButton = false; @@ -65,6 +60,8 @@ export class NotificationComponent implements OnInit { notificationTypeIcons = NotificationTypeIcons; alarmSeverityTranslations = alarmSeverityTranslations; + currentDate = Date.now(); + constructor( private utils: UtilsService, private router: Router