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