From f714728286b5d2c038eef931bc0667f80262bac7 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Fri, 3 Oct 2025 14:03:48 +0300 Subject: [PATCH 1/3] add color adjustment for table pagination icons --- .../modules/home/components/widget/lib/table-widget.models.ts | 3 +++ 1 file changed, 3 insertions(+) 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 7e91a2f043..b6069d4214 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 @@ -549,6 +549,9 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { '.mat-mdc-paginator button.mat-mdc-icon-button[disabled][disabled] {\n' + 'color: ' + mdDarkDisabled + ';\n' + '}\n' + + '.mat-mdc-paginator svg.mat-mdc-paginator-icon {\n' + + 'fill: currentColor;\n' + + '}\n' + '.mat-mdc-paginator .mat-mdc-select-value {\n' + 'color: ' + mdDarkSecondary + ';\n' + '}'; From 9d19ffc951d5502f4ac9f441d2144fc429471a67 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Wed, 8 Oct 2025 17:28:58 +0300 Subject: [PATCH 2/3] move widget style generator from css rules to css variables --- .../widget/lib/table-widget.models.ts | 135 ++++-------------- .../components/widget/lib/table-widget.scss | 63 +++++++- 2 files changed, 93 insertions(+), 105 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 b6069d4214..64e5e9c1f7 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,110 +451,37 @@ 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-mdc-input-element::placeholder {\n' + - ' color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-input-element::-moz-placeholder {\n' + - ' color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-input-element::-webkit-input-placeholder {\n' + - ' color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-input-element:-ms-input-placeholder {\n' + - ' color: ' + mdDarkSecondary + ';\n' + - '}\n' + - 'mat-toolbar.mat-mdc-table-toolbar {\n' + - 'color: ' + mdDark + ';\n' + - '}\n' + - 'mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) button.mat-mdc-icon-button mat-icon {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-tab .mdc-tab__text-label {\n' + - 'color: ' + mdDark + ';\n' + - '}\n' + - '.mat-mdc-tab-header-pagination-chevron {\n' + - 'border-color: ' + mdDark + ';\n' + - '}\n' + - '.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n' + - 'border-color: ' + mdDarkDisabled2 + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-header-row {\n' + - 'background-color: ' + origBackgroundColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-header-cell {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-cell, .mat-mdc-table .mat-mdc-header-cell {\n' + - 'border-bottom-color: ' + mdDarkDivider + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-cell .mat-mdc-checkbox ' + - '.mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])'+ - '~.mdc-checkbox__background, ' + - '.mat-table .mat-header-cell .mat-mdc-checkbox ' + - '.mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])'+ - '~.mdc-checkbox__background {\n' + - 'border-color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky {\n' + - 'transition: background-color .2s;\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row.tb-current-entity {\n' + - 'background-color: ' + currentEntityColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky {\n' + - 'background-color: ' + currentEntityStickyColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) {\n' + - 'background-color: ' + hoverColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky {\n' + - 'background-color: ' + hoverStickyColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) {\n' + - 'background-color: ' + selectedColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky {\n' + - 'background-color: ' + selectedStickyColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky, .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky {\n' + - 'background-color: ' + origBackgroundColor + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-row {\n' + - 'color: ' + mdDark + ';\n' + - 'background-color: rgba(0, 0, 0, 0);\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button mat-icon {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button[disabled][disabled] mat-icon {\n' + - 'color: ' + mdDarkDisabled + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button tb-icon {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button[disabled][disabled] tb-icon {\n' + - 'color: ' + mdDarkDisabled + ';\n' + - '}\n' + - '.mat-divider {\n' + - 'border-top-color: ' + mdDarkDivider + ';\n' + - '}\n' + - '.mat-mdc-paginator {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-paginator button.mat-mdc-icon-button {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}\n' + - '.mat-mdc-paginator button.mat-mdc-icon-button[disabled][disabled] {\n' + - 'color: ' + mdDarkDisabled + ';\n' + - '}\n' + - '.mat-mdc-paginator svg.mat-mdc-paginator-icon {\n' + - 'fill: currentColor;\n' + - '}\n' + - '.mat-mdc-paginator .mat-mdc-select-value {\n' + - 'color: ' + mdDarkSecondary + ';\n' + - '}'; + + const cssString = ` { + --mat-toolbar-container-text-color: ${mdDark}; + --mat-tab-header-inactive-label-text-color: ${mdDarkSecondary}; + --mat-tab-header-pagination-icon-color: ${mdDark}; + --mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2}; + --mat-table-header-headline-color: ${mdDarkSecondary}; + --mat-table-row-item-label-text-color: ${mdDark}; + --mat-icon-color: ${mdDarkSecondary}; + --mdc-icon-button-disabled-icon-color: ${mdDarkDisabled}; + --mat-divider-color: ${mdDarkDivider}; + --mat-paginator-container-text-color: ${mdDarkSecondary}; + --mdc-icon-button-icon-color: ${mdDarkSecondary}; + --mat-paginator-enabled-icon-color: ${mdDarkSecondary}; + --mat-paginator-disabled-icon-color: ${mdDarkDisabled}; + --mat-select-enabled-trigger-text-color: ${mdDarkSecondary}; + --mat-select-disabled-trigger-text-color: ${mdDarkDisabled}; + --mat-table-header-headline-color: ${mdDarkSecondary}; + + --tb-orig-background-color: ${origBackgroundColor}; + --tb-secondary-text-color: ${mdDarkSecondary}; + --tb-second-disabled-color: ${mdDarkDisabled2}; + --tb-divider-color: ${mdDarkDivider}; + --tb-current-entity-color: ${currentEntityColor}; + --tb-current-entity-sticky-color: ${currentEntityStickyColor}; + --tb-hover-color: ${hoverColor}; + --tb-hover-sticky-color: ${hoverStickyColor}; + --tb-selected-color: ${selectedColor}; + --tb-selected-sticky-color: ${selectedStickyColor}; + } + `; return cssString; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss index 3df2c7d0a2..7c14750ba8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -:host { +:host ::ng-deep{ .tb-table-widget { .mat-mdc-table, .mat-mdc-paginator, mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) { background: transparent; @@ -25,6 +25,9 @@ height: 39px; max-height: 39px; } + .mat-mdc-table-toolbar:not([color="primary"]) .mat-toolbar-tools button.mat-mdc-icon-button mat-icon { + color:var(--tb-secondary-text-color) + } } .table-container { overflow: auto; @@ -44,7 +47,65 @@ padding: 0 5px; } } + + .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron { + border-color: var(--tb-second-disabled-color); + } } + + .mat-mdc-input-element { + &::placeholder, + &::-moz-placeholder, + &::-webkit-input-placeholder, + &::-ms-input-placeholder { + color: var(--tb-secondary-text-color); + } + } + + .mat-mdc-table { + .mat-mdc-header-row { + background-color: var(--tb-orig-background-color); + } + + .mat-mdc-cell, .mat-mdc-header-cell { + border-bottom-color: var(--tb-divider-color); + &.mat-mdc-table-sticky{ + background-color:var(--tb-orig-background-color) + } + .mat-mdc-checkbox { + .mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true']) ~ .mdc-checkbox__background { + border-color: var(--tb-secondary-text-color); + } + } + } + + .mat-mdc-row { + background-color: rgba(0,0,0,0); + &.tb-current-entity { + background-color: var(--tb-current-entity-color); + + .mat-mdc-cell.mat-mdc-table-sticky { + background-color: var(--tb-current-entity-sticky-color); + } + } + &:hover:not(.tb-current-entity){ + background-color: var(--tb-hover-color); + .mat-mdc-cell.mat-mdc-table-sticky{ + background-color: var(--tb-hover-sticky-color); + } + } + &.mat-row-select.mat-selected:not(.tb-current-entity){ + background-color: var(--tb-selected-color); + .mat-mdc-cell.mat-mdc-table-sticky{ + background-color: var(--tb-selected-sticky-color); + } + } + .mat-mdc-cell.mat-mdc-table-sticky { + transition: background-color .2s; + background-color:var(--tb-orig-background-color) + } + } + } } :host-context(.tb-has-timewindow) { From fc3f78e5c4b46fb424caf8be87b2b6f1c089e16d Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Thu, 9 Oct 2025 12:48:00 +0300 Subject: [PATCH 3/3] refactore css --- .../widget/lib/table-widget.models.ts | 9 ++--- .../components/widget/lib/table-widget.scss | 37 ++++++------------- ui-ngx/src/styles.scss | 8 ++-- 3 files changed, 19 insertions(+), 35 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 64e5e9c1f7..8f36242d95 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 @@ -454,7 +454,8 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { const cssString = ` { --mat-toolbar-container-text-color: ${mdDark}; - --mat-tab-header-inactive-label-text-color: ${mdDarkSecondary}; + --mat-tab-header-active-label-text-color: ${mdDark}; + --mat-tab-header-inactive-label-text-color: ${mdDark}; --mat-tab-header-pagination-icon-color: ${mdDark}; --mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2}; --mat-table-header-headline-color: ${mdDarkSecondary}; @@ -468,12 +469,10 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string { --mat-paginator-disabled-icon-color: ${mdDarkDisabled}; --mat-select-enabled-trigger-text-color: ${mdDarkSecondary}; --mat-select-disabled-trigger-text-color: ${mdDarkDisabled}; - --mat-table-header-headline-color: ${mdDarkSecondary}; + --mat-table-row-item-outline-color: ${mdDarkDivider}; + --mdc-checkbox-unselected-focus-icon-color: ${mdDarkSecondary}; --tb-orig-background-color: ${origBackgroundColor}; - --tb-secondary-text-color: ${mdDarkSecondary}; - --tb-second-disabled-color: ${mdDarkDisabled2}; - --tb-divider-color: ${mdDarkDivider}; --tb-current-entity-color: ${currentEntityColor}; --tb-current-entity-sticky-color: ${currentEntityStickyColor}; --tb-hover-color: ${hoverColor}; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss index 7c14750ba8..dd8a026db4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -:host ::ng-deep{ +:host { .tb-table-widget { .mat-mdc-table, .mat-mdc-paginator, mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) { background: transparent; @@ -25,9 +25,6 @@ height: 39px; max-height: 39px; } - .mat-mdc-table-toolbar:not([color="primary"]) .mat-toolbar-tools button.mat-mdc-icon-button mat-icon { - color:var(--tb-secondary-text-color) - } } .table-container { overflow: auto; @@ -49,33 +46,22 @@ } .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron { - border-color: var(--tb-second-disabled-color); + border-color: var(--mat-tab-header-pagination-disabled-icon-color); } } - .mat-mdc-input-element { - &::placeholder, - &::-moz-placeholder, - &::-webkit-input-placeholder, - &::-ms-input-placeholder { - color: var(--tb-secondary-text-color); - } + .mat-mdc-input-element::placeholder { + color: var(--mat-table-header-headline-color); } - + .mat-mdc-table { .mat-mdc-header-row { background-color: var(--tb-orig-background-color); } .mat-mdc-cell, .mat-mdc-header-cell { - border-bottom-color: var(--tb-divider-color); - &.mat-mdc-table-sticky{ - background-color:var(--tb-orig-background-color) - } - .mat-mdc-checkbox { - .mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true']) ~ .mdc-checkbox__background { - border-color: var(--tb-secondary-text-color); - } + &.mat-mdc-table-sticky { + background-color:var(--tb-orig-background-color); } } @@ -83,26 +69,25 @@ background-color: rgba(0,0,0,0); &.tb-current-entity { background-color: var(--tb-current-entity-color); - .mat-mdc-cell.mat-mdc-table-sticky { background-color: var(--tb-current-entity-sticky-color); } } &:hover:not(.tb-current-entity){ background-color: var(--tb-hover-color); - .mat-mdc-cell.mat-mdc-table-sticky{ + .mat-mdc-cell.mat-mdc-table-sticky { background-color: var(--tb-hover-sticky-color); } } &.mat-row-select.mat-selected:not(.tb-current-entity){ background-color: var(--tb-selected-color); - .mat-mdc-cell.mat-mdc-table-sticky{ + .mat-mdc-cell.mat-mdc-table-sticky { background-color: var(--tb-selected-sticky-color); } } - .mat-mdc-cell.mat-mdc-table-sticky { + &, .mat-mdc-cell.mat-mdc-table-sticky { transition: background-color .2s; - background-color:var(--tb-orig-background-color) + background-color:var(--tb-orig-background-color); } } } diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 6d49e9f698..66006ec701 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -692,7 +692,7 @@ pre.tb-highlight { mat-toolbar.mat-mdc-table-toolbar:not(.mat-primary), .mat-mdc-cell, .mat-expansion-panel-header, mat-card-header.mat-mdc-card-header { button.mat-mdc-icon-button { .mat-icon { - color: rgba(0, 0, 0, .54); + color:var(--mat-icon-color, rgba(0, 0, 0, .54)); } &[disabled][disabled] { .mat-icon { @@ -760,11 +760,11 @@ pre.tb-highlight { transition: background-color .2s; &:hover:not(.tb-current-entity) { - background-color: #f4f4f4; + background-color: var(--tb-hover-color, #f4f4f4); } &.tb-current-entity { - background-color: #e9e9e9; + background-color: var(--tb-current-entity-color, #e9e9e9); } &.tb-pointer { @@ -816,7 +816,7 @@ pre.tb-highlight { vertical-align: middle; border-width: 0; border-bottom-width: 1px; - border-bottom-color: rgba(0, 0, 0, 0.12); + border-bottom-color: var(--mat-table-row-item-outline-color,rgba(0, 0, 0, 0.12)); border-style: solid; text-overflow: ellipsis; touch-action: auto !important;