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

move widget style generator from css rules to css variables

pull/14105/head
Maksym Tsymbarov 12 months ago
parent
f714728286
commit
9d19ffc951
2 changed files with 93 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 133
      ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
  2. 63
      ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss

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

@ -452,109 +452,36 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
const mdDarkDisabled2 = defaultColor.setAlpha(0.38).toRgbString(); const mdDarkDisabled2 = defaultColor.setAlpha(0.38).toRgbString();
const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString(); const mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString();
const cssString = const cssString = ` {
'.mat-mdc-input-element::placeholder {\n' + --mat-toolbar-container-text-color: ${mdDark};
' color: ' + mdDarkSecondary + ';\n' + --mat-tab-header-inactive-label-text-color: ${mdDarkSecondary};
'}\n' + --mat-tab-header-pagination-icon-color: ${mdDark};
'.mat-mdc-input-element::-moz-placeholder {\n' + --mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2};
' color: ' + mdDarkSecondary + ';\n' + --mat-table-header-headline-color: ${mdDarkSecondary};
'}\n' + --mat-table-row-item-label-text-color: ${mdDark};
'.mat-mdc-input-element::-webkit-input-placeholder {\n' + --mat-icon-color: ${mdDarkSecondary};
' color: ' + mdDarkSecondary + ';\n' + --mdc-icon-button-disabled-icon-color: ${mdDarkDisabled};
'}\n' + --mat-divider-color: ${mdDarkDivider};
'.mat-mdc-input-element:-ms-input-placeholder {\n' + --mat-paginator-container-text-color: ${mdDarkSecondary};
' color: ' + mdDarkSecondary + ';\n' + --mdc-icon-button-icon-color: ${mdDarkSecondary};
'}\n' + --mat-paginator-enabled-icon-color: ${mdDarkSecondary};
'mat-toolbar.mat-mdc-table-toolbar {\n' + --mat-paginator-disabled-icon-color: ${mdDarkDisabled};
'color: ' + mdDark + ';\n' + --mat-select-enabled-trigger-text-color: ${mdDarkSecondary};
'}\n' + --mat-select-disabled-trigger-text-color: ${mdDarkDisabled};
'mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) button.mat-mdc-icon-button mat-icon {\n' + --mat-table-header-headline-color: ${mdDarkSecondary};
'color: ' + mdDarkSecondary + ';\n' +
'}\n' + --tb-orig-background-color: ${origBackgroundColor};
'.mat-mdc-tab .mdc-tab__text-label {\n' + --tb-secondary-text-color: ${mdDarkSecondary};
'color: ' + mdDark + ';\n' + --tb-second-disabled-color: ${mdDarkDisabled2};
'}\n' + --tb-divider-color: ${mdDarkDivider};
'.mat-mdc-tab-header-pagination-chevron {\n' + --tb-current-entity-color: ${currentEntityColor};
'border-color: ' + mdDark + ';\n' + --tb-current-entity-sticky-color: ${currentEntityStickyColor};
'}\n' + --tb-hover-color: ${hoverColor};
'.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n' + --tb-hover-sticky-color: ${hoverStickyColor};
'border-color: ' + mdDarkDisabled2 + ';\n' + --tb-selected-color: ${selectedColor};
'}\n' + --tb-selected-sticky-color: ${selectedStickyColor};
'.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' +
'}';
return cssString; return cssString;
} }

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

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
:host { :host ::ng-deep{
.tb-table-widget { .tb-table-widget {
.mat-mdc-table, .mat-mdc-paginator, mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) { .mat-mdc-table, .mat-mdc-paginator, mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) {
background: transparent; background: transparent;
@ -25,6 +25,9 @@
height: 39px; height: 39px;
max-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 { .table-container {
overflow: auto; overflow: auto;
@ -44,6 +47,64 @@
padding: 0 5px; 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)
}
}
} }
} }

Write Preview
Loading…
Cancel
Save