yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1445 from umbraco/bugfix/property-editor/eye-dropper

Browse Source 
Bugfix: Eye Dropper UI
This commit is contained in:
Lee Kelleher
2024-03-19 12:38:34 +00:00
committed by GitHub
parent 54d01a8f66 8dea305e95
commit cfb7e2166d
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
View File

@@ -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`<uui-color-picker
label="Eye dropper"
@change="${this._onChange}"
.opacity="${this.opacity}"
.swatches="${this.swatches}"></uui-color-picker>`;
.opacity=${this.opacity}
.swatches=${this.swatches}
.value=${this.value as string}
@change=${this.#onChange}></uui-color-picker>`;
}
}

42
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
View File

@@ -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
@@ -21,23 +22,44 @@ 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',
];
}
}
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`<umb-input-eye-dropper
@change="${this._onChange}"
.opacity=${this._opacity}
.swatches=${this._swatches}
.opacity="${this._opacity}"></umb-input-eye-dropper>`;
.value=${this.value}
@change=${this.#onChange}></umb-input-eye-dropper>`;
}
}