dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8767 from ArtemDzhereleiko/AD/bug-fix/table-row-style

Browse Source 
Fixed widgets table styles for correct applying row style function
This commit is contained in:
Igor Kulikov 2023-08-25 18:12:33 +03:00 committed by GitHub
commit 9abfb7f1bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
View File

@ -70,7 +70,7 @@
[indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)"> [indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)">
</mat-checkbox> </mat-checkbox>
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let alarm"> <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
<mat-checkbox (click)="$event.stopPropagation();" <mat-checkbox (click)="$event.stopPropagation();"
(change)="$event ? alarmsDatasource.toggleSelection(alarm) : null" (change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
[checked]="alarmsDatasource.isSelected(alarm)"> [checked]="alarmsDatasource.isSelected(alarm)">
@ -122,7 +122,7 @@
maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }"> width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px', maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }"> width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
<div [fxHide]="showCellActionsMenu" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div [fxHide]="showCellActionsMenu" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">

2
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
View File

@ -52,7 +52,7 @@
maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px', maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
width: (entityDatasource.countCellButtonAction * 48) + 'px' }"> width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px', <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px', maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
width: (entityDatasource.countCellButtonAction * 48) + 'px' }"> width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
<div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">

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

@ -452,7 +452,7 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
'.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' + '.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' + 'background-color: ' + origBackgroundColor + ';\n' +
'}\n' + '}\n' +
'.mat-mdc-table .mat-mdc-cell {\n' + '.mat-mdc-table .mat-mdc-row {\n' +
'color: ' + mdDark + ';\n' + 'color: ' + mdDark + ';\n' +
'background-color: rgba(0, 0, 0, 0);\n' + 'background-color: rgba(0, 0, 0, 0);\n' +
'}\n' + '}\n' +

10
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
View File

@ -64,7 +64,7 @@
maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }"> width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(source, entity, row)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px', maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }"> width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
<div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
@ -74,22 +74,22 @@
mat-icon-button [disabled]="isLoading$ | async" mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ actionDescriptor.displayName }}" matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="onActionButtonClick($event, row, actionDescriptor)"> (click)="onActionButtonClick($event, entity, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <mat-icon>{{actionDescriptor.icon}}</mat-icon>
</button> </button>
</ng-container> </ng-container>
</div> </div>
<div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions"> <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
<button mat-icon-button <button mat-icon-button
(click)="$event.stopPropagation(); ctx.detectChanges();" (click)="$event.stopPropagation(); ctx.detectChanges();"
[matMenuTriggerFor]="cellActionsMenu"> [matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon> <mat-icon class="material-icons">more_vert</mat-icon>
</button> </button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> <mat-menu #cellActionsMenu="matMenu" xPosition="before">
<ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId"> <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<button mat-menu-item *ngIf="actionDescriptor.icon" <button mat-menu-item *ngIf="actionDescriptor.icon"
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, row, actionDescriptor)"> (click)="onActionButtonClick($event, entity, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <mat-icon>{{actionDescriptor.icon}}</mat-icon>
<span>{{ actionDescriptor.displayName }}</span> <span>{{ actionDescriptor.displayName }}</span>
</button> </button>

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

@ -692,6 +692,21 @@ mat-label {
margin: 0; margin: 0;
} }
.tb-table-widget {
.mat-mdc-table {
.mat-mdc-cell {
background: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
}
}
.mat-mdc-footer-row::after, .mat-mdc-header-row::after, .mat-mdc-row::after { .mat-mdc-footer-row::after, .mat-mdc-header-row::after, .mat-mdc-row::after {
content: none; content: none;
} }