From 8b195b7f8f57ee592bf7668ef4410360e4eb5721 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 18 Apr 2024 09:02:00 +0100 Subject: [PATCH 1/4] ColorPicker: sets default `showLabels` to false as when the data-type is initially created, the default value would be `false`, but the UI was `true`, meaning the UX wasn't aligned. --- .../multiple-color-picker-input.element.ts | 5 ++--- .../multiple-color-picker-item-input.element.ts | 2 +- .../property-editor-ui-color-swatches-editor.element.ts | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index b292014d4d..7b6bb9f026 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -95,7 +95,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL readonly = false; @property({ type: Boolean }) - showLabels = true; + showLabels = false; constructor() { super(); @@ -105,8 +105,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL this.observe( await workspace.propertyValueByAlias('useLabel'), (value) => { - // Only set a true/false value. If value is undefined, keep the default value of True, if value is defined, set the value but remove the undefined type from the Type Union. - this.showLabels = value === undefined ? true : (value as Exclude); + this.showLabels = !!value; }, 'observeUseLabel', ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts index 3032099bec..064940fde9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts @@ -64,7 +64,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin( protected _colorPicker!: UUIColorPickerElement; @property({ type: Boolean }) - showLabels = true; + showLabels = false; async #onDelete() { await umbConfirmModal(this, { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts index ac9c9df30a..23bcbc585e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts @@ -10,7 +10,7 @@ import type { UmbMultipleColorPickerInputElement } from '@umbraco-cms/backoffice */ @customElement('umb-property-editor-ui-color-swatches-editor') export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement { - #defaultShowLabels = true; + #defaultShowLabels = false; @property({ type: Array }) value: Array = []; From 933e00d9dd60c0223a4442b835bc499c4c1f1397 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 18 Apr 2024 09:02:19 +0100 Subject: [PATCH 2/4] ColorPicker: UI polish --- .../multiple-color-picker-input.element.ts | 62 +++++++++---------- ...ultiple-color-picker-item-input.element.ts | 45 ++++++++------ ...editor-ui-color-swatches-editor.element.ts | 23 ++++--- 3 files changed, 70 insertions(+), 60 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index 7b6bb9f026..7c7c8dd80e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -127,13 +127,13 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL private _items: Array = []; @property({ type: Array }) - public get items(): Array { - return this._items; - } public set items(items: Array) { this._items = items ?? []; this.#sorter.setModel(this.items); } + public get items(): Array { + return this._items; + } #onAdd() { this.items = [...this._items, { value: '', label: '' }]; @@ -176,43 +176,43 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL } render() { - return html`
${this.#renderItems()}
- ${this.#renderAddButton()} `; + return html`${this.#renderItems()} ${this.#renderAddButton()}`; } #renderItems() { return html` - ${repeat( - this._items, - (item) => item.value, - (item, index) => html` - this.#onChange(event, index)} - @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" - ?disabled=${this.disabled} - ?readonly=${this.readonly} - required - required-message="Item ${index + 1} is missing a value"> - - `, - )} +
+ ${repeat( + this._items, + (item) => item.value, + (item, index) => html` + this.#onChange(event, index)} + @delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}> + + `, + )} +
`; } #renderAddButton() { + if (this.disabled || this.readonly) return nothing; return html` - ${this.disabled || this.readonly - ? nothing - : html``} + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts index 064940fde9..ccd2947ffb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts @@ -7,12 +7,13 @@ import { query, ifDefined, state, + when, } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIColorPickerElement, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { umbConfirmModal } from '@umbraco-cms/backoffice/modal'; import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import type { UUIColorPickerElement, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; /** * @element umb-multiple-color-picker-item-input @@ -142,39 +143,45 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin( value=${this.value} label=${this.localize.term('general_value')} placeholder=${this.localize.term('general_value')} - @input="${this.#onValueInput}" - @change="${this.#onValueChange}" - required="${this.required}" - required-message="Value is missing"> + required=${this.required} + required-message="Value is missing" + @input=${this.#onValueInput} + @change=${this.#onValueChange}> - ${this.showLabels - ? html` html` + ` - : nothing} - ${this.readonly - ? nothing - : html` + `, + )} + ${when( + !this.readonly, + () => html` + + @click=${this.#onDelete}> - `} + + `, + )} `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts index 23bcbc585e..6e24366eaf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts @@ -1,9 +1,10 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import type { UmbMultipleColorPickerInputElement } from '@umbraco-cms/backoffice/components'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models'; /** * @element umb-property-editor-ui-color-swatches-editor @@ -22,16 +23,18 @@ export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels; } - #onChange(event: CustomEvent) { - this.value = (event.target as UmbMultipleColorPickerInputElement).items; - this.dispatchEvent(new CustomEvent('property-value-change')); + #onChange(event: CustomEvent & { target: UmbMultipleColorPickerInputElement }) { + this.value = event.target.items; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { - return html``; + return html` + + `; } } From ee316e6d39938acdb6e9c2cb488be95a91ecfd32 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 18 Apr 2024 09:03:11 +0100 Subject: [PATCH 3/4] Toggle: fixed bug with a custom bubbles/composed change event --- .../core/components/input-toggle/input-toggle.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts index 1fe0364836..d3268b801d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts @@ -40,7 +40,7 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' #onChange(e: UUIBooleanInputEvent) { this.checked = e.target.checked; e.stopPropagation(); - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new UmbChangeEvent()); } #updateLabel() { From 14332f88dcc5a0f004f1b955e344b55b7010ff50 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 18 Apr 2024 09:03:38 +0100 Subject: [PATCH 4/4] Toggle: Code tidyup --- .../input-toggle/input-toggle.element.ts | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts index d3268b801d..4c1cecd6c2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts @@ -1,20 +1,21 @@ import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-input-toggle') export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '') { - _checked = false; @property({ type: Boolean }) public set checked(toggle: boolean) { - this._checked = toggle; + this.#checked = toggle; super.value = toggle.toString(); this.#updateLabel(); } public get checked(): boolean { - return this._checked; + return this.#checked; } + #checked = false; @property({ type: Boolean }) showLabels = false; @@ -37,9 +38,9 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' this.#updateLabel(); } - #onChange(e: UUIBooleanInputEvent) { - this.checked = e.target.checked; - e.stopPropagation(); + #onChange(event: UUIBooleanInputEvent) { + event.stopPropagation(); + this.checked = event.target.checked; this.dispatchEvent(new UmbChangeEvent()); } @@ -49,9 +50,9 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' render() { return html``; + .checked=${this.#checked} + .label=${this._currentLabel} + @change=${this.#onChange}>`; } static styles = [