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

Fx flex replacements. Switch to tailwind.css.

pull/11858/head
Igor Kulikov 2 years ago
parent
899820cd27
commit
b48e276f44
6 changed files with 91 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
  2. 4
      ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
  3. 2
      ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
  4. 6
      ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
  5. 6
      ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
  6. 153
      ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

2
ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
View File

@ -19,7 +19,7 @@
ngxClipboard
[cbContent]="credential"
(cbOnSuccess)="onCopyCredential()"
[fxHide]="hideButton"
[class.!hidden]="hideButton"
[disabled]="disabled || loading">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span>{{ buttonLabel }}</span>

4
ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<section [formGroup]="serverFormGroup" fxLayout="column">
<section [formGroup]="serverFormGroup" class="flex flex-col">
<mat-form-field class="mat-block">
<mat-label translate>device.lwm2m-security-config.mode</mat-label>
<mat-select formControlName="securityMode">
@ -24,7 +24,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<div [fxShow]="serverFormGroup.get('securityMode').value !== securityConfigLwM2MType.NO_SEC">
<div [class.!hidden]="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.NO_SEC">
<mat-form-field class="mat-block">
<mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label>
<mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"

2
ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
View File

@ -16,7 +16,7 @@
-->
<section [formGroup]="deviceCredentialsFormGroup">
<section [fxShow]="credentialsTypes?.length > 1" style="margin-bottom: 16px">
<section [class.!hidden]="!(credentialsTypes?.length > 1)" style="margin-bottom: 16px">
<div class="tb-type-title" translate>device.credentials-type</div>
<tb-toggle-select formControlName="credentialsType" appearance="fill">
<tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">

6
ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
View File

@ -30,9 +30,9 @@
</ng-container>
</ng-template>
<ng-template #deviceFilterPanel>
<form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()">
<form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
<ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
<div class="tb-panel-actions flex flex-row justify-end items-center">
<button type="button"
mat-button
(click)="cancel()">
@ -48,7 +48,7 @@
</form>
</ng-template>
<ng-template #deviceFilter>
<div fxLayout="column" fxLayoutGap="16px" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
<div class="flex flex-col gap-4" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
<tb-device-profile-autocomplete
subscriptSizing="dynamic"
formControlName="deviceProfileId"

6
ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
View File

@ -15,10 +15,10 @@
limitations under the License.
-->
<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
<mat-toolbar color="primary">
<h2 translate>{{ translations.add }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<div [tb-help]="helpLinkId()"></div>
<button mat-icon-button
(click)="cancel()"
@ -32,7 +32,7 @@
<div mat-dialog-content>
<tb-anchor #entityDetailsForm></tb-anchor>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
cdkFocusInitial

153
ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
View File

@ -34,18 +34,18 @@
</mat-drawer>
<mat-drawer-content>
<div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxLayout="column" class="tb-entity-table-content tb-outlined-border">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
<div class="tb-entity-table-content tb-outlined-border flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
<div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
<span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
<tb-anchor #entityTableHeader></tb-anchor>
<tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
(ngModelChange)="onTimewindowChange()"
asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
</div>
<span fxFlex></span>
<div [fxShow]="addEnabled()">
<span class="flex-1"></span>
<div [class.!hidden]="!addEnabled()">
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
(click)="addEntity($event)"
@ -56,7 +56,7 @@
<ng-template #addActions>
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
[fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
[class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
matTooltipPosition="above">
@ -72,7 +72,7 @@
<mat-menu #addActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
[disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()"
[class.!hidden]="!actionDescriptor.isEnabled()"
(click)="actionDescriptor.onAction($event)">
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.name }}</span>
@ -82,7 +82,7 @@
</ng-template>
</div>
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
[class.!hidden]="!actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above"
(click)="actionDescriptor.onAction($event)">
@ -101,14 +101,14 @@
</button>
</div>
</mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">
<button mat-icon-button
matTooltip="{{ translations.search | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label>
<input #searchInput matInput
[formControl]="textSearch"
@ -121,14 +121,14 @@
</button>
</div>
</mat-toolbar>
<mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
<mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">
<span class="tb-entity-table-info">
{{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
</span>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
[class.!hidden]="!actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above"
(click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
@ -136,7 +136,7 @@
</button>
</div>
</mat-toolbar>
<div fxFlex class="table-container">
<div class="table-container flex-1">
<table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky>
@ -148,23 +148,23 @@
</mat-header-cell>
<mat-cell *matCellDef="let entity">
<mat-checkbox (click)="$event.stopPropagation()"
[fxShow]="entitiesTableConfig.entitySelectionEnabled(entity)"
[class.!hidden]="!entitiesTableConfig.entitySelectionEnabled(entity)"
(change)="$event ? dataSource.selection.toggle(entity) : null"
[checked]="dataSource.selection.isSelected(entity)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
<mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
[fxHide.lt-lg]="column.mobileHide"
*matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
<mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
[class.lt-lg:!hidden]="column.mobileHide"
*matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
{{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
<mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
[fxHide.lt-lg]="column.mobileHide"
<mat-cell [class.mat-number-cell]="column.isNumberColumn"
[class.lt-lg:!hidden]="column.mobileHide"
*matCellDef="let entity; let row = index"
[matTooltip]="cellTooltip(entity, column, row)"
matTooltipPosition="above"
[ngStyle]="cellStyle(entity, column, row)">
[style]="cellStyle(entity, column, row)">
<ng-container [ngSwitch]="column.type">
<ng-template [ngSwitchCase]="'link'">
<a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
@ -183,7 +183,7 @@
<ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
<tb-copy-button
[disabled]="isLoading$ | async"
[fxShow]="column.actionCell.isEnabled(entity)"
[class.!hidden]="!column.actionCell.isEnabled(entity)"
[copyText]="column.actionCell.onAction(null, entity)"
tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
tooltipPosition="above"
@ -193,11 +193,11 @@
</ng-template>
<ng-template ngSwitchDefault>
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="column.actionCell.isEnabled(entity)"
[class.!hidden]="!column.actionCell.isEnabled(entity)"
matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
matTooltipPosition="above"
(click)="column.actionCell.onAction($event, entity)">
<tb-icon [ngStyle]="column.actionCell.style">
<tb-icon [style]="column.actionCell.style">
{{column.actionCell.icon}}
</tb-icon>
</button>
@ -207,74 +207,83 @@
</mat-cell>
</ng-container>
<ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">
<mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
<mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
<mat-cell *matCellDef="let entity; let row = index"
[ngStyle]="cellStyle(entity, column, row)">
[style]="cellStyle(entity, column, row)">
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="column.actionDescriptor.isEnabled(entity)"
[class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
matTooltipPosition="above"
(click)="column.actionDescriptor.onAction($event, entity)">
<tb-icon [ngStyle]="column.actionDescriptor.style">
<tb-icon [style]="column.actionDescriptor.style">
{{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
</tb-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
maxWidth: (cellActionDescriptors.length * 48) + 'px',
width: (cellActionDescriptors.length * 48) + 'px' }">
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
<mat-header-cell *matHeaderCellDef>
<ng-container *ngIf="cellActionDescriptors.length">
<div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;">
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
</div>
<div class="lt-lg:!hidden"
[style.width]="(cellActionDescriptors.length * 48) + 'px'"
[style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
[style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
</div>
</ng-container>
</mat-header-cell>
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
maxWidth: (cellActionDescriptors.length * 48) + 'px',
width: (cellActionDescriptors.length * 48) + 'px' }">
<div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
*ngFor="let actionDescriptor of cellActionDescriptors"
matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
matTooltipPosition="above"
(click)="actionDescriptor.onAction($event, entity)">
<tb-icon [ngStyle]="actionDescriptor.style">
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon>
</button>
</div>
<div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
<button mat-icon-button
(click)="$event.stopPropagation()"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
[disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled(entity)"
<mat-cell *matCellDef="let entity">
<ng-container *ngIf="cellActionDescriptors.length">
<div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row justify-end items-stretch"
[style.width]="(cellActionDescriptors.length * 48) + 'px'"
[style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
[style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
<button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
*ngFor="let actionDescriptor of cellActionDescriptors"
matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
matTooltipPosition="above"
(click)="actionDescriptor.onAction($event, entity)">
<tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
<tb-icon [style]="actionDescriptor.style">
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon>
<span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
</button>
</mat-menu>
</div>
</div>
<div [class.!hidden]="cellActionDescriptors.length === 1" class="gt-md:!hidden">
<button mat-icon-button
(click)="$event.stopPropagation()"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
[disabled]="isLoading$ | async"
[class.!hidden]="!actionDescriptor.isEnabled(entity)"
(click)="actionDescriptor.onAction($event, entity)">
<tb-icon matMenuItemIcon [style]="actionDescriptor.style">
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon>
<span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
</button>
</mat-menu>
</div>
</ng-container>
</mat-cell>
</ng-container>
<mat-header-row [ngClass]="{'mat-row-select': selectionEnabled}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row [fxShow]="!dataSource.dataLoading"
[ngClass]="{'mat-row-select': selectionEnabled,
'mat-selected': dataSource.selection.isSelected(entity),
'tb-current-entity': dataSource.isCurrentEntity(entity),
'tb-pointer': entitiesTableConfig.rowPointer}"
<mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row [class.!hidden]="dataSource.dataLoading"
[class.mat-row-select]="selectionEnabled"
[class.mat-selected]="dataSource.selection.isSelected(entity)"
[class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
[class.tb-pointer]="entitiesTableConfig.rowPointer"
*matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
</table>
<span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
fxLayoutAlign="center center"
class="no-data-found">{{ translations.noEntities | translate }}</span>
<span [fxShow]="dataSource.dataLoading"
fxLayoutAlign="center center"
class="no-data-found">{{ 'common.loading' | translate }}</span>
<span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
<span [class.!hidden]="!dataSource.dataLoading"
class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
</div>
<mat-divider *ngIf="displayPagination"></mat-divider>
<mat-paginator *ngIf="displayPagination"

Write Preview
Loading…
Cancel
Save