UI: Change notification style

ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html

@@ -24,8 +24,7 @@
          [required]="required"
          [matAutocomplete]="slackAutocomplete">
   <button *ngIf="conversationSlackFormGroup.get('conversation').value && !disabled"
-          type="button"
-          matSuffix mat-button mat-icon-button aria-label="Clear"
+          type="button" matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>

ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss

@@ -58,10 +58,10 @@
         .mat-mdc-tab {
           &.mat-mdc-tab-disabled {
             opacity: 1;
-            //width: 100%;
+            flex: 1;
 
-            .mat-tab-label-content {
-              width: 100%;
+            .mdc-tab__content, .mdc-tab__text-label {
+              flex: 1;
             }
           }
         }

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts

@@ -70,7 +70,7 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
       new EntityTableColumn<Notification>('type', 'notification.type', '10%', (notification) =>
         this.translate.instant(NotificationTemplateTypeTranslateMap.get(notification.type).name)),
       new EntityTableColumn<Notification>('subject', 'notification.subject', '30%'),
-      new EntityTableColumn<Notification>('text', 'notification.text', '60%')
+      new EntityTableColumn<Notification>('text', 'notification.message', '60%')
     );
 
   }

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts

@@ -69,10 +69,10 @@ export class TargetsTableConfig extends EntityTableConfig<NotificationTarget> {
 
     this.columns.push(
       new EntityTableColumn<NotificationTarget>('name', 'notification.notification-target', '20%'),
-      new EntityTableColumn<NotificationTarget>('configuration.type', 'notification.type', '40%',
+      new EntityTableColumn<NotificationTarget>('configuration.type', 'notification.type', '20%',
         (target) => this.translate.instant(NotificationTargetTypeTranslationMap.get(target.configuration.type)),
         () => ({}), false),
-      new EntityTableColumn<NotificationTarget>('configuration.description', 'notification.description', '40%',
+      new EntityTableColumn<NotificationTarget>('configuration.description', 'notification.description', '60%',
       (target) => target.configuration.description || '',
       () => ({}), false)
     );

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalation-form.component.html

@@ -36,7 +36,7 @@
       formControlName="targets"
       subscriptSizing="dynamic"
       [entityType]="entityType.NOTIFICATION_TARGET"
-      placeholderText="{{ 'notification.add-target' | translate }}">
+      [placeholderText]="escalationFormGroup.get('targets').value ? '' : ('notification.add-target' | translate)">
       <button #createTargetButton
               mat-button [fxHide]="disabled" matSuffix
               (click)="createTarget($event, createTargetButton)">

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html

@@ -25,7 +25,7 @@
                         [formControl]="escalationControl"
                         [systemEscalation]="$index === 0">
     </tb-escalation-form>
-    <span *ngIf="$index === 0" style="width: 40px;"></span>
+    <span *ngIf="$index === 0" style="width: 48px;"></span>
     <button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;"
             type="button"
             (click)="removeEscalation($index)"

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

@@ -102,7 +102,7 @@
             </tb-alarm-severities-list>
           </fieldset>
 
-          <fieldset class="fields-group tb-margin" formGroupName="clearRule">
+          <fieldset class="fields-group tb-margin-2" formGroupName="clearRule">
             <legend translate>notification.clear-rule</legend>
             <mat-form-field fxFlex class="mat-block" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
@@ -208,7 +208,7 @@
 
       </form>
       <form [formGroup]="ruleNotificationForm">
-        <section formGroupName="additionalConfig">;
+        <section formGroupName="additionalConfig">
           <mat-form-field class="mat-block">
             <mat-label translate>notification.description</mat-label>
             <input matInput formControlName="description">

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss

@@ -17,7 +17,7 @@
 @import "../../../../../../scss/constants";
 
 :host {
-  width: 700px;
+  width: 900px;
   height: 100%;
   max-width: 100%;
   max-height: 100vh;
@@ -30,12 +30,16 @@
   }
 
   .fields-group {
-    padding: 0 16px 8px;
+    padding: 0 16px;
     border: 1px groove rgba(0, 0, 0, .25);
     border-radius: 4px;
 
     &.tb-margin {
-      margin-bottom: 10px;
+      margin-bottom: 12px;
+    }
+
+    &.tb-margin-2 {
+      margin-bottom: 24px;
     }
 
     &.tb-hierarchy {

ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss

@@ -18,7 +18,7 @@
 
 :host {
   form.tb-dialog-container {
-    min-width: 580px;
+    min-width: 600px;
     max-height: 100vh;
   }
 
@@ -36,8 +36,8 @@
   .mat-mdc-radio-group {
     display: flex;
     flex-direction: row;
-    margin-bottom: 14px;
-    gap: 8px;
+    margin-bottom: 22px;
+    gap: 12px;
 
     .mat-mdc-radio-button {
       flex: 1 1 100%;

ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-configuration.ts

@@ -96,7 +96,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
       additionalConfig: this.fb.group({
         icon: this.fb.group({
           enabled: [false],
-          icon: [{value: '', disabled: true}, Validators.required],
+          icon: [{value: 'notifications', disabled: true}, Validators.required],
           color: ['#757575']
         }),
         actionButtonConfig: this.fb.group({

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

@@ -17,7 +17,7 @@
 @import "../../../../../../theme";
 
 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
-  width: 830px;
+  width: 930px;
   height: 100%;
   max-width: 100%;
   max-height: 100vh;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2870,7 +2870,6 @@
             "general": "General"
         },
         "templates": "Templates",
-        "text": "Text",
         "time": "Time",
         "trigger": {
             "alarm": "Alarm",