From 3f7a8b58953bb3dba15f255d872f4e38ff694379 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 19 Mar 2024 09:37:27 +0000 Subject: [PATCH 1/2] Bugfix: Eye Dropper amends Wires up the persisted value. --- .../input-eye-dropper.element.ts | 18 ++++++++++-------- .../property-editor-ui-eye-dropper.element.ts | 15 ++++++++------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts index e036b91884..ab7aac9264 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts @@ -1,7 +1,7 @@ -import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-input-eye-dropper') export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) { @@ -9,7 +9,7 @@ export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) { return undefined; } - private _onChange(e: UUIColorPickerChangeEvent) { + #onChange(e: UUIColorPickerChangeEvent) { e.stopPropagation(); super.value = e.target.value; this.dispatchEvent(new CustomEvent('change')); @@ -18,17 +18,19 @@ export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) { @property({ type: Boolean }) opacity = false; - @property() + @property({ type: Array }) swatches: string[] = []; - //TODO if empty swatches, the color picker still shows the area where they are supposed to be rendered. + + //TODO if empty swatches, the color picker still shows the area where they are supposed to be rendered. // BTW in the old backoffice "palette" seemed to be true/false setting, but here its an array. render() { return html``; + .opacity=${this.opacity} + .swatches=${this.swatches} + .value=${this.value as string} + @change=${this.#onChange}>`; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts index cab126a0b4..0ee2525262 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts @@ -1,8 +1,9 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui'; /** * @element umb-property-editor-ui-eye-dropper @@ -27,17 +28,17 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen } } - private _onChange(event: UUIColorPickerChangeEvent) { + #onChange(event: UUIColorPickerChangeEvent) { this.value = event.target.value; - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } - // TODO: This should use the given value: render() { return html``; + .value=${this.value} + @change=${this.#onChange}>`; } } From 8dea305e95efdda7b4464a992f27f4a1b1d33ff1 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 19 Mar 2024 09:39:39 +0000 Subject: [PATCH 2/2] =?UTF-8?q?EyeDropper:=20=E2=80=9CshowPalette=E2=80=9D?= =?UTF-8?q?=20config=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The “showPalette” configuration isn’t wired up correctly. Also there’s a disconnect between “showPalette” and the default value for “swatches”. I've added temporary values for the swatch colors. (Hex values have been taken from the UUI Library example) --- .../property-editor-ui-eye-dropper.element.ts | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts index 0ee2525262..e73ae03ea6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts @@ -22,9 +22,30 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen private _swatches: string[] = []; public set config(config: UmbPropertyEditorConfigCollection | undefined) { - if (config) { - this._opacity = config.getValueByAlias('showAlpha') ?? this.#defaultOpacity; - this._swatches = config.getValueByAlias('palette') ?? []; + this._opacity = config?.getValueByAlias('showAlpha') ?? this.#defaultOpacity; + + const showPalette = config?.getValueByAlias('showPalette') ?? false; + + if (showPalette) { + // TODO: This is a temporary solution until we have a proper way to get the palette from the config. [LK] + this._swatches = [ + '#d0021b', + '#f5a623', + '#f8e71c', + '#8b572a', + '#7ed321', + '#417505', + '#bd10e0', + '#9013fe', + '#4a90e2', + '#50e3c2', + '#b8e986', + '#000', + '#444', + '#888', + '#ccc', + '#fff', + ]; } }