From 244f8239baf5af8d6a23b3d557d185b2b6ea922b Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 7 Sep 2023 18:05:08 +0300 Subject: [PATCH] UI: Improve multiple attributes input widget. --- .../translate/missing-translate-handler.ts | 13 +- .../lib/multiple-input-widget.component.html | 330 +++++++++--------- .../lib/multiple-input-widget.component.scss | 73 ++-- .../lib/multiple-input-widget.component.ts | 66 ++-- ...ple-attributes-key-settings.component.html | 31 +- ...tiple-attributes-key-settings.component.ts | 18 +- ...-attributes-widget-settings.component.html | 12 +- ...le-attributes-widget-settings.component.ts | 12 +- .../components/color-input.component.html | 2 +- .../components/color-input.component.ts | 83 +++-- .../assets/locale/locale.constant-en_US.json | 9 + 11 files changed, 370 insertions(+), 279 deletions(-) diff --git a/ui-ngx/src/app/core/translate/missing-translate-handler.ts b/ui-ngx/src/app/core/translate/missing-translate-handler.ts index 229efd8227..4d89e1453d 100644 --- a/ui-ngx/src/app/core/translate/missing-translate-handler.ts +++ b/ui-ngx/src/app/core/translate/missing-translate-handler.ts @@ -21,7 +21,18 @@ export class TbMissingTranslationHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { if (params.key && !params.key.startsWith(customTranslationsPrefix)) { console.warn('Translation for \'' + params.key + '\' doesn\'t exist'); - params.translateService.set(params.key, params.key); + let translations: any; + const parts = params.key.split('.'); + for (let i=parts.length-1; i>=0; i--) { + const newTranslations = {}; + if (i === parts.length-1) { + newTranslations[parts[i]] = params.key; + } else { + newTranslations[parts[i]] = translations; + } + translations = newTranslations; + } + params.translateService.setTranslation(params.translateService.currentLang, translations, true); } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index 8d8b0b55b3..5a873ceb32 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -23,174 +23,164 @@
{{ getGroupTitle(source.datasource) }} -
-
-
- - {{key.label}} - - - {{key.settings.icon}} - - icon - - - - {{ getErrorMessageText(key.settings, 'required') }} - - -
-
- - {{key.label}} - - - {{key.settings.icon}} - - icon - - - - {{ getErrorMessageText(key.settings,'required') }} - - - {{ getErrorMessageText(key.settings,'min') }} - - - {{ getErrorMessageText(key.settings,'max') }} - - -
-
- - {{key.label}} - -
-
- - {{key.label}} - - - {{key.settings.icon}} - - icon - - - - - {{ getErrorMessageText(key.settings,'required') }} - - - {{ getErrorMessageText(key.settings,'invalidJSON') | translate }} - - -
-
- - - {{key.settings.icon}} - - icon - - - {{key.label}} - -
-
- - {{key.label}} - - - - - {{ getErrorMessageText(key.settings, 'required') }} - - - {{ getErrorMessageText(key.settings, 'invalidDate') }} - - -
-
- - {{key.label}} - - - {{ getCustomTranslationText(option.label ? option.label : option.value) }} - - - - {{ getErrorMessageText(key.settings, 'required') }} - - -
- -
-
- - {{key.settings.icon}} - - icon - - - {{key.label}} -
- +
+ + + {{key.label}} + + + + + + {{ getErrorMessageText(key.settings, 'required') }} + + + + {{key.label}} + + + + + + {{ getErrorMessageText(key.settings,'required') }} + + + {{ getErrorMessageText(key.settings,'min') }} + + + {{ getErrorMessageText(key.settings,'max') }} + + + + {{key.label}} + + + + + + + {{ getErrorMessageText(key.settings,'required') }} + + + {{ getErrorMessageText(key.settings,'invalidJSON') | translate }} + + + + {{key.label}} + + + + + {{ getErrorMessageText(key.settings, 'required') }} + + + {{ getErrorMessageText(key.settings, 'invalidDate') }} + + + + {{key.label}} + + + {{ getCustomTranslationText(option.label ? option.label : option.value) }} + + + + + + + {{ getErrorMessageText(key.settings, 'required') }} + + + + {{key.label}} + + + + + -
-
+ + {{ getErrorMessageText(key.settings, 'required') }} + + + + + + + {{key.label}} + + + + + + {{key.label}} + +
@@ -216,3 +206,9 @@ + + {{key.settings.icon}} + + icon + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss index 90ed0d5af3..69e4905f94 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss @@ -38,34 +38,7 @@ } .tb-multiple-input-layout { - display: flex; - flex-direction: row; - align-items: start; - gap: 8px; - } - - .color-picker-input { - padding: 7px 16px 7px 12px; - margin: 0 10px 22px 0; - border-color: rgba(0, 0, 0, 0.4); - - .label-container { - display: flex; - flex-direction: row; - align-items: center; - } - - .mat-icon, img { - margin-right: 5px; - } - } - - .input-field { - padding-right: 10px; - - mat-form-field { - margin-bottom: 5px; - } + display: grid; } .mat-mdc-slide-toggle { @@ -74,17 +47,6 @@ margin-bottom: 8px; } - .date-time-input { - .mat-mdc-form-field { - width: 100%; - margin: 2px 0; - } - } - - .vertical-alignment { - flex-direction: column; - } - &--buttons-container { display: flex; flex-direction: row; @@ -113,18 +75,33 @@ :host ::ng-deep { .tb-multiple-input { - .mat-mdc-slide-toggle .mdc-form-field { - width: 100%; - & > label { - display: flex; - align-items: center; + .mat-mdc-slide-toggle, .mat-mdc-checkbox { + .mdc-form-field { width: 100%; - margin: 0; - .mat-icon { - margin-left: 8px; - margin-right: 8px; + & > label { + display: flex; + align-items: center; + width: 100%; + margin: 0; + .mat-icon { + margin-right: 8px; + } } } } + .mat-mdc-slide-toggle { + .mdc-form-field { + & > label { + .mat-icon { + margin-left: 8px; + } + } + } + } + .color-input { + .mat-mdc-form-field-icon-suffix { + padding: 0 8px 0 4px; + } + } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts index f667c785c1..d4c0ad2630 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts @@ -48,6 +48,7 @@ import { } from '@shared/components/dialog/json-object-edit-dialog.component'; import { MatDialog } from '@angular/material/dialog'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field'; type FieldAlignment = 'row' | 'column'; @@ -55,7 +56,7 @@ type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries'; export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' | 'JSON' | 'booleanCheckbox' | 'booleanSwitch' | 'dateTime' | 'date' | 'time' | 'select' | 'color'; -type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly'; +export type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly'; type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any; type ConvertSetValueFunction = (value: any, originValue: any, ctx: WidgetContext) => any; @@ -71,6 +72,8 @@ interface MultipleInputWidgetSettings { groupTitle: string; fieldsAlignment: FieldAlignment; fieldsInRow: number; + columnGap: number; + rowGap: number; attributesShared?: boolean; } @@ -88,6 +91,8 @@ interface MultipleInputWidgetDataKeySettings { isEditable: MultipleInputWidgetDataKeyEditableType; disabledOnDataKey: string; dataKeyHidden: boolean; + appearance: MatFormFieldAppearance; + subscriptSizing: SubscriptSizing; step?: number; minValue?: number; maxValue?: number; @@ -148,8 +153,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni private isSavingInProgress = false; isVerticalAlignment: boolean; - inputWidthSettings: string; - changeAlignment: boolean; + columns: number; saveButtonLabel: string; resetButtonLabel: string; @@ -228,15 +232,15 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni if (isUndefined(this.settings.fieldsInRow)) { this.settings.fieldsInRow = 2; } - // For backward compatibility - this.isVerticalAlignment = !(this.settings.fieldsAlignment === 'row'); - - if (!this.isVerticalAlignment && this.settings.fieldsInRow) { - this.inputWidthSettings = 100 / this.settings.fieldsInRow + '%'; + if (isUndefined(this.settings.columnGap)) { + this.settings.columnGap = 10; + } + if (isUndefined(this.settings.rowGap)) { + this.settings.rowGap = 5; } - this.updateWidgetDisplaying(); + this.updateColumns(); } private updateDatasources() { @@ -284,6 +288,15 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni dataKey.settings.isEditable = 'editable'; } } + + if (isUndefined(dataKey.settings.appearance)) { + dataKey.settings.appearance = 'outline'; + } + + if (isUndefined(dataKey.settings.subscriptSizing)) { + dataKey.settings.subscriptSizing = 'fixed'; + } + // For backward compatibility if (dataKey.settings.dataKeyValueType === 'select') { @@ -387,12 +400,6 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni } }); } - } else if (key.settings.dataKeyValueType === 'color') { - formControl.valueChanges.pipe( - takeUntil(this.destroy$) - ).subscribe(() => { - this.inputChanged(source, key); - }); } this.multipleInputFormGroup.addControl(key.formId, formControl); } @@ -452,9 +459,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni } if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) { - const conditions = data.filter((item) => { - return source.datasource === item.datasource && item.dataKey.name === key.settings.disabledOnDataKey; - }); + const conditions = data.filter((item) => + source.datasource === item.datasource && item.dataKey.name === key.settings.disabledOnDataKey); if (conditions && conditions.length) { if (conditions[0].data.length) { if (conditions[0].data[0][1] === 'false') { @@ -494,8 +500,17 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni return data; } - private updateWidgetDisplaying() { - this.changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620); + private updateColumns() { + const changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620); + if (changeAlignment) { + this.columns = 1; + } else { + if (!this.isVerticalAlignment && this.settings.fieldsInRow) { + this.columns = this.settings.fieldsInRow; + } else { + this.columns = 1; + } + } } public onDataUpdated() { @@ -504,7 +519,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni } private resize() { - this.updateWidgetDisplaying(); + this.updateColumns(); this.ctx.detectChanges(); } @@ -599,6 +614,13 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni } } + public colorChanged(source: MultipleInputWidgetSource, key: MultipleInputWidgetDataKey, color: string) { + this.multipleInputFormGroup.get(key.formId).setValue(color); + this.multipleInputFormGroup.get(key.formId).markAsDirty(); + this.multipleInputFormGroup.get(key.formId).markAsTouched(); + this.inputChanged(source, key); + } + public saveForm() { if (this.settings.showActionButtons) { this.save(); @@ -737,7 +759,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni this.multipleInputFormGroup.reset(undefined, {emitEvent: false}); this.sources.forEach((source) => { for (const key of this.visibleKeys(source)) { - this.multipleInputFormGroup.get(key.formId).patchValue(key.value, {emitEvent: false}); + this.multipleInputFormGroup.get(key.formId).patchValue(key.value); } }); this.multipleInputFormGroup.markAsPristine(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html index d69a4b0713..22571baab4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html @@ -93,11 +93,36 @@ - + widgets.input-widgets.disable-on-datakey-name +
+ + widgets.input-widgets.field-appearance + + + {{ 'widgets.input-widgets.appearance-fill' | translate }} + + + {{ 'widgets.input-widgets.appearance-outline' | translate }} + + + + + widgets.input-widgets.subscript-sizing + + + {{ 'widgets.input-widgets.subscript-sizing-fixed' | translate }} + + + {{ 'widgets.input-widgets.subscript-sizing-dynamic' | translate }} + + + +
@@ -208,7 +233,9 @@
-
+
widgets.input-widgets.icon-settings {{ 'widgets.input-widgets.use-custom-icon' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts index 7eff1bdc80..785ae0cca6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts @@ -24,7 +24,10 @@ import { dataKeySelectOptionValidator } from '@home/components/widget/lib/settings/input/datakey-select-option.component'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; -import { MultipleInputWidgetDataKeyValueType } from '@home/components/widget/lib/multiple-input-widget.component'; +import { + MultipleInputWidgetDataKeyEditableType, + MultipleInputWidgetDataKeyValueType +} from '@home/components/widget/lib/multiple-input-widget.component'; @Component({ selector: 'tb-update-multiple-attributes-key-settings', @@ -52,6 +55,8 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings required: false, isEditable: 'editable', disabledOnDataKey: '', + appearance: 'outline', + subscriptSizing: 'fixed', slideToggleLabelPosition: 'after', selectOptions: [], @@ -92,6 +97,8 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings required: [settings.required, []], isEditable: [settings.isEditable, []], disabledOnDataKey: [settings.disabledOnDataKey, []], + appearance: [settings.appearance, []], + subscriptSizing: [settings.subscriptSizing, []], // Slide toggle settings @@ -146,7 +153,7 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings const dataKeyValueType: MultipleInputWidgetDataKeyValueType = this.updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value; const required: boolean = this.updateMultipleAttributesKeySettingsForm.get('required').value; - const isEditable: string = this.updateMultipleAttributesKeySettingsForm.get('isEditable').value; + const isEditable: MultipleInputWidgetDataKeyEditableType = this.updateMultipleAttributesKeySettingsForm.get('isEditable').value; const useCustomIcon: boolean = this.updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value; const useGetValueFunction: boolean = this.updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').value; const useSetValueFunction: boolean = this.updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').value; @@ -163,10 +170,15 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings this.updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').enable({emitEvent: false}); this.updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').enable({emitEvent: false}); - if (isEditable !== 'disabled') { + if (isEditable === 'editable') { this.updateMultipleAttributesKeySettingsForm.get('disabledOnDataKey').enable({emitEvent: false}); } + if (!['booleanSwitch', 'booleanCheckbox'].includes(dataKeyValueType)) { + this.updateMultipleAttributesKeySettingsForm.get('appearance').enable({emitEvent: false}); + this.updateMultipleAttributesKeySettingsForm.get('subscriptSizing').enable({emitEvent: false}); + } + if (dataKeyValueType === 'booleanSwitch') { this.updateMultipleAttributesKeySettingsForm.get('slideToggleLabelPosition').enable({emitEvent: false}); } else if (dataKeyValueType === 'select') { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html index 9c250e5968..c1536040dd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html @@ -72,7 +72,7 @@
- widgets.input-widgets.fields-alignment + widgets.input-widgets.layout
widgets.input-widgets.fields-alignment @@ -90,5 +90,15 @@
+
+ + widgets.input-widgets.row-gap + + + + widgets.input-widgets.column-gap + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts index c1cf455f9c..9b55e131a8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts @@ -49,7 +49,9 @@ export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSetti showGroupTitle: false, groupTitle: '', fieldsAlignment: 'row', - fieldsInRow: 2 + fieldsInRow: 2, + rowGap: 5, + columnGap: 10 }; } @@ -77,6 +79,11 @@ export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSetti fieldsAlignment: [settings.fieldsAlignment, []], fieldsInRow: [settings.fieldsInRow, [Validators.min(1)]], + + // Layout gap + + rowGap: [settings.rowGap, [Validators.min(0)]], + columnGap: [settings.columnGap, [Validators.min(0)]] }); } @@ -105,13 +112,16 @@ export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSetti } if (fieldsAlignment === 'row') { this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').enable(); + this.updateMultipleAttributesWidgetSettingsForm.get('columnGap').enable(); } else { this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').disable(); + this.updateMultipleAttributesWidgetSettingsForm.get('columnGap').disable(); } this.updateMultipleAttributesWidgetSettingsForm.get('updateAllValues').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('saveButtonLabel').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('resetButtonLabel').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('groupTitle').updateValueAndValidity({emitEvent}); this.updateMultipleAttributesWidgetSettingsForm.get('fieldsInRow').updateValueAndValidity({emitEvent}); + this.updateMultipleAttributesWidgetSettingsForm.get('columnGap').updateValueAndValidity({emitEvent}); } } diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html index 68ec5854f2..cd40dde783 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.html +++ b/ui-ngx/src/app/shared/components/color-input.component.html @@ -40,7 +40,7 @@ class="tb-box-button" [disabled]="disabled" #matButton - (click)="openColorPickerPopup($event, matButton)"> + (click)="openColorPickerPopup($event, matButton._elementRef)">
diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts index 834fcb8176..6d7c7cf8b9 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.ts +++ b/ui-ngx/src/app/shared/components/color-input.component.ts @@ -14,7 +14,16 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + ElementRef, + forwardRef, + Input, + OnInit, + Renderer2, + ViewContainerRef +} from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -84,6 +93,10 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro @Input() disabled: boolean; + @Input() + @coerceBoolean() + readonly = false; + private modelValue: string; private propagateChange = null; @@ -151,43 +164,47 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro showColorPicker($event: MouseEvent) { $event.stopPropagation(); - this.dialogs.colorPicker(this.colorFormGroup.get('color').value, - this.colorClearButton).subscribe( - (result) => { - if (!result?.canceled) { - this.colorFormGroup.patchValue( - {color: result?.color}, {emitEvent: true} - ); - this.cd.markForCheck(); - } - } - ); + if (!this.disabled && !this.readonly) { + this.dialogs.colorPicker(this.colorFormGroup.get('color').value, + this.colorClearButton).subscribe( + (result) => { + if (!result?.canceled) { + this.colorFormGroup.patchValue( + {color: result?.color}, {emitEvent: true} + ); + this.cd.markForCheck(); + } + } + ); + } } - openColorPickerPopup($event: Event, matButton: MatButton) { + openColorPickerPopup($event: Event, element?: ElementRef) { if ($event) { $event.stopPropagation(); } - const trigger = matButton._elementRef.nativeElement; - if (this.popoverService.hasPopover(trigger)) { - this.popoverService.hidePopover(trigger); - } else { - const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null, - { - color: this.colorFormGroup.get('color').value, - colorClearButton: this.colorClearButton - }, - {}, - {}, {}, true); - colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover; - colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => { - colorPickerPopover.hide(); - this.colorFormGroup.patchValue( - {color}, {emitEvent: true} - ); - this.cd.markForCheck(); - }); + if (!this.disabled && !this.readonly) { + const trigger = element ? element.nativeElement : $event.target; + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + } else { + const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, + this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null, + { + color: this.colorFormGroup.get('color').value, + colorClearButton: this.colorClearButton + }, + {}, + {}, {}, true); + colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover; + colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => { + colorPickerPopover.hide(); + this.colorFormGroup.patchValue( + {color}, {emitEvent: true} + ); + this.cd.markForCheck(); + }); + } } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 16d80b7897..dcfb9f9852 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5329,6 +5329,9 @@ "input-fields-alignment": "Input fields alignment", "input-fields-alignment-column": "Column (default)", "input-fields-alignment-row": "Row", + "layout": "Layout", + "row-gap": "Gap between rows in pixels", + "column-gap": "Gap between columns in pixels", "latitude-field-required": "Latitude field required", "longitude-field-required": "Longitude field required", "attribute-settings": "Attribute settings", @@ -5384,6 +5387,12 @@ "ability-to-edit-attribute-disabled": "Disabled", "ability-to-edit-attribute-readonly": "Read-only", "disable-on-datakey-name": "Disable on false value of another datakey (specify datakey name)", + "field-appearance": "Field appearance", + "appearance-fill": "Fill", + "appearance-outline": "Outline", + "subscript-sizing": "Subscript sizing", + "subscript-sizing-fixed": "Fixed", + "subscript-sizing-dynamic": "Dynamic", "slide-toggle-settings": "Slide toggle settings", "slide-toggle-label-position": "Slide toggle label position", "slide-toggle-label-position-after": "After",