From da23c7c7779c9690746507146639d235fa56754d Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Thu, 19 Mar 2026 13:35:59 +0100 Subject: [PATCH 1/2] Improved styles fot time series table bars --- .../widget/lib/table-widget.models.ts | 20 ++++++++++++------- .../lib/timeseries-table-widget.component.ts | 2 +- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts index 3a3c4b5150..070180ad73 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts @@ -451,13 +451,9 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { const mdDarkDisabled = defaultColor.setAlpha(0.26).toRgbString(); const mdDarkDisabled2 = defaultColor.setAlpha(0.38).toRgbString(); const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString(); - + const cssString = ` { --mat-toolbar-container-text-color: ${mdDark}; - --mat-tab-active-label-text-color: ${mdDark}; - --mat-tab-inactive-label-text-color: ${mdDark}; - --mat-tab-pagination-icon-color: ${mdDark}; - --mat-tab-pagination-disabled-icon-color: ${mdDarkDisabled2}; --mat-table-header-headline-color: ${mdDarkSecondary}; --mat-table-row-item-label-text-color: ${mdDark}; --mat-icon-color: ${mdDarkSecondary}; @@ -480,8 +476,18 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { --tb-selected-color: ${selectedColor}; --tb-selected-sticky-color: ${selectedStickyColor}; } - `; - return cssString; + ` + (widgetConfig?.isTabsEnabled && ` + .tb-table-widget .mat-mdc-tab-group { + --mat-tab-inactive-label-text-color: ${mdDarkSecondary}; + --mat-tab-pagination-icon-color: ${mdDark}; + --mat-tab-pagination-disabled-icon-color: ${mdDarkDisabled2}; + --mat-tab-inactive-ripple-color: ${mdDarkSecondary}; + --mat-tab-inactive-focus-label-text-color: ${mdDarkSecondary}; + --mat-tab-inactive-hover-label-text-color: ${mdDarkSecondary}; + } + ` + ); + return cssString ; } export function getHeaderTitle(dataKey: DataKey, keySettings: TableWidgetDataKeySettings | undefined, utils: UtilsService) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts index d363b6c56e..ddc888145e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts @@ -379,7 +379,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI this.noDataDisplayMessageText = noDataMessage(this.widgetConfig.noDataDisplayMessage, 'widget.no-data-found', this.utils, this.translate); - + this.widgetConfig.isTabsEnabled = true; let cssString = constructTableCssString(this.widgetConfig); const origBackgroundColor = this.widgetConfig.backgroundColor || 'rgb(255, 255, 255)'; From b3a6eab79ebec2e6bc697a1f42b80067966393b7 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Thu, 19 Mar 2026 17:07:23 +0100 Subject: [PATCH 2/2] Additional fixes --- .../components/widget/lib/table-widget.models.ts | 12 +++++++----- .../widget/lib/timeseries-table-widget.component.ts | 3 +-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts index 070180ad73..d2b191adfd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts @@ -433,7 +433,7 @@ export function noDataMessage(noDataDisplayMessage: string, defaultMessage: stri return translate.instant(defaultMessage); } -export function constructTableCssString(widgetConfig: WidgetConfig): string { +export function constructTableCssString(widgetConfig: WidgetConfig, isTabsEnabled = false): string { const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)'; const origBackgroundColor = widgetConfig.backgroundColor || 'rgb(255, 255, 255)'; const currentEntityColor = 'rgba(221, 221, 221, 0.65)'; @@ -452,7 +452,7 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { const mdDarkDisabled2 = defaultColor.setAlpha(0.38).toRgbString(); const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString(); - const cssString = ` { + let cssString = ` { --mat-toolbar-container-text-color: ${mdDark}; --mat-table-header-headline-color: ${mdDarkSecondary}; --mat-table-row-item-label-text-color: ${mdDark}; @@ -476,8 +476,10 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { --tb-selected-color: ${selectedColor}; --tb-selected-sticky-color: ${selectedStickyColor}; } - ` + (widgetConfig?.isTabsEnabled && ` - .tb-table-widget .mat-mdc-tab-group { + `; + if (isTabsEnabled) { + cssString += ` + .mat-mdc-tab-group { --mat-tab-inactive-label-text-color: ${mdDarkSecondary}; --mat-tab-pagination-icon-color: ${mdDark}; --mat-tab-pagination-disabled-icon-color: ${mdDarkDisabled2}; @@ -486,7 +488,7 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { --mat-tab-inactive-hover-label-text-color: ${mdDarkSecondary}; } ` - ); + } return cssString ; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts index ddc888145e..4ce5b9e130 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts @@ -379,8 +379,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI this.noDataDisplayMessageText = noDataMessage(this.widgetConfig.noDataDisplayMessage, 'widget.no-data-found', this.utils, this.translate); - this.widgetConfig.isTabsEnabled = true; - let cssString = constructTableCssString(this.widgetConfig); + let cssString = constructTableCssString(this.widgetConfig, true); const origBackgroundColor = this.widgetConfig.backgroundColor || 'rgb(255, 255, 255)'; cssString += '.tb-table-widget mat-toolbar.mat-mdc-table-toolbar:not([color=primary]) {\n' +