From 4c533a5638670e17290e184245616e9b92c1fa01 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 8 Feb 2023 15:56:21 +0100 Subject: [PATCH 1/5] init --- .../color-picker/color-picker.element.ts | 64 +++++++++++++++++++ .../src/backoffice/shared/components/index.ts | 1 + ...property-editor-ui-color-picker.element.ts | 30 ++++++++- .../src/core/mocks/data/data-type.data.ts | 11 +++- 4 files changed, 102 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts new file mode 100644 index 0000000000..a329302f9f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts @@ -0,0 +1,64 @@ +import { css, html, nothing } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, state } from 'lit/decorators.js'; +import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; + +import { UmbLitElement } from '@umbraco-cms/element'; +import { UUIColorSwatchesEvent } from '@umbraco-ui/uui'; + +import { ifDefined } from 'lit/directives/if-defined'; + +@customElement('umb-color-picker') +export class UmbColorPickerElement extends FormControlMixin(UmbLitElement) { + static styles = [ + UUITextStyles, + css` + #add-button { + width: 100%; + } + `, + ]; + + @property({ type: Boolean }) + showLabels = false; + + @property() + colors?: string[]; + + constructor() { + super(); + } + + protected getFormElement() { + return undefined; + } + + private _onChange(e: UUIColorSwatchesEvent) { + e.stopPropagation(); + super.value = e.target.value; + this.dispatchEvent(new CustomEvent('change')); + } + + render() { + return html` + ${this._renderColors()} + `; + } + + private _renderColors() { + return html`${this.colors?.map((color) => { + return html``; + })}`; + } +} + +export default UmbColorPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-color-picker': UmbColorPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts index 725afefa2b..7f1622bfd3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts @@ -15,3 +15,4 @@ import './section/section.element'; import './tree/tree.element'; import './workspace/workspace-content/workspace-content.element'; import './empty-state/empty-state.element'; +import './color-picker/color-picker.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts index c50a458514..f73d8a6016 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts @@ -1,7 +1,11 @@ import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { ifDefined } from 'lit/directives/if-defined'; +import { UUIColorSwatchesEvent } from '@umbraco-ui/uui'; import { UmbLitElement } from '@umbraco-cms/element'; +import type { DataTypePropertyData } from '@umbraco-cms/models'; +import type { UmbColorPickerElement } from 'src/backoffice/shared/components/color-picker/color-picker.element'; /** * @element umb-property-editor-ui-color-picker @@ -13,11 +17,31 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement { @property() value = ''; + @state() + private _includeLabels = false; + + @state() + private _colorSwatches: string[] = []; + @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + const includeLabels = config.find((x) => x.alias === 'includeLabels'); + if (includeLabels) this._includeLabels = includeLabels.value; + + const colorSwatches = config.find((x) => x.alias === 'colors'); + if (colorSwatches) this._colorSwatches = colorSwatches.value; + } + + private _onChange(event: UUIColorSwatchesEvent) { + this.value = event.target.value; + this.dispatchEvent(new CustomEvent('property-value-change')); + } render() { - return html`
umb-property-editor-ui-color-picker
`; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 6c488aca96..524c135b00 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -59,7 +59,16 @@ export const data: Array = [ isFolder: false, propertyEditorModelAlias: 'Umbraco.ColorPicker', propertyEditorUIAlias: 'Umb.PropertyEditorUI.ColorPicker', - data: [], + data: [ + { + alias: 'includeLabels', + value: false, + }, + { + alias: 'colors', + value: ['#000000', '#373737', '#9e9e9e', '#607d8b', '#2196f3', '#03a9f4', '#3f51b5', '#9c27b0', '#673ab7'], + }, + ], }, { name: 'Content Picker', From 8096b344fd49b4685102d7a7a9f19f24bde6e66f Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 8 Feb 2023 16:07:49 +0100 Subject: [PATCH 2/5] remove console --- .../components/input-media-picker/input-media-picker.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts index 4c2adfe105..7f73bc6e0c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts @@ -163,7 +163,6 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) private _setSelection(newSelection: Array) { this.selectedKeys = newSelection; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); - console.log(this._items); } render() { From c159b99430cfe17478e51c2d64d332016006a555 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 8 Feb 2023 16:21:56 +0100 Subject: [PATCH 3/5] tests and eye dropper --- .../color-picker/color-picker.element.ts | 18 +++-------- .../color-picker/color-picker.test.ts | 18 +++++++++++ .../eye-dropper/eye-dropper.element.ts | 30 +++++++++++++++++++ .../eye-dropper/eye-dropper.test.ts | 18 +++++++++++ .../input-document-picker.test.ts | 2 +- .../input-media-picker.test.ts | 2 +- .../property-editor-ui-eye-dropper.element.ts | 3 +- 7 files changed, 74 insertions(+), 17 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts index a329302f9f..7532076503 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts @@ -1,23 +1,13 @@ -import { css, html, nothing } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; - -import { UmbLitElement } from '@umbraco-cms/element'; import { UUIColorSwatchesEvent } from '@umbraco-ui/uui'; - -import { ifDefined } from 'lit/directives/if-defined'; +import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-color-picker') export class UmbColorPickerElement extends FormControlMixin(UmbLitElement) { - static styles = [ - UUITextStyles, - css` - #add-button { - width: 100%; - } - `, - ]; + static styles = [UUITextStyles]; @property({ type: Boolean }) showLabels = false; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts new file mode 100644 index 0000000000..977ceb6a8a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts @@ -0,0 +1,18 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbColorPickerElement } from './color-picker.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; +describe('UmbColorPickerElement', () => { + let element: UmbColorPickerElement; + + beforeEach(async () => { + element = await fixture(html` `); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbColorPickerElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts new file mode 100644 index 0000000000..49ade6527b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts @@ -0,0 +1,30 @@ +import { css, html, nothing } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, state } from 'lit/decorators.js'; +import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { UmbLitElement } from '@umbraco-cms/element'; + +@customElement('umb-eye-dropper') +export class UmbEyeDropperElement extends FormControlMixin(UmbLitElement) { + static styles = [UUITextStyles]; + + constructor() { + super(); + } + + protected getFormElement() { + return undefined; + } + + render() { + return html` `; + } +} + +export default UmbEyeDropperElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-eye-dropper': UmbEyeDropperElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts new file mode 100644 index 0000000000..c147262812 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts @@ -0,0 +1,18 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbEyeDropperElement } from './eye-dropper.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; +describe('UmbEyeDropperElement', () => { + let element: UmbEyeDropperElement; + + beforeEach(async () => { + element = await fixture(html` `); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbEyeDropperElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts index b8841ac2db..d7f33ff52c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts @@ -1,7 +1,7 @@ import { expect, fixture, html } from '@open-wc/testing'; import { UmbInputDocumentPickerElement } from './input-document-picker.element'; import { defaultA11yConfig } from '@umbraco-cms/test-utils'; -describe('UmbPropertyEditorUINumberRangeElement', () => { +describe('UmbInputDocumentPickerElement', () => { let element: UmbInputDocumentPickerElement; beforeEach(async () => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts index c101ab99ae..29b81bd464 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts @@ -1,7 +1,7 @@ import { expect, fixture, html } from '@open-wc/testing'; import { UmbInputMediaPickerElement } from './input-media-picker.element'; import { defaultA11yConfig } from '@umbraco-cms/test-utils'; -describe('UmbPropertyEditorUINumberRangeElement', () => { +describe('UmbInputMediaPickerElement', () => { let element: UmbInputMediaPickerElement; beforeEach(async () => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts index 42a01d4448..a11ec4e6c8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts @@ -2,6 +2,7 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { UmbLitElement } from '@umbraco-cms/element'; +import '../../../components/eye-dropper/eye-dropper.element'; /** * @element umb-property-editor-ui-eye-dropper @@ -17,7 +18,7 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement { public config = []; render() { - return html`
umb-property-editor-ui-eye-dropper
`; + return html``; } } From 1b42c0401cfb914f67b9be1af95772110b559e04 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 9 Feb 2023 11:36:14 +0100 Subject: [PATCH 4/5] eye dropper --- .../eye-dropper/eye-dropper.element.ts | 31 ++++++++++++++----- .../property-editor-ui-eye-dropper.element.ts | 28 +++++++++++++++-- .../src/core/mocks/data/data-type.data.ts | 28 ++++++++++++++++- 3 files changed, 75 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts index 49ade6527b..3eb73e9edf 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts @@ -1,23 +1,38 @@ -import { css, html, nothing } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui'; import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-eye-dropper') export class UmbEyeDropperElement extends FormControlMixin(UmbLitElement) { - static styles = [UUITextStyles]; - - constructor() { - super(); - } + static styles = [UUITextStyles, css``]; protected getFormElement() { return undefined; } + private _onChange(e: UUIColorPickerChangeEvent) { + e.stopPropagation(); + super.value = e.target.value; + this.dispatchEvent(new CustomEvent('change')); + } + + @property({ type: Boolean }) + opacity = false; + + @property() + swatches: string[] = []; + //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` `; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts index a11ec4e6c8..8ad1e00d87 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts @@ -1,8 +1,10 @@ import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui'; import { UmbLitElement } from '@umbraco-cms/element'; import '../../../components/eye-dropper/eye-dropper.element'; +import type { DataTypePropertyData } from '@umbraco-cms/models'; /** * @element umb-property-editor-ui-eye-dropper @@ -14,11 +16,31 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement { @property() value = ''; + @state() + private _opacity = false; + + @state() + private _swatches: string[] = []; + @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + const showAlpha = config.find((x) => x.alias === 'showAlpha'); + if (showAlpha) this._opacity = showAlpha.value; + + const colorSwatches = config.find((x) => x.alias === 'palette'); + if (colorSwatches) this._swatches = colorSwatches.value; + } + + private _onChange(event: UUIColorPickerChangeEvent) { + this.value = event.target.value; + this.dispatchEvent(new CustomEvent('property-value-change')); + } render() { - return html``; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index da58a9bb6b..b7e05a2b80 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -99,7 +99,33 @@ export const data: Array = [ isFolder: false, propertyEditorModelAlias: 'Umbraco.ColorPicker.EyeDropper', propertyEditorUIAlias: 'Umb.PropertyEditorUI.EyeDropper', - data: [], + data: [ + { + alias: 'palette', + value: [ + '#d0021b', + '#f5a623', + '#f8e71c', + '#8b572a', + '#7ed321', + '#417505', + '#bd10e0', + '#9013fe', + '#4a90e2', + '#50e3c2', + '#b8e986', + '#000', + '#444', + '#888', + '#ccc', + '#fff', + ], + }, + { + alias: 'showAlpha', + value: false, + }, + ], }, { name: 'Multi URL Picker', From 95a8487bb334159b55daa61a7ba797ff8a33097c Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 9 Feb 2023 12:18:15 +0100 Subject: [PATCH 5/5] remove consolelog --- .../checkbox-list/property-editor-ui-checkbox-list.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index a522d15741..c990aeb92b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -36,7 +36,6 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement { private _onChange(event: CustomEvent) { this.value = (event.target as UmbInputCheckboxListElement).selectedKeys; this.dispatchEvent(new CustomEvent('property-value-change')); - console.log(this._value); } render() {