tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #14105 from mtsymbarov-del/fix/widget-card-appearance 

Add color adjustment for table pagination icons
pull/14268/head
Igor Kulikov 7 months ago
committed by GitHub
parent
2a72e2ec60 fc3f78e5c4
commit
6da1c735ae
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
3 changed files with 80 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 131
      ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
  2. 46
      ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
  3. 8
      ui-ngx/src/styles.scss

131
ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
View File

@ -451,107 +451,36 @@ 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 .mat-mdc-select-value {\n' +
'color: ' + mdDarkSecondary + ';\n' +
'}';
const cssString = ` {
--mat-toolbar-container-text-color: ${mdDark};
--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};
--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-row-item-outline-color: ${mdDarkDivider};
--mdc-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
--tb-orig-background-color: ${origBackgroundColor};
--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;
}

46
ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
View File

@ -44,7 +44,53 @@
padding: 0 5px;
}
}
.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {
border-color: var(--mat-tab-header-pagination-disabled-icon-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 {
&.mat-mdc-table-sticky {
background-color:var(--tb-orig-background-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) {

8
ui-ngx/src/styles.scss
View File

@ -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;

Write Preview
Loading…
Cancel
Save