Skip to content
This repository was archived by the owner on Nov 6, 2025. It is now read-only.

Adds read-only mode to Color Picker Property Editor #2451

Merged
iOvergaard merged 4 commits into from
Oct 14, 2024
Merged

Adds read-only mode to Color Picker Property Editor #2451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7388e45
Adds read-only mode to Color Picker Property Editor
richarth Oct 12, 2024
fcbe11a
Merge branch 'main' into main
iOvergaard Oct 14, 2024
22cc787
feat: forward the `readonly` attribute to the swatch* elements
iOvergaard Oct 14, 2024
87628b6
chore: rearrange properties in the element
iOvergaard Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/packages/core/components/input-color/input-color.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
return undefined;
}

/**
* Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
* @attr
* @default false
*/
@property({ type: Boolean, reflect: true })
readonly = false;

@property({ type: Boolean })
showLabels = false;

Expand All @@ -28,7 +36,11 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')

override render() {
return html`
<uui-color-swatches label="Color picker" value=${this.value ?? ''} @change=${this.#onChange}>
<uui-color-swatches
?readonly=${this.readonly}
label="Color picker"
value=${this.value ?? ''}
@change=${this.#onChange}>
${this.#renderColors()}
</uui-color-swatches>
`;
Expand All @@ -39,7 +51,11 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
return map(
this.swatches,
(swatch) => html`
<uui-color-swatch label=${swatch.label} value=${swatch.value} .showLabel=${this.showLabels}></uui-color-swatch>
<uui-color-swatch
?readonly=${this.readonly}
Copy link
Contributor

@bjarnef bjarnef Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iOvergaard does it need to set this as readonly on uui-color-swatches explicit set readonly on uui-color-swatch?
https://github.com/umbraco/Umbraco.UI/pull/932/files#diff-8090b44f925ed46b626e45b3d05f30d71d493772a9ddf02effbb81f86c088475R99

Copy link
Contributor

@bjarnef bjarnef Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't set disabled attribute here either ;)

Copy link
Collaborator

@iOvergaard iOvergaard Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bjarnef Good point, but it doesn't look like it's hurting anything setting disabled explicitly. Would you like to make a PR with the disabled attribute?

Copy link
Contributor

@bjarnef bjarnef Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess _handleSlotChange may execute after so it would override? If <uui-color-swatch> e.g. inside <uui-color-swatches> is set to disabled or readonly, but <uui-colors-swatches> isn't, I guess the swatch is still disabled/readonly as it only explicit handle disbled and readonly.

I guess we may need an else to remove attribute as well in <uui-colors-swatches> even though <uui-colors-swatch> is set to disabled or readonly?
https://github.com/umbraco/Umbraco.UI/pull/932/files#diff-8090b44f925ed46b626e45b3d05f30d71d493772a9ddf02effbb81f86c088475R91-R101

label=${swatch.label}
value=${swatch.value}
.showLabel=${this.showLabels}></uui-color-swatch>
`,
);
}
Expand Down
1 change: 1 addition & 0 deletions src/packages/property-editors/color-picker/manifests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const manifests: Array<UmbExtensionManifest> = [
propertyEditorSchemaAlias: 'Umbraco.ColorPicker',
icon: 'icon-colorpicker',
group: 'pickers',
supportsReadOnly: true,
},
},
schemaManifest,
Expand Down
12 changes: 11 additions & 1 deletion src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -59,7 +68,8 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
value=${this.value?.value ?? ''}
.swatches=${this._swatches}
?showLabels=${this._showLabels}
@change=${this.#onChange}></umb-input-color>`;
@change=${this.#onChange}
?readonly=${this.readonly}></umb-input-color>`;
}
}

Expand Down