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

Fx flex replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-10 17:28:50 +03:00
parent b48e276f44
commit 1ed0a2c6b5
4 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
View File

@ -17,26 +17,26 @@
-->
<mat-card appearance="outlined" class="settings-card">
<mat-toolbar class="details-toolbar">
<div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="mat-toolbar-tools flex flex-row justify-start items-center gap-2">
<button mat-icon-button
matTooltip="{{ 'action.back' | translate }}"
matTooltipPosition="above"
(click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</button>
<div class="tb-details-title-header" fxLayout="column" fxLayoutAlign="center start">
<div class="tb-details-title-header flex flex-col justify-center items-start">
<div class="tb-details-title tb-ellipsis">{{ headerTitle }}</div>
<div class="tb-details-subtitle tb-ellipsis">{{ headerSubtitle }}</div>
</div>
<div class="tb-help" [tb-help]="helpLinkId()"></div>
<span fxFlex></span>
<section *ngIf="!isReadOnly" fxLayout="row" class="tb-header-button" fxLayoutGap="8px">
<span class="flex-1"></span>
<section *ngIf="!isReadOnly" class="tb-header-button flex flex-row gap-2">
<button [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty"
mat-fab
matTooltip="{{ 'action.apply-changes' | translate }}"
matTooltipPosition="above"
color="accent" class="tb-btn-header"
[ngClass]="{'tb-hide': !isEdit}"
[class.tb-hide]="!isEdit"
(click)="onApplyDetails()">
<mat-icon class="material-icons">done</mat-icon>
</button>
@ -51,8 +51,8 @@
</section>
</div>
</mat-toolbar>
<mat-card-content fxFlex="100">
<mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" [(selectedIndex)]="selectedTab" fxFill>
<mat-card-content class="flex-[1_1_100%]">
<mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
<mat-tab label="{{ 'details.details' | translate }}">
<tb-anchor #entityDetailsForm></tb-anchor>
</mat-tab>

4
ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<tb-details-panel fxFlex
<tb-details-panel class="flex-1"
[headerTitle]="entitiesTableConfig.entityTitle(entity)"
headerSubtitle="{{ translations.details | translate }}"
[isReadOnly]="entitiesTableConfig.detailsReadonly(entity)"
@ -27,7 +27,7 @@
<div class="details-buttons">
<div [tb-help]="helpLinkId()"></div>
</div>
<mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
<mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill flex-1" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
<mat-tab label="{{ 'details.details' | translate }}">
<tb-anchor #entityDetailsForm></tb-anchor>
</mat-tab>

4
ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
View File

@ -15,10 +15,10 @@
limitations under the License.
-->
<div fxLayout="column" class="tb-entity-filter-view">
<div class="tb-entity-filter-view flex flex-col">
<div *ngIf="!filter || !filter.type; else filterView" class="entity-filter-empty" translate>alias.no-entity-filter-specified</div>
<ng-template #filterView>
<div fxLayout="column">
<div class="flex flex-col">
<div class="entity-filter-value">{{ filterDisplayValue }}</div>
</div>
</ng-template>

30
ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div fxLayout="column" [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter flex flex-col">
<mat-form-field class="mat-block">
<mat-label translate>alias.filter-type</mat-label>
<mat-select required formControlName="type">
@ -27,7 +27,7 @@
{{ 'alias.filter-type-required' | translate }}
</mat-error>
</mat-form-field>
<section fxLayout="column" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
<section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
<ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
<tb-entity-select required
useAliasEntityTypes="true"
@ -78,9 +78,9 @@
<input matInput formControlName="stateEntityParamName"
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
</mat-form-field>
<div fxLayout="column">
<div class="flex flex-col">
<label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
<tb-entity-select fxFlex
<tb-entity-select class="flex-1"
useAliasEntityTypes="true"
formControlName="defaultStateEntity">
</tb-entity-select>
@ -192,42 +192,42 @@
entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
entityFilterFormGroup.get('type').value : ''">
<label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
<section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
<section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
<mat-slide-toggle class="root-state-entity-switch"
formControlName="rootStateEntity">
</mat-slide-toggle>
<label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
</section>
<div fxFlex fxLayout="row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
<tb-entity-select fxFlex
<div class="flex-1 flex flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
<tb-entity-select class="flex-1"
required
useAliasEntityTypes="true"
formControlName="rootEntity">
</tb-entity-select>
</div>
<div fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
<div class="flex-1 flex flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
<mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
<mat-label translate>alias.state-entity-parameter-name</mat-label>
<input matInput formControlName="stateEntityParamName"
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
</mat-form-field>
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
<tb-entity-select fxFlex
<tb-entity-select class="flex-1"
useAliasEntityTypes="true"
formControlName="defaultStateEntity">
</tb-entity-select>
</div>
</div>
<div fxFlex fxLayout="row">
<section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
<div class="flex-1 flex flex-row">
<section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
<mat-slide-toggle class="root-state-entity-switch"
formControlName="fetchLastLevelOnly">
</mat-slide-toggle>
<label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
</section>
</div>
<div fxFlex fxLayoutGap="8px" fxLayout="row" fxLayout.xs="column">
<div class="flex-1 flex flex-row xs:flex-col gap-2">
<mat-form-field class="mat-block" style="min-width: 100px;">
<mat-label translate>relation.direction</mat-label>
<mat-select required formControlName="direction">
@ -236,7 +236,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex floatLabel="always" class="mat-block">
<mat-form-field floatLabel="always" class="mat-block flex-1">
<mat-label translate>alias.max-relation-level</mat-label>
<input matInput
type="number"
@ -248,7 +248,7 @@
</div>
<div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>
<tb-relation-type-autocomplete
fxFlex
class="flex-1"
formControlName="relationType">
</tb-relation-type-autocomplete>
</ng-template>