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

UI: Fixed table row style

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-06-15 13:02:06 +03:00
parent dd900dafba
commit 3c9ab8c91f
5 changed files with 25 additions and 10 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 fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide 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 fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">

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

@ -451,7 +451,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' +

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

@ -64,32 +64,32 @@
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 fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId"> <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span> <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
<button *ngIf="actionDescriptor.icon" <button *ngIf="actionDescriptor.icon"
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 *ngIf="row.hasActions"> <div fxHide fxShow.lt-lg *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

@ -664,6 +664,21 @@ mat-label {
table-layout: auto; table-layout: auto;
border-collapse: separate; border-collapse: separate;
margin: 0; margin: 0;
.mat-mdc-row {
font-size: 13px;
}
.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 {