UI: Improvements for notification widget

application/src/main/data/json/system/widget_types/unread_notifications.json

@@ -17,7 +17,7 @@
     "settingsDirective": "tb-unread-notification-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-unread-notification-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0\",\"settings\":{\"cardHtml\":\"<div class='card'>HTML code here</div>\",\"cardCss\":\".card {\\n    font-weight: bold;\\n    font-size: 32px;\\n    color: #999;\\n    width: 100%;\\n    height: 100%;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n}\",\"maxNotificationDisplay\":6,\"showCounter\":true,\"counterValueFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"600\",\"lineHeight\":\"\"},\"counterValueColor\":\"#fff\",\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"enableViewAll\":true,\"enableFilter\":true,\"enableMarkAsRead\":true},\"title\":\"Unread notification\",\"dropShadow\":true,\"configMode\":\"basic\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleColor\":\"#000000\",\"showTitleIcon\":true,\"iconSize\":\"22px\",\"titleIcon\":\"notifications\",\"iconColor\":\"#000000\",\"actions\":{},\"enableFullscreen\":false,\"borderRadius\":\"4px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"noDataDisplayMessage\":\"\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0\",\"settings\":{\"cardHtml\":\"<div class='card'>HTML code here</div>\",\"cardCss\":\".card {\\n    font-weight: bold;\\n    font-size: 32px;\\n    color: #999;\\n    width: 100%;\\n    height: 100%;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n}\",\"maxNotificationDisplay\":6,\"showCounter\":true,\"counterValueFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"600\",\"lineHeight\":\"\"},\"counterValueColor\":\"#fff\",\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"enableViewAll\":true,\"enableFilter\":true,\"enableMarkAsRead\":true},\"title\":\"Unread notification\",\"dropShadow\":true,\"configMode\":\"basic\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleColor\":\"#000000\",\"showTitleIcon\":true,\"iconSize\":\"22px\",\"titleIcon\":\"notifications\",\"iconColor\":\"#000000\",\"actions\":{},\"enableFullscreen\":false,\"borderRadius\":\"4px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"noDataDisplayMessage\":\"\"}"
   },
   "tags": null
 }

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html

@@ -77,7 +77,7 @@
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
-                          [previewText]="unreadNotificationWidgetConfigForm.get('maxNotificationDisplay').value.toString()"
+                          [previewText]="countPreviewFn"
                           [initialPreviewStyle]="widgetConfig.config.titleStyle">
         </tb-font-settings>
         <tb-color-input asBoxInput

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.ts

@@ -38,6 +38,8 @@ export class UnreadNotificationBasicConfigComponent extends BasicWidgetConfigCom
 
   unreadNotificationWidgetConfigForm: UntypedFormGroup;
 
+  countPreviewFn = this._countPreviewFn.bind(this);
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
@@ -87,16 +89,6 @@ export class UnreadNotificationBasicConfigComponent extends BasicWidgetConfigCom
     const showTitle: boolean = this.unreadNotificationWidgetConfigForm.get('showTitle').value;
     const showIcon: boolean = this.unreadNotificationWidgetConfigForm.get('showIcon').value;
 
-    if (showTitle) {
-      this.unreadNotificationWidgetConfigForm.get('title').enable({emitEvent});
-      this.unreadNotificationWidgetConfigForm.get('titleFont').enable({emitEvent});
-      this.unreadNotificationWidgetConfigForm.get('titleColor').enable({emitEvent});
-    } else {
-      this.unreadNotificationWidgetConfigForm.get('title').disable({emitEvent});
-      this.unreadNotificationWidgetConfigForm.get('titleFont').disable({emitEvent});
-      this.unreadNotificationWidgetConfigForm.get('titleColor').disable({emitEvent});
-    }
-
     if (showIcon) {
       this.unreadNotificationWidgetConfigForm.get('iconSize').enable({emitEvent});
       this.unreadNotificationWidgetConfigForm.get('iconSizeUnit').enable({emitEvent});
@@ -118,6 +110,30 @@ export class UnreadNotificationBasicConfigComponent extends BasicWidgetConfigCom
       this.unreadNotificationWidgetConfigForm.get('counterValueColor').disable({emitEvent});
       this.unreadNotificationWidgetConfigForm.get('counterColor').disable({emitEvent});
     }
+
+    if (showTitle) {
+      this.unreadNotificationWidgetConfigForm.get('title').enable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('titleFont').enable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('titleColor').enable({emitEvent});
+
+      this.unreadNotificationWidgetConfigForm.get('showCounter').enable({emitEvent: false});
+      this.unreadNotificationWidgetConfigForm.get('showIcon').enable({emitEvent: false});
+    } else {
+      this.unreadNotificationWidgetConfigForm.get('title').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('titleFont').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('titleColor').disable({emitEvent});
+
+      this.unreadNotificationWidgetConfigForm.get('showIcon').disable({emitEvent: false});
+      this.unreadNotificationWidgetConfigForm.get('iconSize').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('iconSizeUnit').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('icon').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('iconColor').disable({emitEvent});
+
+      this.unreadNotificationWidgetConfigForm.get('showCounter').disable({emitEvent: false});
+      this.unreadNotificationWidgetConfigForm.get('counterValueFont').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('counterValueColor').disable({emitEvent});
+      this.unreadNotificationWidgetConfigForm.get('counterColor').disable({emitEvent});
+    }
   }
 
   protected prepareOutputConfig(config: any): WidgetConfigComponentData {
@@ -174,4 +190,8 @@ export class UnreadNotificationBasicConfigComponent extends BasicWidgetConfigCom
     config.enableFullscreen = buttons.includes('fullscreen');
   }
 
+  private _countPreviewFn(): string {
+    return this.unreadNotificationWidgetConfigForm.get('maxNotificationDisplay').value?.toString() || '6';
+  }
+
 }

ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html

@@ -32,6 +32,7 @@
             <tb-notification [notification]="notification"
                              (markAsRead)="markAsRead($event)">
             </tb-notification>
+            <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
           </div>
         </section>
       </div>

ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.scss

@@ -60,6 +60,6 @@
     width: 24px;
     height: 22px;
     background-color: green;
-    border-radius: 7px;
+    border-radius: 5px;
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts

@@ -153,9 +153,11 @@ export class UnreadNotificationWidgetComponent implements OnInit, OnDestroy {
     this.ctx.widgetActions = [this.viewAllAction, this.filterAction, this.markAsReadAction];
 
     this.viewAllAction.show = isDefined(this.settings.enableViewAll) ? this.settings.enableViewAll : true;
-    this.store.pipe(select(selectUserDetails), take(1)).subscribe(
+    if (this.viewAllAction.show) {
-      user => this.viewAllAction.show = !user.additionalInfo?.defaultDashboardFullscreen
+      this.store.pipe(select(selectUserDetails), take(1)).subscribe(
-    );
+        user => this.viewAllAction.show = !user.additionalInfo?.defaultDashboardFullscreen
+      );
+    }
     this.filterAction.show = isDefined(this.settings.enableFilter) ? this.settings.enableFilter : true;
     this.markAsReadAction.show = isDefined(this.settings.enableMarkAsRead) ? this.settings.enableMarkAsRead : true;
 

ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.models.ts

@@ -35,7 +35,7 @@ export const unreadNotificationDefaultSettings: UnreadNotificationWidgetSettings
   showCounter: true,
   counterValueFont: {
     family: 'Roboto',
-    size: 14,
+    size: 12,
     sizeUnit: 'px',
     style: 'normal',
     weight: '600',

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html

@@ -41,7 +41,9 @@
   <div class="tb-form-panel">
     <div class="tb-form-row no-padding no-border">
       <mat-slide-toggle class="mat-slide" formControlName="showCounter">
-        {{ 'widgets.notification.counter' | translate }}
+        <div tb-hint-tooltip-icon="{{'widgets.notification.counter-hint' | translate}}">
+          {{ 'widgets.notification.counter' | translate }}
+        </div>
       </mat-slide-toggle>
     </div>
     <div class="tb-form-row space-between">
@@ -49,7 +51,7 @@
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
-                          [previewText]="unreadNotificationWidgetSettingsForm.get('maxNotificationDisplay').value.toString()"
+                          [previewText]="countPreviewFn"
                           [initialPreviewStyle]="widgetConfig.config.titleStyle">
         </tb-font-settings>
         <tb-color-input asBoxInput

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.ts

@@ -30,6 +30,8 @@ export class UnreadNotificationWidgetSettingsComponent extends WidgetSettingsCom
 
   unreadNotificationWidgetSettingsForm: UntypedFormGroup;
 
+  countPreviewFn = this._countPreviewFn.bind(this);
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
@@ -78,4 +80,8 @@ export class UnreadNotificationWidgetSettingsComponent extends WidgetSettingsCom
     }
   }
 
+  private _countPreviewFn(): string {
+    return this.unreadNotificationWidgetSettingsForm.get('maxNotificationDisplay').value?.toString() || '6';
+  }
+
 }

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

@@ -7046,6 +7046,7 @@
         "notification": {
             "max-notification-display": "Maximum notifications to display",
             "counter": "Counter",
+            "counter-hint": "Counter will be displayed if \"Widget title\" is enabled",
             "icon": "Icon",
             "counter-value": "Value",
             "counter-color": "Color",