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-16 19:15:53 +03:00
parent e394cb5a43
commit 32d7978c9e
10 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
View File

@ -92,7 +92,7 @@
</ng-container>
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.behavior.default-settings</div>
<tb-get-value-action-settings fxFlex
<tb-get-value-action-settings class="flex-1"
panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
[valueType]="behaviorFormGroup.get('valueType').value"
[trueLabel]="behaviorFormGroup.get('trueLabel').value | customTranslate"
@ -107,7 +107,7 @@
<ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.action">
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.behavior.default-settings</div>
<tb-set-value-action-settings fxFlex
<tb-set-value-action-settings class="flex-1"
panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
[valueType]="behaviorFormGroup.get('valueType').value"
[aliasController]="aliasController"
@ -119,7 +119,7 @@
<ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.widgetAction">
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.behavior.default-settings</div>
<tb-widget-action-settings fxFlex
<tb-widget-action-settings class="flex-1"
panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
[callbacks]="callbacks"
[widgetType]="widgetType.rpc"

7
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
View File

@ -30,7 +30,7 @@
<div cdkDrag [cdkDragDisabled]="!dragEnabled"
[class.tb-draggable-form-table-row]="!disabled"
*ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;">
<tb-scada-symbol-metadata-behavior-row fxFlex
<tb-scada-symbol-metadata-behavior-row class="flex-1"
[index]="$index"
[formControl]="behaviorControl"
[aliasController]="aliasController"
@ -42,7 +42,7 @@
*ngIf="!disabled"
type="button"
cdkDragHandle
[ngClass]="{'tb-hidden': !dragEnabled}"
[class.tb-hidden]="!dragEnabled"
matTooltip="{{ 'action.drag' | translate }}"
matTooltipPosition="above">
<mat-icon>drag_indicator</mat-icon>
@ -60,6 +60,5 @@
</div>
<ng-template #noBehaviors>
<span fxLayoutAlign="center center"
class="tb-prompt">{{ 'scada.behavior.no-behaviors' | translate }}</span>
<span class="tb-prompt flex items-center justify-center">{{ 'scada.behavior.no-behaviors' | translate }}</span>
</ng-template>

5
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
View File

@ -24,7 +24,7 @@
</div>
<div *ngIf="tagsFormArray().controls.length; else noTags" class="tb-form-table-body">
<div *ngFor="let tagControl of tagsFormArray().controls; trackBy: trackByTag; let $index = index; let $last = last">
<tb-scada-symbol-metadata-tag fxFlex
<tb-scada-symbol-metadata-tag class="flex-1"
[elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"
[clickActionFunctionCompleter]="clickActionFunctionCompleter"
[formControl]="tagControl">
@ -35,6 +35,5 @@
</div>
</div>
<ng-template #noTags>
<span fxLayoutAlign="center center"
class="tb-prompt">{{ 'scada.tag.no-tags' | translate }}</span>
<span class="tb-prompt flex items-center justify-center">{{ 'scada.tag.no-tags' | translate }}</span>
</ng-template>

20
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
View File

@ -25,17 +25,17 @@
</div>
</div>
<div [formGroup]="metadataFormGroup" class="tb-scada-symbol-metadata-content">
<div [fxShow]="selectedOption === 'general'" class="mat-content">
<div [class.!hidden]="selectedOption !== 'general'" class="mat-content">
<div class="tb-form-panel">
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.title</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<input matInput required formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.description</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<textarea matInput
formControlName="description"
rows="2"></textarea>
@ -43,8 +43,8 @@
</div>
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.search-tags</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<tb-string-items-list fxFlex
<div class="flex flex-1 flex-row items-center justify-start">
<tb-string-items-list class="flex-1"
style="display: flex;"
formControlName="searchTags"
appearance="outline"
@ -54,7 +54,7 @@
</div>
<div class="tb-form-row">
<div class="fixed-title-width" translate>scada.widget-size</div>
<div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="flex flex-1 flex-row items-center justify-end gap-2">
<div class="tb-small-label">{{ 'scada.cols' | translate }}</div>
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
<input matInput formControlName="widgetSizeX" required
@ -71,7 +71,7 @@
</div>
<div class="tb-form-panel stroked">
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex flex-row flex-wrap">
<mat-panel-title>
{{ 'scada.state-render-function' | translate }}
</mat-panel-title>
@ -89,7 +89,7 @@
</div>
</div>
</div>
<div [fxShow]="selectedOption === 'tags'" class="mat-content overflow-hidden">
<div [class.!hidden]="selectedOption !== 'tags'" class="mat-content overflow-hidden">
<tb-scada-symbol-metadata-tags
#symbolMetadataTags
[tags]="tags"
@ -98,14 +98,14 @@
formControlName="tags">
</tb-scada-symbol-metadata-tags>
</div>
<div [fxShow]="selectedOption === 'behavior'" class="mat-content overflow-hidden">
<div [class.!hidden]="selectedOption !== 'behavior'" class="mat-content overflow-hidden">
<tb-scada-symbol-metadata-behaviors
formControlName="behavior"
[aliasController]="aliasController"
[callbacks]="callbacks">
</tb-scada-symbol-metadata-behaviors>
</div>
<div [fxShow]="selectedOption === 'properties'" class="mat-content overflow-hidden">
<div [class.!hidden]="selectedOption !== 'properties'" class="mat-content overflow-hidden">
<tb-scada-symbol-metadata-properties
formControlName="properties">
</tb-scada-symbol-metadata-properties>

7
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
View File

@ -30,7 +30,7 @@
<div cdkDrag [cdkDragDisabled]="!dragEnabled"
[class.tb-draggable-form-table-row]="!disabled"
*ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;">
<tb-scada-symbol-metadata-property-row fxFlex
<tb-scada-symbol-metadata-property-row class="flex-1"
[index]="$index"
[booleanPropertyIds]="booleanPropertyIds"
[formControl]="propertyControl"
@ -41,7 +41,7 @@
*ngIf="!disabled"
type="button"
cdkDragHandle
[ngClass]="{'tb-hidden': !dragEnabled}"
[class.tb-hidden]="!dragEnabled"
matTooltip="{{ 'action.drag' | translate }}"
matTooltipPosition="above">
<mat-icon>drag_indicator</mat-icon>
@ -59,6 +59,5 @@
</div>
<ng-template #noProperties>
<span fxLayoutAlign="center center"
class="tb-prompt">{{ 'scada.property.no-properties' | translate }}</span>
<span class="tb-prompt flex items-center justify-center">{{ 'scada.property.no-properties' | translate }}</span>
</ng-template>

4
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
View File

@ -83,7 +83,7 @@
</div>
<div *ngIf="propertyFormGroup.get('type').value === ScadaSymbolPropertyType.number" class="tb-form-row space-between">
<div translate>scada.property.number-settings</div>
<div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="flex flex-1 flex-row items-center justify-end gap-2">
<div class="tb-small-label" translate>scada.property.min</div>
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
<input matInput formControlName="min"
@ -110,7 +110,7 @@
</div>
<div class="tb-form-panel stroked">
<mat-expansion-panel class="tb-settings">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex flex-row flex-wrap">
<mat-panel-title>
{{ 'scada.property.advanced-ui-settings' | translate }}
</mat-panel-title>

10
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
View File

@ -15,11 +15,11 @@
limitations under the License.
-->
<div class="tb-scada-symbol-editor-shape" [fxShow]="editorMode === 'svg'" #scadaSymbolShape></div>
<div class="tb-scada-symbol-editor-tooltips" [fxShow]="editorMode === 'svg'" #tooltipsContainer>
<div class="tb-scada-symbol-editor-shape" [class.!hidden]="editorMode !== 'svg'" #scadaSymbolShape></div>
<div class="tb-scada-symbol-editor-tooltips" [class.!hidden]="editorMode !== 'svg'" #tooltipsContainer>
<tb-anchor #tooltipsContainerComponent></tb-anchor>
</div>
<div class="tb-scada-symbol-editor-svg-xml" [fxShow]="editorMode === 'xml'">
<div class="tb-scada-symbol-editor-svg-xml" [class.!hidden]="editorMode !== 'xml'">
<tb-svg-xml [formControl]="svgContentFormControl"
fillHeight
noLabel>
@ -27,7 +27,7 @@
</div>
<div class="tb-scada-symbol-editor-buttons">
<div class="tb-scada-symbol-editor-view-buttons">
<div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [fxShow]="editorMode === 'svg'">
<div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [class.!hidden]="editorMode !== 'svg'">
<button mat-icon-button
[disabled]="zoomInDisabled"
(click)="zoomIn()"
@ -43,7 +43,7 @@
<mat-icon>remove</mat-icon>
</button>
</div>
<div *ngIf="displayShowHidden" [fxShow]="editorMode === 'svg'" class="tb-primary-fill">
<div *ngIf="displayShowHidden" [class.!hidden]="editorMode !== 'svg'" class="tb-primary-fill">
<button mat-icon-button
(click)="toggleShowHidden()"
matTooltip="{{ (showHiddenElements ? 'scada.hide-hidden-elements' : 'scada.show-hidden-elements') | translate }}"

22
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
View File

@ -15,21 +15,21 @@
limitations under the License.
-->
<div class="tb-scada-symbol-editor mat-content" fxLayout="column">
<section class="tb-scada-symbol-editor-container" fxFlex fxLayout="column">
<div class="tb-scada-symbol-editor-layout" fxFlex fxLayout="row">
<mat-drawer-container style="width: 100%; height: 100%;">
<div class="tb-scada-symbol-editor mat-content flex flex-col">
<section class="tb-scada-symbol-editor-container flex flex-1 flex-col">
<div class="tb-scada-symbol-editor-layout flex flex-1 flex-row">
<mat-drawer-container class="size-full">
<mat-drawer class="tb-scada-symbol-editor-details-drawer mat-elevation-z4"
disableClose="true"
mode="side"
opened
position="end">
<tb-details-panel fxFlex
<tb-details-panel class="flex-1"
[isReadOnly]="true"
[showCloseDetails]="false"
headerHeightPx="64"
headerTitle="{{symbolData?.imageResource?.title}}">
<div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<div class="details-buttons flex flex-row items-center justify-start gap-4">
<div tb-help="scadaSymbolDev"></div>
<button mat-stroked-button
[disabled]="scadaSymbolFormGroup.invalid"
@ -77,7 +77,7 @@
</div>
</div>
</div>
<div [fxShow]="!previewMode" [formGroup]="scadaSymbolFormGroup">
<div [class.!hidden]="previewMode" [formGroup]="scadaSymbolFormGroup">
<tb-scada-symbol-metadata
#symbolMetadata
[tags]="tags"
@ -85,7 +85,7 @@
[callbacks]="widgetActionCallbacks"
formControlName="metadata">
<div class="tb-scada-symbol-metadata-header-prefix">
<button fxHide.gt-sm
<button class="gt-sm:!hidden"
[disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
mat-button color="primary"
(click)="enterPreviewMode()">
@ -93,15 +93,15 @@
{{ 'scada.preview' | translate }}
</button>
</div>
<div fxFlex.lt-md class="tb-scada-symbol-metadata-header-suffix" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="12px">
<button fxHide.lt-md
<div class="tb-scada-symbol-metadata-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
<button class="lt-md:!hidden"
[disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
mat-button color="primary"
(click)="enterPreviewMode()">
<mat-icon>visibility</mat-icon>
{{ 'scada.preview' | translate }}
</button>
<div *ngIf="!readonly" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
<div *ngIf="!readonly" class="flex flex-row items-center justify-start gap-3">
<button [disabled]="!(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
mat-stroked-button color="primary"
(click)="onRevertScadaSymbolConfig()">

26
ui-ngx/src/app/modules/home/pages/security/security.component.html
View File

@ -15,12 +15,12 @@
limitations under the License.
-->
<div class="profile-container" fxLayout="column" fxLayoutGap="8px">
<mat-card appearance="outlined" class="profile-card" fxLayout="column">
<div class="profile-container flex flex-col gap-2">
<mat-card appearance="outlined" class="profile-card flex flex-col">
<mat-card-title style="margin-bottom: 8px;">
<span class="mat-headline-5 card-title" translate>profile.jwt-token</span>
</mat-card-title>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div class="flex flex-row items-center justify-between">
<div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div>
<button mat-raised-button
color="primary"
@ -30,16 +30,16 @@
</button>
</div>
</mat-card>
<mat-card appearance="outlined" class="profile-card" fxLayout="column">
<mat-card appearance="outlined" class="profile-card flex flex-col">
<div class="change-password" tb-toast toastTarget="changePassword">
<form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px" fxLayoutGap.xs="0">
<div fxFlex="290px" fxFlex.sm="250px" fxFlex.xs="100">
<div class="flex flex-row gap-6.25 xs:flex-col xs:gap-0">
<div class="min-w-72.5 max-w-72.5 flex-1 basis-72.5 xs:min-w-0 xs:max-w-full xs:basis-full sm:min-w-62.5 sm:max-w-62.5 sm:basis-62.5">
<h3 class="card-title" translate>profile.change-password</h3>
<mat-form-field class="mat-block same-color" appearance="fill" color="primary">
<mat-label translate>profile.current-password</mat-label>
<input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/>
<tb-toggle-password [fxShow]="changePassword.get('currentPassword').dirty || changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
<tb-toggle-password [class.!hidden]="!changePassword.get('currentPassword').dirty && !changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
<mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')">
{{ 'security.password-requirement.incorrect-password-try-again' | translate }}
</mat-error>
@ -47,7 +47,7 @@
<mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic">
<mat-label translate>login.new-password</mat-label>
<input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/>
<tb-toggle-password [fxShow]="changePassword.get('newPassword').dirty || changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
<tb-toggle-password [class.!hidden]="!changePassword.get('newPassword').dirty && !changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
<mat-hint></mat-hint>
<mat-error *ngIf="changePassword.get('newPassword').errors
&& !changePassword.get('newPassword').hasError('alreadyUsed')
@ -65,20 +65,20 @@
{{ 'security.password-requirement.password-should-not-contain-spaces' | translate }}
</mat-error>
</mat-form-field>
<div fxFlex fxHide fxShow.xs fxLayoutAlign="start center">
<div class="flex flex-1 items-center justify-start gt-xs:!hidden">
<ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
</div>
<mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary">
<mat-label translate>login.new-password-again</mat-label>
<input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/>
<tb-toggle-password [fxShow]="changePassword.get('newPassword2').dirty || changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
<tb-toggle-password [class.!hidden]="!changePassword.get('newPassword2').dirty && !changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
<mat-error *ngIf="changePassword.get('newPassword2').hasError('differencePassword')">
{{ 'security.password-requirement.new-passwords-not-match' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-divider [vertical]="true"></mat-divider>
<div fxFlex fxHide.xs fxLayoutAlign="start start">
<div class="flex flex-1 items-start justify-start xs:!hidden">
<ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
</div>
</div>
@ -125,7 +125,7 @@
</div>
</div>
</ng-template>
<div fxLayout="row" fxLayoutGap="8px" style="margin-top: 18px;" [fxShow]="changePassword.dirty || changePassword.touched">
<div class="flex flex-row gap-2" style="margin-top: 18px;" [class.!hidden]="!changePassword.dirty && !changePassword.touched">
<button mat-button color="primary"
type="button"
(click)="discardChanges(changePasswordForm, $event)"
@ -153,7 +153,7 @@
<ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
<div class="provider">
<h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
<div fxLayout="row" fxLayoutAlign="space-between start">
<div class="flex flex-row items-start justify-between">
<div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
{{ providersData.get(provider).description | translate }}
</div>

15
ui-ngx/tailwind.config.js
View File

@ -82,14 +82,17 @@ module.exports = {
flexBasis: {
'7.5': '1.875rem',
'25': '6.25rem',
'37.5': '9.375rem'
'37.5': '9.375rem',
'62.5': '15.625rem',
'72.5': '18.125rem'
},
flex: {
full: '1 1 100%'
},
gap: {
'0.75': '0.1875rem',
'1.25': '0.3125rem'
'1.25': '0.3125rem',
'6.25': '1.5625rem'
},
minHeight: {
'19': '4.75rem'
@ -97,7 +100,9 @@ module.exports = {
minWidth: {
'7.5': '1.875rem',
'25': '6.25rem',
'37.5': '9.375rem'
'37.5': '9.375rem',
'62.5': '15.625rem',
'72.5': '18.125rem'
},
maxWidth: {
'5%': '5%',
@ -143,7 +148,9 @@ module.exports = {
'11/12': '91.666667%',
'7.5': '1.875rem',
'25': '6.25rem',
'37.5': '9.375rem'
'37.5': '9.375rem',
'62.5': '15.625rem',
'72.5': '18.125rem'
}
},
},