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

UI: Improve multiple widget input layout

Browse Source
This commit is contained in:
Igor Kulikov 2023-09-07 09:48:33 +03:00
parent 4eb1987e1d
commit ac6717b99f
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@
<div *ngFor="let key of visibleKeys(source)" <div *ngFor="let key of visibleKeys(source)"
[ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}"> [ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}">
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'"> <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'">
<mat-form-field class="mat-block" appearance="outline"> <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
<mat-label>{{key.label}}</mat-label> <mat-label>{{key.label}}</mat-label>
<input matInput <input matInput
formControlName="{{key.formId}}" formControlName="{{key.formId}}"
@ -50,7 +50,7 @@
</div> </div>
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' || <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' ||
key.settings.dataKeyValueType === 'integer'"> key.settings.dataKeyValueType === 'integer'">
<mat-form-field class="mat-block" appearance="outline"> <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
<mat-label>{{key.label}}</mat-label> <mat-label>{{key.label}}</mat-label>
<input matInput <input matInput
formControlName="{{key.formId}}" formControlName="{{key.formId}}"
@ -86,7 +86,7 @@
</mat-checkbox> </mat-checkbox>
</div> </div>
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'JSON'"> <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'JSON'">
<mat-form-field class="mat-block" appearance="outline"> <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
<mat-label>{{key.label}}</mat-label> <mat-label>{{key.label}}</mat-label>
<input <input
matInput matInput
@ -134,7 +134,7 @@
<div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') || <div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') ||
(key.settings.dataKeyValueType === 'date') || (key.settings.dataKeyValueType === 'date') ||
(key.settings.dataKeyValueType === 'time')" fxLayout="column"> (key.settings.dataKeyValueType === 'time')" fxLayout="column">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>{{key.label}}</mat-label> <mat-label>{{key.label}}</mat-label>
<mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}" <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
@ -155,7 +155,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'select'"> <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'select'">
<mat-form-field class="mat-block" appearance="outline"> <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
<mat-label>{{key.label}}</mat-label> <mat-label>{{key.label}}</mat-label>
<mat-select formControlName="{{key.formId}}" <mat-select formControlName="{{key.formId}}"
[required]="key.settings.required" [required]="key.settings.required"
@ -176,7 +176,7 @@
<div class="tb-form-row space-between color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'"> <div class="tb-form-row space-between color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
<div class="label-container"> <div class="label-container">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon"> <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon> <tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon>
<ng-template #customToggleIcon> <ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon"> <img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template> </ng-template>