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

UI: Refactoring for new style

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-07-28 18:32:36 +03:00
parent a659d1b7e6
commit 49b149d484
3 changed files with 56 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
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"> <mat-form-field class="mat-block" appearance="outline">
<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"> <mat-form-field class="mat-block" appearance="outline">
<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"> <mat-form-field class="mat-block" appearance="outline">
<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> <mat-form-field appearance="outline">
<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"> <mat-form-field class="mat-block" appearance="outline">
<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"
@ -172,16 +172,28 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<tb-color-input fxFlex class="input-field"
*ngIf="key.settings.dataKeyValueType === 'color'" <div class="color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
label="{{key.label}}" <div fxFlex fxLayout="row" fxLayoutAlign="start center">
icon="{{key.settings.icon}}" <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
[required]="key.settings.required" <mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
[colorClearButton]="true" <ng-template #customToggleIcon>
[requiredText]="getErrorMessageText(key.settings, 'required')" <img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
openOnInput </ng-template>
formControlName="{{key.formId}}"> </ng-container>
</tb-color-input> {{key.label}}
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<mat-divider vertical></mat-divider>
<tb-color-input asBoxInput
[required]="key.settings.required"
[requiredText]="getErrorMessageText(key.settings, 'required')"
(colorChanged)="inputChanged(source, key)"
openOnInput
formControlName="{{key.formId}}">
</tb-color-input>
</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

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

@ -21,7 +21,7 @@
flex-direction: column; flex-direction: column;
.tb-multiple-input-container { .tb-multiple-input-container {
padding: 0 8px; padding: 8px 8px 0;
flex: 1 1 100%; flex: 1 1 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -37,6 +37,30 @@
} }
} }
.color-picker-input {
height: 56px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 7px 16px 7px 12px;
margin: 0 10px 22px 0;
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 6px;
.mat-icon, img {
margin-right: 5px;
}
.mat-divider-vertical {
height: 56px;
margin-top: -7px;
margin-bottom: -7px;
border-right-color: rgba(0, 0, 0, 0.4);
}
}
.input-field { .input-field {
padding-right: 10px; padding-right: 10px;

5
ui-ngx/src/app/shared/components/color-input.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
@ -91,6 +91,8 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
@Input() @Input()
disabled: boolean; disabled: boolean;
@Output() colorChanged: EventEmitter<any> = new EventEmitter();
private modelValue: string; private modelValue: string;
private propagateChange = null; private propagateChange = null;
@ -150,6 +152,7 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
if (this.modelValue !== color) { if (this.modelValue !== color) {
this.modelValue = color; this.modelValue = color;
this.propagateChange(this.modelValue); this.propagateChange(this.modelValue);
this.colorChanged.emit(color);
} }
} }