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

UI: Minor layout fixes.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-23 19:41:52 +03:00
parent 30e0ef3d15
commit 266b8d8e8b
9 changed files with 36 additions and 26 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/rpc/led-indicator.component.html
View File

@ -16,13 +16,13 @@
-->
<div class="tb-led-indicator flex flex-col">
<div #ledTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
<div #ledTitleContainer class="title-container flex max-h-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
<span #ledTitle class="led-title">{{title}}</span>
</div>
<div class="flex flex-full flex-col items-center justify-center"
[class]="{
'max-w-80%': showTitle,
'max-w-100%': !showTitle
'max-h-80%': showTitle,
'max-h-100%': !showTitle
}"
[style.padding-top]="showTitle ? '5px': '10px'" #ledContainer id="led-container">
<div #led class="led">

6
ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
View File

@ -16,13 +16,13 @@
-->
<div class="tb-round-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
<div #switchTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
<div #switchTitleContainer class="title-container flex max-h-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
<span #switchTitle class="switch-title">{{title}}</span>
</div>
<div #switchContainer class="flex flex-full flex-col items-center justify-center"
[class]="{
'max-w-80%': showTitle,
'max-w-100%': !showTitle
'max-h-80%': showTitle,
'max-h-100%': !showTitle
}"
[style.padding-top]="showTitle ? '5px': '10px'" id="switch-container">
<div #switch class="switch">

6
ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
View File

@ -19,13 +19,13 @@
<div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
<span #switchError class="switch-error">{{ error }}</span>
</div>
<div #switchTitleContainer class="title-container flex max-w-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
<div #switchTitleContainer class="title-container flex max-h-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
<span #switchTitle class="switch-title">{{title}}</span>
</div>
<div #switchContainer class="flex flex-full flex-col items-center justify-center"
[class]="{
'max-w-70%': showTitle,
'max-w-100%': !showTitle
'max-h-70%': showTitle,
'max-h-100%': !showTitle
}"
id="switch-container">
<div #switch class="switch">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
View File

@ -17,7 +17,7 @@
-->
<div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup">
<mat-form-field class="max-w-33% flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="gt-xs:max-w-33% gt-xs:flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="valueSource">
<mat-option [value]="'predefinedValue'">
{{ 'widgets.value-source.predefined-value' | translate }}

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
View File

@ -22,7 +22,7 @@
<fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
<section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.datakey-type</mat-label>
<mat-select formControlName="dataKeyType">
<mat-option [value]="'server'">
@ -36,7 +36,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.datakey-value-type</mat-label>
<mat-select formControlName="dataKeyValueType">
<mat-option [value]="'string'">
@ -79,7 +79,7 @@
{{ 'widgets.input-widgets.value-is-required' | translate }}
</mat-checkbox>
<section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
<mat-select formControlName="isEditable">
<mat-option [value]="'editable'">
@ -93,14 +93,14 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block max-w-50% flex-full">
<mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
<input matInput formControlName="disabledOnDataKey">
</mat-form-field>
</section>
<section *ngIf="!['booleanSwitch', 'booleanCheckbox'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.field-appearance</mat-label>
<mat-select formControlName="appearance">
<mat-option [value]="'fill'">
@ -111,7 +111,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
<mat-select formControlName="subscriptSizing">
<mat-option [value]="'fixed'">

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
View File

@ -62,10 +62,10 @@
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.group-settings</legend>
<section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
<mat-slide-toggle formControlName="showGroupTitle" class="slide-block max-w-30% flex-full">
<mat-slide-toggle formControlName="showGroupTitle" class="slide-block flex-full xs:max-h-30% gt-xs:max-w-30%">
{{ 'widgets.input-widgets.show-group-title' | translate }}
</mat-slide-toggle>
<mat-form-field class="mat-block max-w-70% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-70% gt-xs:max-w-70%">
<mat-label translate>widgets.input-widgets.group-title</mat-label>
<input matInput formControlName="groupTitle">
</mat-form-field>
@ -74,7 +74,7 @@
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.layout</legend>
<section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
<mat-select formControlName="fieldsAlignment">
<mat-option [value]="'row'">
@ -85,17 +85,17 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
<mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.fields-in-row</mat-label>
<input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
</mat-form-field>
</section>
<section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
<mat-form-field class="mat-block max-w-50% flex-full">
<mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.row-gap</mat-label>
<input matInput type="number" min="0" step="1" formControlName="rowGap">
</mat-form-field>
<mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
<mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
<mat-label translate>widgets.input-widgets.column-gap</mat-label>
<input matInput type="number" min="0" step="1" formControlName="columnGap">
</mat-form-field>

2
ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
View File

@ -32,7 +32,7 @@
</ng-template>
<tb-entity-list
required
class="max-w-60% flex-full"
class="flex-full xs:max-h-60% gt-xs:max-w-60%"
formControlName="targets"
subscriptSizing="dynamic"
entityType="{{ entityType.NOTIFICATION_TARGET }}"

6
ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
View File

@ -65,7 +65,7 @@
<form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit" class="flex flex-col">
<div class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block max-w-45% flex-full">
<mat-form-field class="mat-block flex-full gt-xs:max-w-45%">
<mat-label translate>ota-update.title</mat-label>
<input matInput formControlName="title" type="text" required [readonly]="!isAdd">
<mat-error *ngIf="entityForm.get('title').hasError('required')">
@ -131,7 +131,7 @@
</section>
<div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
*ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
<mat-form-field class="mat-block max-w-33% flex-full">
<mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
<mat-label translate>ota-update.checksum-algorithm</mat-label>
<mat-select formControlName="checksumAlgorithm">
<mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
@ -147,7 +147,7 @@
</div>
<section *ngIf="!isAdd">
<div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
<mat-form-field class="mat-block max-w-33% flex-full">
<mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
<mat-label translate>ota-update.file-name</mat-label>
<input matInput formControlName="fileName" type="text">
</mat-form-field>

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

@ -132,6 +132,7 @@ module.exports = {
'90%': '90%',
'92%': '92%',
'95%': '95%',
'100%': '100%',
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
@ -152,6 +153,15 @@ module.exports = {
'37.5': '9.375rem',
'62.5': '15.625rem',
'72.5': '18.125rem'
},
maxHeight: {
'20%': '20%',
'30%': '30%',
'50%': '50%',
'60%': '60%',
'70%': '70%',
'80%': '80%',
'100%': '100%'
}
},
},