简柏林 / thingskit · Commits

Commit 09065dee388b51d30dd08840e4b11479a197d70b

Authored by Igor Kulikov
1 parent ccfebce8

Table layout improvement

Inline Side-by-side
Showing 18 changed files with 128 additions and 73 deletions
... ... @@ -137,7 +137,7 @@
137 137 <mat-table [dataSource]="dataSource"
138 138 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
139 139 <ng-container matColumnDef="select" sticky>
140   - <mat-header-cell *matHeaderCellDef>
  140 + <mat-header-cell *matHeaderCellDef style="width: 30px;">
141 141 <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
142 142 [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
143 143 [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
... ... @@ -151,26 +151,28 @@
151 151 </mat-cell>
152 152 </ng-container>
153 153 <ng-container matColumnDef="lastUpdateTs">
154   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.last-update-time' | translate }} </mat-header-cell>
  154 + <mat-header-cell *matHeaderCellDef mat-sort-header style="min-width: 150px; max-width: 150px; width: 150px;"> {{ 'attribute.last-update-time' | translate }} </mat-header-cell>
155 155 <mat-cell *matCellDef="let attribute">
156 156 {{ attribute.lastUpdateTs | date:'yyyy-MM-dd HH:mm:ss' }}
157 157 </mat-cell>
158 158 </ng-container>
159 159 <ng-container matColumnDef="key">
160   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.key' | translate }} </mat-header-cell>
  160 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
161 161 <mat-cell *matCellDef="let attribute">
162 162 {{ attribute.key }}
163 163 </mat-cell>
164 164 </ng-container>
165 165 <ng-container matColumnDef="value">
166   - <mat-header-cell *matHeaderCellDef> {{ 'attribute.value' | translate }} </mat-header-cell>
  166 + <mat-header-cell *matHeaderCellDef style="width: 60%"> {{ 'attribute.value' | translate }} </mat-header-cell>
167 167 <mat-cell *matCellDef="let attribute"
168 168 class="tb-value-cell"
169 169 (click)="editAttribute($event, attribute)">
170   - <span fxFlex>{{attribute.value}}</span>
171   - <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
172   - <mat-icon>edit</mat-icon>
173   - </span>
  170 + <div fxLayout="row">
  171 + <span fxFlex>{{attribute.value}}</span>
  172 + <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
  173 + <mat-icon>edit</mat-icon>
  174 + </span>
  175 + </div>
174 176 </mat-cell>
175 177 </ng-container>
176 178 <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
... ...
... ... @@ -54,9 +54,9 @@
54 54 mat-cell.tb-value-cell {
55 55 cursor: pointer;
56 56 mat-icon {
57   - height: 16px;
58   - width: 16px;
59   - font-size: 16px;
  57 + height: 24px;
  58 + width: 24px;
  59 + font-size: 24px;
60 60 color: #757575
61 61 }
62 62 }
... ...
... ... @@ -138,7 +138,7 @@
138 138 <mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
139 139 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
140 140 <ng-container matColumnDef="select" sticky>
141   - <mat-header-cell *matHeaderCellDef>
  141 + <mat-header-cell *matHeaderCellDef style="width: 30px;">
142 142 <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
143 143 [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
144 144 [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
... ... @@ -178,10 +178,14 @@
178 178 </mat-cell>
179 179 </ng-container>
180 180 <ng-container matColumnDef="actions" stickyEnd>
181   - <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ width: (cellActionDescriptors.length * 40) + 'px' }">
  181 + <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
  182 + maxWidth: (cellActionDescriptors.length * 40) + 'px',
  183 + width: (cellActionDescriptors.length * 40) + 'px' }">
182 184 {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
183 185 </mat-header-cell>
184   - <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ width: (cellActionDescriptors.length * 40) + 'px' }">
  186 + <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
  187 + maxWidth: (cellActionDescriptors.length * 40) + 'px',
  188 + width: (cellActionDescriptors.length * 40) + 'px' }">
185 189 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
186 190 <button mat-button mat-icon-button [disabled]="isLoading$ | async"
187 191 [fxShow]="actionDescriptor.isEnabled(entity)" *ngFor="let actionDescriptor of cellActionDescriptors"
... ...
... ... @@ -393,10 +393,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
393 393 const index = this.entitiesTableConfig.columns.indexOf(column);
394 394 let res = this.headerCellStyleCache[index];
395 395 if (!res) {
  396 + const widthStyle: any = {width: column.width};
  397 + if (column.width !== '0px') {
  398 + widthStyle.minWidth = column.width;
  399 + widthStyle.maxWidth = column.width;
  400 + }
396 401 if (column instanceof EntityTableColumn) {
397   - res = {...column.headerCellStyleFunction(column.key), ...{minWidth: column.width, maxWidth: column.width, width: column.width}};
  402 + res = {...column.headerCellStyleFunction(column.key), ...widthStyle};
398 403 } else {
399   - res = {width: column.width};
  404 + res = widthStyle;
400 405 }
401 406 this.headerCellStyleCache[index] = res;
402 407 }
... ... @@ -440,10 +445,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
440 445 const index = row * this.entitiesTableConfig.columns.length + col;
441 446 let res = this.cellStyleCache[index];
442 447 if (!res) {
  448 + const widthStyle: any = {width: column.width};
  449 + if (column.width !== '0px') {
  450 + widthStyle.minWidth = column.width;
  451 + widthStyle.maxWidth = column.width;
  452 + }
443 453 if (column instanceof EntityTableColumn) {
444   - res = {...column.cellStyleFunction(entity, column.key), ...{minWidth: column.width, maxWidth: column.width, width: column.width}};
  454 + res = {...column.cellStyleFunction(entity, column.key), ...widthStyle};
445 455 } else {
446   - res = {width: column.width};
  456 + res = widthStyle;
447 457 }
448 458 this.cellStyleCache[index] = res;
449 459 }
... ...
... ... @@ -17,19 +17,19 @@
17 17 -->
18 18 <mat-table [dataSource]="dataSource">
19 19 <ng-container matColumnDef="order">
20   - <mat-header-cell *matHeaderCellDef></mat-header-cell>
  20 + <mat-header-cell *matHeaderCellDef style="min-width: 40px; max-width: 40px; width: 40px"></mat-header-cell>
21 21 <mat-cell *matCellDef="let column; let i = index">
22 22 {{ (i+1) }}
23 23 </mat-cell>
24 24 </ng-container>
25 25 <ng-container matColumnDef="sampleData">
26   - <mat-header-cell *matHeaderCellDef> {{ 'import.column-example' | translate }} </mat-header-cell>
  26 + <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-example' | translate }} </mat-header-cell>
27 27 <mat-cell *matCellDef="let column">
28 28 {{column.sampleData}}
29 29 </mat-cell>
30 30 </ng-container>
31 31 <ng-container matColumnDef="type">
32   - <mat-header-cell *matHeaderCellDef> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
  32 + <mat-header-cell *matHeaderCellDef style="width: 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
33 33 <mat-cell *matCellDef="let column">
34 34 <mat-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
35 35 <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
... ... @@ -39,7 +39,7 @@
39 39 </mat-cell>
40 40 </ng-container>
41 41 <ng-container matColumnDef="key">
42   - <mat-header-cell *matHeaderCellDef> {{ 'import.column-key' | translate }} </mat-header-cell>
  42 + <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
43 43 <mat-cell *matCellDef="let column">
44 44 <mat-form-field floatLabel="always" hideRequiredMarker
45 45 *ngIf="column.type !== importEntityColumnType.name &&
... ...
... ... @@ -139,7 +139,6 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
139 139 return (this.valid) ? null : {
140 140 columnsInvalid: true
141 141 };
142   - return null;
143 142 }
144 143
145 144 writeValue(value: CsvColumnParam[]): void {
... ...
... ... @@ -87,7 +87,7 @@
87 87 <mat-table [dataSource]="dataSource"
88 88 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
89 89 <ng-container matColumnDef="select" sticky>
90   - <mat-header-cell *matHeaderCellDef>
  90 + <mat-header-cell *matHeaderCellDef style="width: 30px;">
91 91 <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
92 92 [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
93 93 [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
... ... @@ -101,39 +101,39 @@
101 101 </mat-cell>
102 102 </ng-container>
103 103 <ng-container matColumnDef="type">
104   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.type' | translate }} </mat-header-cell>
  104 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.type' | translate }} </mat-header-cell>
105 105 <mat-cell *matCellDef="let relation">
106 106 {{ relation.type }}
107 107 </mat-cell>
108 108 </ng-container>
109 109 <ng-container *ngIf="direction === directions.FROM" matColumnDef="toEntityTypeName">
110   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
  110 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
111 111 <mat-cell *matCellDef="let relation">
112 112 {{ relation.toEntityTypeName }}
113 113 </mat-cell>
114 114 </ng-container>
115 115 <ng-container *ngIf="direction === directions.FROM" matColumnDef="toName">
116   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
  116 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
117 117 <mat-cell *matCellDef="let relation">
118 118 {{ relation.toName }}
119 119 </mat-cell>
120 120 </ng-container>
121 121 <ng-container *ngIf="direction === directions.TO" matColumnDef="fromEntityTypeName">
122   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
  122 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
123 123 <mat-cell *matCellDef="let relation">
124 124 {{ relation.fromEntityTypeName }}
125 125 </mat-cell>
126 126 </ng-container>
127 127 <ng-container *ngIf="direction === directions.TO" matColumnDef="fromName">
128   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
  128 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
129 129 <mat-cell *matCellDef="let relation">
130 130 {{ relation.fromName }}
131 131 </mat-cell>
132 132 </ng-container>
133 133 <ng-container matColumnDef="actions" stickyEnd>
134   - <mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
  134 + <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
135 135 </mat-header-cell>
136   - <mat-cell *matCellDef="let relation" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
  136 + <mat-cell *matCellDef="let relation">
137 137 <div fxFlex fxLayout="row" fxLayoutAlign="end">
138 138 <button mat-button mat-icon-button [disabled]="isLoading$ | async"
139 139 matTooltip="{{ 'relation.edit' | translate }}"
... ...
... ... @@ -62,33 +62,33 @@
62 62 <mat-table [dataSource]="dataSource"
63 63 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
64 64 <ng-container matColumnDef="actionSourceName">
65   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
  65 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
66 66 <mat-cell *matCellDef="let action">
67 67 {{ action.actionSourceName }}
68 68 </mat-cell>
69 69 </ng-container>
70 70 <ng-container matColumnDef="name">
71   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
  71 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
72 72 <mat-cell *matCellDef="let action">
73 73 {{ action.name }}
74 74 </mat-cell>
75 75 </ng-container>
76 76 <ng-container matColumnDef="icon">
77   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
  77 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
78 78 <mat-cell *matCellDef="let action">
79 79 <mat-icon>{{ action.icon }}</mat-icon>
80 80 </mat-cell>
81 81 </ng-container>
82 82 <ng-container matColumnDef="typeName">
83   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
  83 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
84 84 <mat-cell *matCellDef="let action">
85 85 {{ action.typeName }}
86 86 </mat-cell>
87 87 </ng-container>
88 88 <ng-container matColumnDef="actions" stickyEnd>
89   - <mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
  89 + <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
90 90 </mat-header-cell>
91   - <mat-cell *matCellDef="let action" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
  91 + <mat-cell *matCellDef="let action">
92 92 <div fxFlex fxLayout="row" fxLayoutAlign="end">
93 93 <button mat-button mat-icon-button [disabled]="isLoading$ | async"
94 94 type="button"
... ...
... ... @@ -70,7 +70,7 @@
70 70 [indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)">
71 71 </mat-checkbox>
72 72 </mat-header-cell>
73   - <mat-cell *matCellDef="let alarm" style="width: 30px;">
  73 + <mat-cell *matCellDef="let alarm">
74 74 <mat-checkbox (click)="$event.stopPropagation();"
75 75 (change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
76 76 [checked]="alarmsDatasource.isSelected(alarm)">
... ... @@ -85,9 +85,13 @@
85 85 </mat-cell>
86 86 </ng-container>
87 87 <ng-container matColumnDef="actions" stickyEnd>
88   - <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ width: (actionCellDescriptors.length * 36) + 'px' }">
  88 + <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
  89 + maxWidth: (actionCellDescriptors.length * 40) + 'px',
  90 + width: (actionCellDescriptors.length * 40) + 'px' }">
89 91 </mat-header-cell>
90   - <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ width: (actionCellDescriptors.length * 36) + 'px' }">
  92 + <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
  93 + maxWidth: (actionCellDescriptors.length * 40) + 'px',
  94 + width: (actionCellDescriptors.length * 40) + 'px' }">
91 95 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
92 96 <button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
93 97 *ngFor="let actionDescriptor of actionCellDescriptors"
... ...
... ... @@ -59,7 +59,7 @@ import {
59 59 getColumnWidth,
60 60 TableWidgetDataKeySettings,
61 61 TableWidgetSettings,
62   - toAlarmColumnDef
  62 + toAlarmColumnDef, widthStyle
63 63 } from '@home/components/widget/lib/table-widget.models';
64 64 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
65 65 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
... ... @@ -476,9 +476,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
476 476
477 477 public headerStyle(key: EntityColumn): any {
478 478 const columnWidth = this.columnWidth[key.def];
479   - return {
480   - width: columnWidth
481   - };
  479 + return widthStyle(columnWidth);
482 480 }
483 481
484 482 public cellStyle(alarm: AlarmInfo, key: EntityColumn): any {
... ... @@ -498,7 +496,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
498 496 }
499 497 if (!style.width) {
500 498 const columnWidth = this.columnWidth[key.def];
501   - style.width = columnWidth;
  499 + style = {...style, ...widthStyle(columnWidth)};
502 500 }
503 501 return style;
504 502 }
... ...
... ... @@ -48,9 +48,13 @@
48 48 </mat-cell>
49 49 </ng-container>
50 50 <ng-container matColumnDef="actions" stickyEnd>
51   - <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
  51 + <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
  52 + maxWidth: (actionCellDescriptors.length * 40) + 'px',
  53 + width: (actionCellDescriptors.length * 40) + 'px' }">
52 54 </mat-header-cell>
53   - <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
  55 + <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
  56 + maxWidth: (actionCellDescriptors.length * 40) + 'px',
  57 + width: (actionCellDescriptors.length * 40) + 'px' }">
54 58 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
55 59 <button mat-button mat-icon-button [disabled]="isLoading$ | async"
56 60 *ngFor="let actionDescriptor of actionCellDescriptors"
... ...
... ... @@ -55,20 +55,20 @@ import { MatPaginator } from '@angular/material/paginator';
55 55 import { MatSort } from '@angular/material/sort';
56 56 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
57 57 import {
58   - CellContentInfo,
59   - CellStyleInfo,
60   - constructTableCssString,
61   - DisplayColumn,
62   - EntityColumn,
63   - EntityData,
64   - fromEntityColumnDef,
65   - getCellContentInfo,
66   - getCellStyleInfo,
67   - getColumnWidth,
68   - getEntityValue,
69   - TableWidgetDataKeySettings,
70   - TableWidgetSettings,
71   - toEntityColumnDef
  58 + CellContentInfo,
  59 + CellStyleInfo,
  60 + constructTableCssString,
  61 + DisplayColumn,
  62 + EntityColumn,
  63 + EntityData,
  64 + fromEntityColumnDef,
  65 + getCellContentInfo,
  66 + getCellStyleInfo,
  67 + getColumnWidth,
  68 + getEntityValue,
  69 + TableWidgetDataKeySettings,
  70 + TableWidgetSettings,
  71 + toEntityColumnDef, widthStyle
72 72 } from '@home/components/widget/lib/table-widget.models';
73 73 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
74 74 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
... ... @@ -402,9 +402,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
402 402
403 403 public headerStyle(key: EntityColumn): any {
404 404 const columnWidth = this.columnWidth[key.def];
405   - return {
406   - width: columnWidth
407   - };
  405 + return widthStyle(columnWidth);
408 406 }
409 407
410 408 public cellStyle(entity: EntityData, key: EntityColumn): any {
... ... @@ -424,7 +422,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
424 422 }
425 423 if (!style.width) {
426 424 const columnWidth = this.columnWidth[key.def];
427   - style.width = columnWidth;
  425 + style = {...style, ...widthStyle(columnWidth)};
428 426 }
429 427 return style;
430 428 }
... ...
... ... @@ -156,6 +156,17 @@ export function getColumnWidth(keySettings: TableWidgetDataKeySettings): string
156 156 return isDefined(keySettings.columnWidth) ? keySettings.columnWidth : '0px';
157 157 }
158 158
  159 +export function widthStyle(width: string): any {
  160 + const widthStyleObj: any = {width};
  161 + if (width !== '0px') {
  162 + widthStyleObj.minWidth = width;
  163 + widthStyleObj.maxWidth = width;
  164 + }
  165 + return widthStyleObj;
  166 +}
  167 +
  168 +
  169 +
159 170 export function constructTableCssString(widgetConfig: WidgetConfig): string {
160 171 const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
161 172 const origBackgroundColor = widgetConfig.backgroundColor || 'rgb(255, 255, 255)';
... ...
... ... @@ -58,9 +58,13 @@
58 58 </mat-cell>
59 59 </ng-container>
60 60 <ng-container matColumnDef="actions" stickyEnd>
61   - <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
  61 + <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
  62 + maxWidth: (actionCellDescriptors.length * 40) + 'px',
  63 + width: (actionCellDescriptors.length * 40) + 'px' }">
62 64 </mat-header-cell>
63   - <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
  65 + <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
  66 + maxWidth: (actionCellDescriptors.length * 40) + 'px',
  67 + width: (actionCellDescriptors.length * 40) + 'px' }">
64 68 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
65 69 <button mat-button mat-icon-button [disabled]="isLoading$ | async"
66 70 *ngFor="let actionDescriptor of actionCellDescriptors"
... ...
... ... @@ -78,27 +78,27 @@
78 78 <mat-table [dataSource]="dataSource"
79 79 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
80 80 <ng-container matColumnDef="name">
81   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
  81 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
82 82 <mat-cell *matCellDef="let state">
83 83 {{ state.name }}
84 84 </mat-cell>
85 85 </ng-container>
86 86 <ng-container matColumnDef="id">
87   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
  87 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
88 88 <mat-cell *matCellDef="let state">
89 89 {{ state.id }}
90 90 </mat-cell>
91 91 </ng-container>
92 92 <ng-container matColumnDef="root">
93   - <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
  93 + <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 80px"> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
94 94 <mat-cell *matCellDef="let state">
95 95 <mat-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
96 96 </mat-cell>
97 97 </ng-container>
98 98 <ng-container matColumnDef="actions" stickyEnd>
99   - <mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
  99 + <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
100 100 </mat-header-cell>
101   - <mat-cell *matCellDef="let state" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
  101 + <mat-cell *matCellDef="let state">
102 102 <div fxFlex fxLayout="row">
103 103 <button mat-button mat-icon-button [disabled]="isLoading$ | async"
104 104 type="button"
... ...
... ... @@ -56,7 +56,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
56 56
57 57 this.config.columns.push(
58 58 new DateEntityTableColumn<RuleChain>('createdTime', 'rulechain.created-time', this.datePipe, '150px'),
59   - new EntityTableColumn<RuleChain>('name', 'rulechain.name'),
  59 + new EntityTableColumn<RuleChain>('name', 'rulechain.name', '100%'),
60 60 new EntityTableColumn<RuleChain>('root', 'rulechain.root', '60px',
61 61 entity => {
62 62 return checkBoxCell(entity.root);
... ...
... ... @@ -85,6 +85,12 @@ export class PageLink {
85 85 result = item1Value - item2Value;
86 86 } else if (typeof item1Value === 'string' && typeof item2Value === 'string') {
87 87 result = item1Value.localeCompare(item2Value);
  88 + } else if (typeof item1Value === 'boolean' && typeof item2Value === 'boolean') {
  89 + if (item1Value && !item2Value) {
  90 + result = 1;
  91 + } else if (!item1Value && item2Value) {
  92 + result = -1;
  93 + }
88 94 } else if (typeof item1Value !== typeof item2Value) {
89 95 result = 1;
90 96 }
... ...
... ... @@ -511,10 +511,25 @@ mat-label {
511 511 max-width: 100%;
512 512 margin-bottom: 1rem;
513 513 display: table;
  514 + table-layout: auto;
514 515 border-collapse: separate;
515 516 margin: 0px;
516 517 }
517 518
  519 + mat-footer-row::after, mat-header-row::after, mat-row::after {
  520 + content: none;
  521 + }
  522 +
  523 + mat-header-row {
  524 + min-height: 60px;
  525 + height: 60px;
  526 + }
  527 +
  528 + mat-footer-row, mat-row {
  529 + min-height: 52px;
  530 + height: 52px;
  531 + }
  532 +
518 533 .mat-row,
519 534 .mat-header-row {
520 535 display: table-row;
... ...