From 7388e457dd7e70e7cc9b2bc20b2c61c332015fb8 Mon Sep 17 00:00:00 2001 From: Richard Thompson Date: Sat, 12 Oct 2024 15:44:02 +0100 Subject: [PATCH 1/3] Adds read-only mode to Color Picker Property Editor Implemented the read-only mode of the Color Picker Property Editor UI to close https://github.com/umbraco/Umbraco-CMS/issues/17045. --- .../components/input-color/input-color.element.ts | 9 +++++++++ .../property-editors/color-picker/manifests.ts | 1 + .../property-editor-ui-color-picker.element.ts | 12 +++++++++++- 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/packages/core/components/input-color/input-color.element.ts b/src/packages/core/components/input-color/input-color.element.ts index e2805d571f..992614f97d 100644 --- a/src/packages/core/components/input-color/input-color.element.ts +++ b/src/packages/core/components/input-color/input-color.element.ts @@ -11,6 +11,15 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui */ @customElement('umb-input-color') export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') { + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + protected override getFormElement() { return undefined; } diff --git a/src/packages/property-editors/color-picker/manifests.ts b/src/packages/property-editors/color-picker/manifests.ts index 661024c3b4..4fd2a6f70f 100644 --- a/src/packages/property-editors/color-picker/manifests.ts +++ b/src/packages/property-editors/color-picker/manifests.ts @@ -11,6 +11,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: 'Umbraco.ColorPicker', icon: 'icon-colorpicker', group: 'pickers', + supportsReadOnly: true, }, }, schemaManifest, diff --git a/src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts b/src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts index 9aa22a08be..cbb8ad632d 100644 --- a/src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts +++ b/src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts @@ -25,6 +25,15 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme } #value?: UmbSwatchDetails | undefined; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() private _showLabels = this.#defaultShowLabels; @@ -59,7 +68,8 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme value=${this.value?.value ?? ''} .swatches=${this._swatches} ?showLabels=${this._showLabels} - @change=${this.#onChange}>`; + @change=${this.#onChange} + ?readonly=${this.readonly}>`; } } From 22cc787b66a1843b03e12ef2bc1ce0da9c35b6b4 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:05:17 +0200 Subject: [PATCH 2/3] feat: forward the `readonly` attribute to the swatch* elements --- .../components/input-color/input-color.element.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/packages/core/components/input-color/input-color.element.ts b/src/packages/core/components/input-color/input-color.element.ts index 992614f97d..7d9e14efe4 100644 --- a/src/packages/core/components/input-color/input-color.element.ts +++ b/src/packages/core/components/input-color/input-color.element.ts @@ -13,7 +13,6 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') { /** * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. - * @type {boolean} * @attr * @default false */ @@ -37,7 +36,11 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') override render() { return html` - + ${this.#renderColors()} `; @@ -48,7 +51,11 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') return map( this.swatches, (swatch) => html` - + `, ); } From 87628b6ce5a7fc253def124dccf9e5611ab37599 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:05:49 +0200 Subject: [PATCH 3/3] chore: rearrange properties in the element --- .../core/components/input-color/input-color.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/packages/core/components/input-color/input-color.element.ts b/src/packages/core/components/input-color/input-color.element.ts index 7d9e14efe4..a25a6e09d7 100644 --- a/src/packages/core/components/input-color/input-color.element.ts +++ b/src/packages/core/components/input-color/input-color.element.ts @@ -11,6 +11,10 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui */ @customElement('umb-input-color') export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') { + protected override getFormElement() { + return undefined; + } + /** * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. * @attr @@ -19,10 +23,6 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') @property({ type: Boolean, reflect: true }) readonly = false; - protected override getFormElement() { - return undefined; - } - @property({ type: Boolean }) showLabels = false;