diff --git a/application/src/main/data/json/system/widget_types/unread_notifications.json b/application/src/main/data/json/system/widget_types/unread_notifications.json index 7e3e6b0477..ed7a8492ad 100644 --- a/application/src/main/data/json/system/widget_types/unread_notifications.json +++ b/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\":\"
HTML code here
\",\"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\":\"
HTML code here
\",\"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 } diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html index 22bfc17787..7fc472e6cc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html @@ -77,7 +77,7 @@
, 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'; + } + } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html index 3537c8bb1d..7da0738e59 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.html @@ -32,6 +32,7 @@ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.scss index 5fb3ad8950..456660c332 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.scss +++ b/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; } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts index 2dfded3f96..dea274d118 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts +++ b/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( - user => this.viewAllAction.show = !user.additionalInfo?.defaultDashboardFullscreen - ); + if (this.viewAllAction.show) { + 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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.models.ts index 008c1d9a9d..507ed9d6a3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.models.ts +++ b/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', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html index 5f452f3508..f59c85b3ca 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html @@ -41,7 +41,9 @@
- {{ 'widgets.notification.counter' | translate }} +
+ {{ 'widgets.notification.counter' | translate }} +
@@ -49,7 +51,7 @@
, 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'; + } + } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index a35e41c7b8..5e1f84acfb 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -7050,6 +7050,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",