tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Replace image inputs to image gallery inputs.

pull/9542/head
Igor Kulikov 3 years ago
parent
6bd840571c
commit
369390fa91
3 changed files with 14 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
  2. 6
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
  3. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html

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

@ -36,7 +36,7 @@
type="text"
(focus)="key.isFocused = true; focusInputElement($event)"
(blur)="key.isFocused = false; inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
@ -56,7 +56,7 @@
max="{{key.settings.maxValue}}"
(focus)="key.isFocused = true; focusInputElement($event)"
(blur)="key.isFocused = false; inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
@ -82,7 +82,7 @@
(focus)="key.isFocused = true; focusInputElement($event)"
(blur)="key.isFocused = false; inputChanged(source, key)"
/>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'"
@ -131,7 +131,7 @@
{{ getCustomTranslationText(option.label ? option.label : option.value) }}
</mat-option>
</mat-select>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
@ -148,7 +148,7 @@
[readonly]="key.settings.isEditable === 'readonly'"
type="text"
(keydown)="$event.preventDefault();">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matIconPrefix>
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl" matIconPrefix>
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<tb-color-input #colorInput asBoxInput matSuffix
@ -166,7 +166,7 @@
<mat-checkbox *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'"
formControlName="{{key.formId}}"
(change)="inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl">
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<span class="label-wrapper">{{key.label}}</span>
@ -175,7 +175,7 @@
formControlName="{{key.formId}}"
[labelPosition]="key.settings.slideToggleLabelPosition"
(change)="inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<ng-container *ngIf="key.settings.icon || key.settings.customIconUrl">
<ng-container *ngTemplateOutlet="iconPrefix; context: {key: key}"></ng-container>
</ng-container>
<span class="label-wrapper">{{key.label}}</span>
@ -207,8 +207,8 @@
</div>
</form>
<ng-template #iconPrefix let-key="key">
<tb-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</tb-icon>
<tb-icon *ngIf="!key.settings.customIconUrl; else customToggleIcon">{{key.settings.icon}}</tb-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
<img class="mat-icon" [src]="key.settings.customIconUrl | image | async" alt="icon">
</ng-template>
</ng-template>

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

@ -103,8 +103,8 @@ interface MultipleInputWidgetDataKeySettings {
invalidJsonErrorMessage?: string;
useCustomIcon: boolean;
icon: string;
customIcon: string ;
safeCustomIcon?: SafeUrl;
customIcon: string;
customIconUrl?: string;
inputTypeNumber?: boolean;
readOnly?: boolean;
disabledOnCondition?: boolean;
@ -312,7 +312,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
}
if (dataKey.settings.useCustomIcon && isDefinedAndNotNull(dataKey.settings.customIcon)) {
dataKey.settings.safeCustomIcon = this.sanitizer.bypassSecurityTrustUrl(dataKey.settings.customIcon);
dataKey.settings.customIconUrl = dataKey.settings.customIcon;
}
if (dataKey.settings.useGetValueFunction && dataKey.settings.getValueFunctionBody.length) {

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

@ -245,10 +245,10 @@
iconClearButton
formControlName="icon">
</tb-material-icon-select>
<tb-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
<tb-gallery-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
formControlName="customIcon">
</tb-image-input>
</tb-gallery-image-input>
</fieldset>
<fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
<legend class="group-title" translate>widgets.input-widgets.value-conversion-settings</legend>

Write Preview
Loading…
Cancel
Save