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)"
[ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}">
<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>
<input matInput
formControlName="{{key.formId}}"
@ -50,7 +50,7 @@
</div>
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' ||
key.settings.dataKeyValueType === 'integer'">
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" appearance="outline">
<mat-label>{{key.label}}</mat-label>
<input matInput
formControlName="{{key.formId}}"
@ -86,7 +86,7 @@
</mat-checkbox>
</div>
<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>
<input
matInput
@ -134,7 +134,7 @@
<div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') ||
(key.settings.dataKeyValueType === 'date') ||
(key.settings.dataKeyValueType === 'time')" fxLayout="column">
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>{{key.label}}</mat-label>
<mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
@ -155,7 +155,7 @@
</mat-form-field>
</div>
<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-select formControlName="{{key.formId}}"
[required]="key.settings.required"
@ -172,16 +172,28 @@
</mat-error>
</mat-form-field>
</div>
<tb-color-input fxFlex class="input-field"
*ngIf="key.settings.dataKeyValueType === 'color'"
label="{{key.label}}"
icon="{{key.settings.icon}}"
[required]="key.settings.required"
[colorClearButton]="true"
[requiredText]="getErrorMessageText(key.settings, 'required')"
openOnInput
formControlName="{{key.formId}}">
</tb-color-input>
<div class="color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template>
</ng-container>
{{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>
</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;
.tb-multiple-input-container {
padding: 0 8px;
padding: 8px 8px 0;
flex: 1 1 100%;
overflow-x: hidden;
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 {
padding-right: 10px;

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

@ -14,7 +14,7 @@
/// 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 { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@ -91,6 +91,8 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
@Input()
disabled: boolean;
@Output() colorChanged: EventEmitter<any> = new EventEmitter();
private modelValue: string;
private propagateChange = null;
@ -150,6 +152,7 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
if (this.modelValue !== color) {
this.modelValue = color;
this.propagateChange(this.modelValue);
this.colorChanged.emit(color);
}
}