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

Flex layout replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-15 13:10:46 +03:00
parent fe135b32f7
commit 8ab2c9cd20
6 changed files with 69 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<form fxLayout="column" fxFlex class="mat-content mat-padding" (ngSubmit)="update()"> <form class="mat-content mat-padding flex-1 flex flex-col" (ngSubmit)="update()">
<div class="tb-form-panel no-padding"> <div class="tb-form-panel no-padding">
<div class="tb-form-row column-xs"> <div class="tb-form-row column-xs">
<div class="fixed-title-width" translate>widgets.notification.notification-types</div> <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
@ -54,14 +54,14 @@
</div> </div>
</div> </div>
<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" <button type="button"
mat-button mat-button
(click)="reset()" (click)="reset()"
color="primary"> color="primary">
{{ 'action.reset' | translate }} {{ 'action.reset' | translate }}
</button> </button>
<span fxFlex></span> <span class="flex-1"></span>
<button type="button" <button type="button"
(click)="cancel()" (click)="cancel()"
mat-button> mat-button>

2
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
View File

@ -46,7 +46,7 @@
<ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal || <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
layout === valueCardLayout.horizontal_reversed ? layout : ''"> layout === valueCardLayout.horizontal_reversed ? layout : ''">
<ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container> <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
<div fxFlex></div> <div class="flex-1"></div>
<ng-container *ngTemplateOutlet="valueTpl"></ng-container> <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
</ng-template> </ng-template>
</ng-container> </ng-container>

6
ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<div fxLayout="column" class="mat-content mat-padding"> <div class="mat-content mat-padding flex flex-col">
<mat-form-field *ngIf="settings.showTemplate" class="mat-block"> <mat-form-field *ngIf="settings.showTemplate" class="mat-block">
<input readonly [ngModel]="model.chosenLabel" matInput type="text"> <input readonly [ngModel]="model.chosenLabel" matInput type="text">
</mat-form-field> </mat-form-field>
@ -25,8 +25,8 @@
[singleDatePicker]="settings.onePanel" [singleDatePicker]="settings.onePanel"
[autoApply]="true" (choosedDate)="choosedDate($event)"> [autoApply]="true" (choosedDate)="choosedDate($event)">
</ngx-daterangepicker-material> </ngx-daterangepicker-material>
<div class="tb-panel-actions" fxLayout="row" *ngIf="!settings.autoConfirm"> <div class="tb-panel-actions flex flex-row" *ngIf="!settings.autoConfirm">
<span fxFlex></span> <span class="flex-1"></span>
<button mat-button mat-raised-button color="primary" <button mat-button mat-raised-button color="primary"
type="button" (click)="apply()"> type="button" (click)="apply()">
{{ 'action.ok' | translate }} {{ 'action.ok' | translate }}

12
ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
View File

@ -16,8 +16,10 @@
--> -->
<div class="date-range-navigator" <div class="date-range-navigator"
[ngClass]="{'short-mode':ctx.width < 400, 'labels-hidden': settings.hideLabels, 'long-mode': ctx.width >= 400}"> [class.short-mode]="ctx.width < 400"
<mat-form-field class="mat-block" [fxHide]="settings.hidePicker" (click)="openNavigatorPanel($event)"> [class.labels-hidden]="settings.hideLabels"
[class.long-mode]="ctx.width >= 400">
<mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
<mat-label *ngIf="!settings.hideLabels" translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label> <mat-label *ngIf="!settings.hideLabels" translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
<mat-select #datePicker [ngModel]="advancedModel.chosenLabel"> <mat-select #datePicker [ngModel]="advancedModel.chosenLabel">
<mat-option [value]="advancedModel.chosenLabel"> <mat-option [value]="advancedModel.chosenLabel">
@ -25,7 +27,7 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="mat-block" [fxHide]="settings.hideInterval"> <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
<mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Interval</mat-label> <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Interval</mat-label>
<mat-select [(ngModel)]="selectedDateInterval" (ngModelChange)="changeInterval()"> <mat-select [(ngModel)]="selectedDateInterval" (ngModelChange)="changeInterval()">
<mat-option *ngIf="customInterval" [value]="customInterval.ts"> <mat-option *ngIf="customInterval" [value]="customInterval.ts">
@ -37,11 +39,11 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div class="drn__element step" [fxHide]="settings.hideStepSize"> <div class="drn__element step" [class.!hidden]="settings.hideStepSize">
<button mat-icon-button (click)="goBack()"> <button mat-icon-button (click)="goBack()">
<mat-icon>keyboard_arrow_left</mat-icon> <mat-icon>keyboard_arrow_left</mat-icon>
</button> </button>
<mat-form-field class="mat-block" fxFlex.gt-sm> <mat-form-field class="mat-block gt-sm:flex-1">
<mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Step size</mat-label> <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Step size</mat-label>
<mat-select [(ngModel)]="selectedStepSize"> <mat-select [(ngModel)]="selectedStepSize">
<mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts"> <mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts">

8
ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
View File

@ -16,15 +16,15 @@
--> -->
<div class="tb-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}"> <div class="tb-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
<div fxFlex fxLayout="column" class="tb-absolute-fill"> <div class="tb-absolute-fill flex-1 flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<button mat-icon-button <button mat-icon-button
matTooltip="{{ 'action.search' | translate }}" matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<mat-form-field fxFlex> <mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label> <mat-label>&nbsp;</mat-label>
<input #searchInput matInput <input #searchInput matInput
[formControl]="textSearch" [formControl]="textSearch"
@ -37,7 +37,7 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<div fxFlex class="tb-entities-nav-tree-panel"> <div class="tb-entities-nav-tree-panel flex-1">
<tb-nav-tree <tb-nav-tree
[loadNodes]="loadNodes" [loadNodes]="loadNodes"
[onNodeSelected]="onNodeSelected" [onNodeSelected]="onNodeSelected"

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

@ -16,15 +16,15 @@
--> -->
<div class="tb-table-widget tb-absolute-fill"> <div class="tb-table-widget tb-absolute-fill">
<div fxFlex fxLayout="column" class="tb-absolute-fill"> <div class="tb-absolute-fill flex-1 flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<button mat-icon-button <button mat-icon-button
matTooltip="{{ 'action.search' | translate }}" matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<mat-form-field fxFlex> <mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label> <mat-label>&nbsp;</mat-label>
<input #searchInput matInput <input #searchInput matInput
[formControl]="textSearch" [formControl]="textSearch"
@ -37,71 +37,75 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<div fxFlex class="table-container"> <div class="table-container flex-1">
<table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId" <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear> matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
<ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;"> <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
<mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell> <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
<mat-cell *matCellDef="let entity; let row = index" <mat-cell *matCellDef="let entity; let row = index"
[innerHTML]="cellContent(entity, column, row)" [innerHTML]="cellContent(entity, column, row)"
[ngStyle]="cellStyle(entity, column, row)" [style]="cellStyle(entity, column, row)"
(click)="onCellClick($event, entity, column, $index)" (click)="onCellClick($event, entity, column, $index)"
[class.tb-pointer]="columnHasCellClick($index)"> [class.tb-pointer]="columnHasCellClick($index)">
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction"> <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px', <mat-header-cell *matHeaderCellDef>
maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px', <ng-container *ngIf="entityDatasource.countCellButtonAction">
width: (entityDatasource.countCellButtonAction * 48) + 'px' }"> <div class="gt-md:!hidden" style="min-width: 48px;">
</div>
<div class="lt-lg:!hidden"
[style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
</div>
</ng-container>
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px', <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)">
maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px', <ng-container *ngIf="entityDatasource.countCellButtonAction">
width: (entityDatasource.countCellButtonAction * 48) + 'px' }"> <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
<div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
<ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="actionDescriptor.icon"
matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above"
(click)="onActionButtonClick($event, entity, actionDescriptor)">
<tb-icon>{{actionDescriptor.icon}}</tb-icon>
</button>
</ng-container>
</div>
<div fxHide [fxShow.lt-lg]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
<button mat-icon-button
(click)="$event.stopPropagation(); ctx.detectChanges();"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId"> <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<button mat-menu-item *ngIf="actionDescriptor.icon" <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
[disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="actionDescriptor.icon"
matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above"
(click)="onActionButtonClick($event, entity, actionDescriptor)"> (click)="onActionButtonClick($event, entity, actionDescriptor)">
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon> <tb-icon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.displayName }}</span>
</button> </button>
</ng-container> </ng-container>
</mat-menu> </div>
</div> <div [class.!hidden]="!showCellActionsMenu || entityDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="entity.hasActions">
<button mat-icon-button
(click)="$event.stopPropagation(); ctx.detectChanges();"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
<button mat-menu-item *ngIf="actionDescriptor.icon"
[disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, entity, actionDescriptor)">
<tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.displayName }}</span>
</button>
</ng-container>
</mat-menu>
</div>
</ng-container>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
<mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity), <mat-row [class.tb-current-entity]="entityDatasource.isCurrentEntity(entity)"
'invisible': entityDatasource.dataLoading, [class.invisible]="entityDatasource.dataLoading"
'tb-pointer': hasRowAction}" [class.tb-pointer]="hasRowAction"
*matRowDef="let entity; columns: displayedColumns; let row = index" *matRowDef="let entity; columns: displayedColumns; let row = index"
[ngStyle]="rowStyle(entity, row)" [style]="rowStyle(entity, row)"
(click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row> (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
</table> </table>
<span [fxShow]="(entityDatasource.isEmpty() | async) && !entityDatasource.dataLoading" <span [class.!hidden]="(entityDatasource.isEmpty() | async) === false || entityDatasource.dataLoading"
fxLayoutAlign="center center" class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
class="no-data-found">{{ noDataDisplayMessageText }}</span> <span [class.!hidden]="!entityDatasource.dataLoading"
<span [fxShow]="entityDatasource.dataLoading" class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
fxLayoutAlign="center center"
class="no-data-found">{{ 'common.loading' | translate }}</span>
</div> </div>
<mat-divider *ngIf="displayPagination"></mat-divider> <mat-divider *ngIf="displayPagination"></mat-divider>
<mat-paginator *ngIf="displayPagination" <mat-paginator *ngIf="displayPagination"