From c9c755ff9e94939911cc7275da5504eb2c6d240e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 6 Dec 2023 14:39:33 +0100 Subject: [PATCH 01/13] correct publishing code --- .../repository/document.repository.ts | 4 ++-- .../sources/document.server.data.ts | 3 +-- .../actions/save-and-publish.action.ts | 2 +- .../workspace/document-workspace.context.ts | 19 ++++++++++--------- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts index 4e6e9e87a1..327a10f85f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts @@ -226,7 +226,7 @@ export class UmbDocumentRepository await this.save(id, item); - const { error } = await this.#detailDataSource.saveAndPublish(id, variantIds); + const { error } = await this.#detailDataSource.publish(id, variantIds); if (!error) { // TODO: Update other stores based on above effect. @@ -243,7 +243,7 @@ export class UmbDocumentRepository if (!variantIds) throw new Error('variant IDs are missing'); await this.#init; - const { error } = await this.#detailDataSource.saveAndPublish(id, variantIds); + const { error } = await this.#detailDataSource.publish(id, variantIds); if (!error) { // TODO: Update other stores based on above effect. diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts index 98acdb0944..1f64050045 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts @@ -117,7 +117,6 @@ export class UmbDocumentServerDataSource return tryExecuteAndNotify(this.#host, DocumentResource.putDocumentById({ id, requestBody })); } - /** * Publish one or more variants of a Document * @param {string} id @@ -125,7 +124,7 @@ export class UmbDocumentServerDataSource * @return {*} * @memberof UmbDocumentServerDataSource */ - async saveAndPublish(id: string, variantIds: Array) { + async publish(id: string, variantIds: Array) { if (!id) throw new Error('Id is missing'); // TODO: THIS DOES NOT TAKE SEGMENTS INTO ACCOUNT!!!!!! diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/actions/save-and-publish.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/actions/save-and-publish.action.ts index 91caa2c9ec..0d210cfabc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/actions/save-and-publish.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/actions/save-and-publish.action.ts @@ -14,6 +14,6 @@ export class UmbDocumentSaveAndPublishWorkspaceAction extends UmbWorkspaceAction //const document = this.workspaceContext.getData(); // TODO: handle errors //if (!document) return; - this.workspaceContext.publish(); + this.workspaceContext.saveAndPublish(); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts index fe551aeef5..2d0977fdb4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts @@ -24,7 +24,9 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; type EntityType = DocumentResponseModel; export class UmbDocumentWorkspaceContext extends UmbEditableWorkspaceContextBase - implements UmbVariantableWorkspaceContextInterface, UmbPublishableWorkspaceContextInterface + implements + UmbVariantableWorkspaceContextInterface, + UmbPublishableWorkspaceContextInterface { /** * The document is the current stored version of the document. @@ -204,19 +206,18 @@ export class UmbDocumentWorkspaceContext async delete() { const id = this.getEntityId(); - if(id) { + if (id) { await this.repository.delete(id); } } - public async publish() { // TODO: This might be right to publish all, but we need a method that just publishes a declared range of variants. const currentData = this.#currentData.value; - if(currentData) { + if (currentData) { const variantIds = currentData.variants?.map((x) => UmbVariantId.Create(x)); const id = this.getEntityId(); - if(variantIds && id) { + if (variantIds && id) { await this.repository.publish(id, variantIds); } } @@ -225,10 +226,10 @@ export class UmbDocumentWorkspaceContext public async saveAndPublish() { // TODO: This might be right to publish all, but we need a method that just saves and publishes a declared range of variants. const currentData = this.#currentData.value; - if(currentData) { + if (currentData) { const variantIds = currentData.variants?.map((x) => UmbVariantId.Create(x)); const id = currentData.id; - if(variantIds && id) { + if (variantIds && id) { await this.repository.saveAndPublish(id, currentData, variantIds); } } @@ -237,10 +238,10 @@ export class UmbDocumentWorkspaceContext public async unpublish() { // TODO: This might be right to unpublish all, but we need a method that just publishes a declared range of variants. const currentData = this.#currentData.value; - if(currentData) { + if (currentData) { const variantIds = currentData.variants?.map((x) => UmbVariantId.Create(x)); const id = this.getEntityId(); - if(variantIds && id) { + if (variantIds && id) { await this.repository.unpublish(id, variantIds); } } From 2e174153755710beccf89d72a3effce8fc58e9c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 6 Dec 2023 15:20:10 +0100 Subject: [PATCH 02/13] publish corrections --- .../packages/core/variant/variant-id.class.ts | 8 +++++ .../repository/document.repository.ts | 19 ----------- .../sources/document.server.data.ts | 4 ++- .../workspace/document-workspace.context.ts | 34 +++++++++++-------- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts index 0bffb824dc..752e8bcf11 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts @@ -39,6 +39,14 @@ export class UmbVariantId { return this.segment || ''; } + public isCultureInvariant(): boolean { + return this.culture === null; + } + + public isSegmentInvariant(): boolean { + return this.segment === null; + } + public isInvariant(): boolean { return this.culture === null && this.segment === null; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts index 327a10f85f..68eb162e4d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts @@ -219,25 +219,6 @@ export class UmbDocumentRepository return { error }; } - async saveAndPublish(id: string, item: UpdateDocumentRequestModel, variantIds: Array) { - if (!id) throw new Error('id is missing'); - if (!variantIds) throw new Error('variant IDs are missing'); - //await this.#init; - - await this.save(id, item); - - const { error } = await this.#detailDataSource.publish(id, variantIds); - - if (!error) { - // TODO: Update other stores based on above effect. - - const notification = { data: { message: `Document saved and published` } }; - this.#notificationContext?.peek('positive', notification); - } - - return { error }; - } - async publish(id: string, variantIds: Array) { if (!id) throw new Error('id is missing'); if (!variantIds) throw new Error('variant IDs are missing'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts index 1f64050045..1f823b5305 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/sources/document.server.data.ts @@ -129,7 +129,9 @@ export class UmbDocumentServerDataSource // TODO: THIS DOES NOT TAKE SEGMENTS INTO ACCOUNT!!!!!! const requestBody: PublishDocumentRequestModel = { - cultures: variantIds.map((variant) => variant.toCultureString()), + cultures: variantIds + .map((variant) => (variant.isCultureInvariant() ? null : variant.toCultureString())) + .filter((x) => x !== null) as Array, }; return tryExecuteAndNotify(this.#host, DocumentResource.putDocumentByIdPublish({ id, requestBody })); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts index 2d0977fdb4..3e4fdc864e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts @@ -187,9 +187,8 @@ export class UmbDocumentWorkspaceContext } } - async save() { - if (!this.#currentData.value) return; - if (!this.#currentData.value.id) return; + async #createOrSave() { + if (!this.#currentData.value?.id) throw new Error('Id is missing'); if (this.getIsNew()) { // TODO: typescript hack until we get the create type @@ -200,6 +199,10 @@ export class UmbDocumentWorkspaceContext } else { await this.repository.save(this.#currentData.value.id, this.#currentData.value); } + } + + async save() { + await this.#createOrSave(); this.saveComplete(this.getData()); } @@ -211,6 +214,19 @@ export class UmbDocumentWorkspaceContext } } + public async saveAndPublish() { + await this.#createOrSave(); + // TODO: This might be right to publish all, but we need a method that just saves and publishes a declared range of variants. + const currentData = this.#currentData.value; + if (currentData) { + const variantIds = currentData.variants?.map((x) => UmbVariantId.Create(x)); + const id = currentData.id; + if (variantIds && id) { + await this.repository.publish(id, variantIds); + } + } + } + public async publish() { // TODO: This might be right to publish all, but we need a method that just publishes a declared range of variants. const currentData = this.#currentData.value; @@ -223,18 +239,6 @@ export class UmbDocumentWorkspaceContext } } - public async saveAndPublish() { - // TODO: This might be right to publish all, but we need a method that just saves and publishes a declared range of variants. - const currentData = this.#currentData.value; - if (currentData) { - const variantIds = currentData.variants?.map((x) => UmbVariantId.Create(x)); - const id = currentData.id; - if (variantIds && id) { - await this.repository.saveAndPublish(id, currentData, variantIds); - } - } - } - public async unpublish() { // TODO: This might be right to unpublish all, but we need a method that just publishes a declared range of variants. const currentData = this.#currentData.value; From 4778f405feb6dda6413463d6edbeb84f78924778 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 1 Dec 2023 11:27:00 +0100 Subject: [PATCH 03/13] data type color picker --- .../src/packages/core/components/index.ts | 1 + .../multiple-color-picker-input/index.ts | 2 + .../multiple-color-picker-input.element.ts | 207 ++++++++++++++++ ...ultiple-color-picker-item-input.element.ts | 230 ++++++++++++++++++ .../schemas/Umbraco.ColorPicker.ts | 2 +- .../config/prevalues/manifests.ts | 14 ++ ...ditor-ui-color-picker-prevalues.element.ts | 49 ++++ .../uis/color-picker/manifests.ts | 7 +- .../core/property-editor/uis/manifests.ts | 4 +- 9 files changed, 512 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index 1fd80d6f7e..b6141b90b2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -33,3 +33,4 @@ export * from './tooltip-menu/index.js'; export * from './variant-selector/index.js'; export * from './popover-layout/index.js'; export * from './multiple-text-string-input/index.js'; +export * from './multiple-color-picker-input/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/index.ts new file mode 100644 index 0000000000..77207cd43b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/index.ts @@ -0,0 +1,2 @@ +export * from './multiple-color-picker-input.element.js'; +export * from './multiple-color-picker-item-input.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts new file mode 100644 index 0000000000..98dbab4ddf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -0,0 +1,207 @@ +import { UmbMultipleColorPickerItemInputElement } from './multiple-color-picker-item-input.element.js'; +import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models'; +import { + css, + html, + nothing, + repeat, + customElement, + property, + state, + ifDefined, +} from '@umbraco-cms/backoffice/external/lit'; +import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type/workspace/data-type-workspace.context.js'; + +/** + * @element umb-multiple-color-picker-input + */ +@customElement('umb-multiple-color-picker-input') +export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitElement) { + /** + * This is a minimum amount of selected items in this input. + * @type {number} + * @attr + * @default undefined + */ + @property({ type: Number }) + min?: number; + + /** + * Min validation message. + * @type {boolean} + * @attr + * @default + */ + @property({ type: String, attribute: 'min-message' }) + minMessage = 'This field need more items'; + + /** + * This is a maximum amount of selected items in this input. + * @type {number} + * @attr + * @default undefined + */ + @property({ type: Number }) + max?: number; + + /** + * Max validation message. + * @type {boolean} + * @attr + * @default + */ + @property({ type: String, attribute: 'min-message' }) + maxMessage = 'This field exceeds the allowed amount of items'; + + /** + * Disables the input + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + disabled = false; + + /** + * Makes the input readonly + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + + @property({ type: Boolean }) + showLabels = true; + + constructor() { + super(); + this.addValidator( + 'rangeUnderflow', + () => this.minMessage, + () => !!this.min && this._items.length < this.min, + ); + this.addValidator( + 'rangeOverflow', + () => this.maxMessage, + () => !!this.max && this._items.length > this.max, + ); + + this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => { + const workspace = instance; + this.observe(workspace.data, (data) => { + const property = data?.values.find((setting) => setting.alias === 'useLabel'); + if (property) this.showLabels = property.value as boolean; + }); + }); + } + + @state() + private _items: Array = []; + + @property({ type: Array }) + public get items(): Array { + return this._items; + } + public set items(items: Array) { + // TODO: when we have a way to overwrite the missing value validator we can remove this + this.value = items?.length > 0 ? 'some value' : ''; + this._items = items ?? []; + } + + #onAdd() { + this._items = [...this._items, { value: '', label: '' }]; + this.pristine = false; + this.dispatchEvent(new UmbChangeEvent()); + this.#focusNewItem(); + } + + #onInput(event: UmbInputEvent, currentIndex: number) { + event.stopPropagation(); + const target = event.currentTarget as UmbMultipleColorPickerItemInputElement; + const value = target.value as string; + const label = target.label as string; + + this.items = this._items.map((item, index) => (index === currentIndex ? { value, label } : item)); + + this.dispatchEvent(new UmbChangeEvent()); + } + + async #focusNewItem() { + await this.updateComplete; + const items = this.shadowRoot?.querySelectorAll( + 'umb-multiple-color-picker-item-input', + ) as NodeListOf; + const newItem = items[items.length - 1]; + newItem.focus(); + } + + #deleteItem(event: UmbDeleteEvent, itemIndex: number) { + event.stopPropagation(); + this._items = this._items.filter((item, index) => index !== itemIndex); + this.pristine = false; + this.dispatchEvent(new UmbChangeEvent()); + } + + protected getFormElement() { + return undefined; + } + + render() { + return html`${this.#renderItems()} ${this.#renderAddButton()} `; + } + + #renderItems() { + return html` + ${repeat( + this._items, + (item, index) => index, + (item, index) => + html` this.#onInput(event, index)} + @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" + ?disabled=${this.disabled} + ?readonly=${this.readonly} + required + required-message="Item ${index + 1} is missing a value">`, + )} + `; + } + + #renderAddButton() { + return html` + ${this.disabled || this.readonly + ? nothing + : html``} + `; + } + + static styles = [ + css` + #action { + display: block; + } + `, + ]; +} + +export default UmbMultipleColorPickerInputElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-multiple-color-picker-input': UmbMultipleColorPickerInputElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts new file mode 100644 index 0000000000..bbc0b4250c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts @@ -0,0 +1,230 @@ +import { css, html, nothing, customElement, property, query, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { + FormControlMixin, + UUIColorPickerElement, + UUIInputElement, + UUIInputEvent, +} from '@umbraco-cms/backoffice/external/uui'; +import { + UmbModalManagerContext, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UMB_CONFIRM_MODAL, +} from '@umbraco-cms/backoffice/modal'; +import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +/** + * @element umb-multiple-color-picker-item-input + */ +@customElement('umb-multiple-color-picker-item-input') +export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(UmbLitElement) { + /** + * Disables the input + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + disabled = false; + + /** + * Disables the input + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + + @property({ type: String }) + label?: string; + + @query('#input') + protected _input?: UUIInputElement; + + @query('#color') + protected _colorPicker!: UUIColorPickerElement; + + private _modalContext?: UmbModalManagerContext; + + @property({ type: Boolean }) + showLabels = true; + + constructor() { + super(); + + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + #onDelete() { + const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, { + headline: `Delete ${this.value || 'item'}`, + content: 'Are you sure you want to delete this item?', + color: 'danger', + confirmLabel: 'Delete', + }); + + modalContext?.onSubmit().then(() => { + this.dispatchEvent(new UmbDeleteEvent()); + }); + } + + #onLabelInput(event: UUIInputEvent) { + event.stopPropagation(); + this.label = event.target.value as string; + this.dispatchEvent(new UmbInputEvent()); + } + + #onLabelChange(event: UUIInputEvent) { + event.stopPropagation(); + this.label = event.target.value as string; + this.dispatchEvent(new UmbChangeEvent()); + } + + #onValueChange(event: UUIInputEvent) { + event.stopPropagation(); + this.value = event.target.value; + this.dispatchEvent(new UmbChangeEvent()); + } + + #onValueInput(event: UUIInputEvent) { + event.stopPropagation(); + this.value = event.target.value; + this.dispatchEvent(new UmbInputEvent()); + } + + #onColorInput(event: InputEvent) { + event.stopPropagation(); + this.value = this._colorPicker.value; + this.dispatchEvent(new UmbInputEvent()); + } + + // Prevent valid events from bubbling outside the message element + #onValid(event: any) { + event.stopPropagation(); + } + + // Prevent invalid events from bubbling outside the message element + #onInvalid(event: any) { + event.stopPropagation(); + } + + public async focus() { + await this.updateComplete; + this._input?.focus(); + } + + protected getFormElement() { + return undefined; + } + + #onColorClick() { + this._colorPicker.click(); + } + + render() { + //TODO: Using native input=color element instead of uui-color-picker due to its huge size and bad adaptability as a pop up + return html` + +
+ ${this.disabled || this.readonly ? nothing : html``} +
+ + + + +
+ ${this.showLabels + ? html` ` + : nothing} +
+ + + ${this.readonly + ? nothing + : html` + + `} + `; + } + + static styles = [ + css` + :host { + display: flex; + align-items: center; + margin-bottom: var(--uui-size-space-3); + gap: var(--uui-size-space-3); + } + + #item { + position: relative; + display: flex; + gap: var(--uui-size-1); + align-items: center; + } + uui-input { + flex: 1; + } + + uui-color-swatch { + padding: var(--uui-size-1); + } + + .color-wrapper { + position: relative; + flex: 1; + display: flex; + flex-direction: column; + } + + uui-input, + #validation-message { + flex: 1; + } + + input[type='color'] { + visibility: hidden; + width: 0px; + padding: 0; + margin: 0; + position: absolute; + } + `, + ]; +} + +export default UmbMultipleColorPickerItemInputElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-multiple-color-picker-item-input': UmbMultipleColorPickerItemInputElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts index 00af93e6f3..effccb9233 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts @@ -19,7 +19,7 @@ export const manifest: ManifestPropertyEditorSchema = { alias: 'items', label: 'Colors', description: 'Add, remove or sort colors', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.ColorPicker', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.ColorPicker.Prevalues', }, ], }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts new file mode 100644 index 0000000000..96a8fd616f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestPropertyEditorUi = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.ColorPicker.Prevalues', + name: 'Color Picker Prevalues Property Editor UI', + js: () => import('./property-editor-ui-color-picker-prevalues.element.js'), + meta: { + label: 'Color Picker Prevalues', + icon: 'icon-page-add', + group: 'Umbraco.DropDown.Flexible', + //propertyEditorSchemaAlias: '', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts new file mode 100644 index 0000000000..03a5da8ec6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts @@ -0,0 +1,49 @@ +import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbMultipleColorPickerInputElement } from '@umbraco-cms/backoffice/components'; + +/** + * @element umb-property-editor-ui-color-picker-prevalues + */ +@customElement('umb-property-editor-ui-color-picker-prevalues') +export class UmbPropertyEditorUIColorPickerPrevaluesElement + extends UmbLitElement + implements UmbPropertyEditorUiElement +{ + #defaultShowLabels = true; + + @property({ type: Array }) + value: Array = []; + + @state() + private _showLabels = this.#defaultShowLabels; + + @property({ attribute: false }) + public set config(config: UmbPropertyEditorConfigCollection | undefined) { + this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels; + this.value = config?.getValueByAlias('items') ?? []; + } + + #onChange(event: CustomEvent) { + this.value = (event.target as UmbMultipleColorPickerInputElement).items; + this.dispatchEvent(new CustomEvent('property-value-change')); + } + + render() { + return html``; + } +} + +export default UmbPropertyEditorUIColorPickerPrevaluesElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-color-picker-prevalues': UmbPropertyEditorUIColorPickerPrevaluesElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts index 7b2fff99ba..be5da208f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts @@ -1,6 +1,7 @@ +import { manifest as prevalues } from './config/prevalues/manifests.js'; import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; -export const manifest: ManifestPropertyEditorUi = { +const manifest: ManifestPropertyEditorUi = { type: 'propertyEditorUi', alias: 'Umb.PropertyEditorUi.ColorPicker', name: 'Color Picker Property Editor UI', @@ -12,3 +13,7 @@ export const manifest: ManifestPropertyEditorUi = { group: 'pickers', }, }; + +const config: Array = [prevalues]; + +export const manifests = [manifest, ...config]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts index d24e002b7e..7efbeb0fcb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts @@ -1,4 +1,4 @@ -import { manifest as colorPicker } from './color-picker/manifests.js'; +import { manifests as colorPicker } from './color-picker/manifests.js'; import { manifest as datePicker } from './date-picker/manifests.js'; import { manifest as eyeDropper } from './eye-dropper/manifests.js'; import { manifest as multiUrlPicker } from './multi-url-picker/manifests.js'; @@ -33,7 +33,7 @@ import { manifest as memberGroupPicker } from './member-group-picker/manifests.j import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ - colorPicker, + ...colorPicker, datePicker, eyeDropper, multiUrlPicker, From 2a325d80932e007f58c7f635eafa01177296493a Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 1 Dec 2023 11:36:37 +0100 Subject: [PATCH 04/13] localize --- .../multiple-color-picker-input.element.ts | 6 +-- ...ultiple-color-picker-item-input.element.ts | 39 +++++++++---------- 2 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index 98dbab4ddf..9db1869818 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -1,3 +1,4 @@ +import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type/workspace/data-type-workspace.context.js'; import { UmbMultipleColorPickerItemInputElement } from './multiple-color-picker-item-input.element.js'; import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models'; import { @@ -13,7 +14,6 @@ import { import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type/workspace/data-type-workspace.context.js'; /** * @element umb-multiple-color-picker-input @@ -107,8 +107,6 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE return this._items; } public set items(items: Array) { - // TODO: when we have a way to overwrite the missing value validator we can remove this - this.value = items?.length > 0 ? 'some value' : ''; this._items = items ?? []; } @@ -181,7 +179,7 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE ? nothing : html` { @@ -134,15 +134,15 @@ export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(Umb @@ -150,28 +150,27 @@ export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(Umb ${this.showLabels ? html` ` : nothing} + ${this.readonly + ? nothing + : html` + + `} - - ${this.readonly - ? nothing - : html` - - `} `; } From d6f90c6f4becf91fde38f7bcebf9fa6c434b1d44 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:54:57 +0100 Subject: [PATCH 05/13] sorter added --- .../multiple-color-picker-input.element.ts | 67 ++++++++++++++++--- 1 file changed, 58 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index 9db1869818..bcde0581d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -14,12 +14,45 @@ import { import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +import { c } from 'msw/lib/glossary-de6278a9.js'; + +const SORTER_CONFIG: UmbSorterConfig = { + compareElementToModel: (element: HTMLElement, model: UmbSwatchDetails) => { + return element.getAttribute('data-sort-entry-id') === model.value; + }, + querySelectModelToElement: (container: HTMLElement, modelEntry: UmbSwatchDetails) => { + return container.querySelector('data-sort-entry-id=[' + modelEntry.value + ']'); + }, + identifier: 'Umb.SorterIdentifier.ColorPicker.Prevalues', + itemSelector: 'umb-multiple-color-picker-item-input', + containerSelector: '#sorter-wrapper', +}; /** * @element umb-multiple-color-picker-input */ @customElement('umb-multiple-color-picker-input') export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitElement) { + #prevalueSorter = new UmbSorterController(this, { + ...SORTER_CONFIG, + + //TODO: Fix sorting when UmbSorterController gets fixed + performItemInsert: (args) => { + const frozenArray = [...this.items]; + const indexToMove = frozenArray.findIndex((x) => x.value === args.item.value); + + frozenArray.splice(indexToMove, 1); + frozenArray.splice(args.newIndex, 0, args.item); + this.items = frozenArray; + + return true; + }, + performItemRemove: (args) => { + return true; + }, + }); + /** * This is a minimum amount of selected items in this input. * @type {number} @@ -79,6 +112,15 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE constructor() { super(); + + this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => { + const workspace = instance; + this.observe(workspace.data, (data) => { + const property = data?.values.find((setting) => setting.alias === 'useLabel'); + if (property) this.showLabels = property.value as boolean; + }); + }); + this.addValidator( 'rangeUnderflow', () => this.minMessage, @@ -89,14 +131,6 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE () => this.maxMessage, () => !!this.max && this._items.length > this.max, ); - - this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => { - const workspace = instance; - this.observe(workspace.data, (data) => { - const property = data?.values.find((setting) => setting.alias === 'useLabel'); - if (property) this.showLabels = property.value as boolean; - }); - }); } @state() @@ -108,6 +142,7 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE } public set items(items: Array) { this._items = items ?? []; + this.#prevalueSorter.setModel(this.items); } #onAdd() { @@ -149,7 +184,8 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE } render() { - return html`${this.#renderItems()} ${this.#renderAddButton()} `; + return html`
${this.#renderItems()}
+ ${this.#renderAddButton()} `; } #renderItems() { @@ -161,6 +197,7 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE html` this.#onInput(event, index)} @@ -192,6 +229,18 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE #action { display: block; } + + .--umb-sorter-placeholder { + position: relative; + visibility: hidden; + } + .--umb-sorter-placeholder::after { + content: ''; + position: absolute; + inset: 0px; + border-radius: var(--uui-border-radius); + border: 1px dashed var(--uui-color-divider-emphasis); + } `, ]; } From 30cb9fc56360512ecde1b3542918d2b2691cf34d Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:49:56 +0100 Subject: [PATCH 06/13] Update src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- .../uis/color-picker/config/prevalues/manifests.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts index 96a8fd616f..6c2b2c3ae6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts @@ -9,6 +9,5 @@ export const manifest: ManifestPropertyEditorUi = { label: 'Color Picker Prevalues', icon: 'icon-page-add', group: 'Umbraco.DropDown.Flexible', - //propertyEditorSchemaAlias: '', }, }; From 65c74706bd59e5189d58e5200f7018d020e5450b Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:51:40 +0100 Subject: [PATCH 07/13] remove weird import --- .../multiple-color-picker-input.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index bcde0581d9..618c6e6a1a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -15,7 +15,6 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -import { c } from 'msw/lib/glossary-de6278a9.js'; const SORTER_CONFIG: UmbSorterConfig = { compareElementToModel: (element: HTMLElement, model: UmbSwatchDetails) => { From c3a9e28259f19f6c838e22d391af158452673665 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:59:48 +0100 Subject: [PATCH 08/13] color editor --- .../multiple-color-picker-input.element.ts | 4 +++- .../property-editor/schemas/Umbraco.ColorPicker.ts | 2 +- .../config/prevalues => color-editor}/manifests.ts | 8 ++++---- .../property-editor-ui-color-editor.element.ts} | 13 +++++-------- .../property-editor/uis/color-picker/manifests.ts | 7 +------ .../packages/core/property-editor/uis/manifests.ts | 6 ++++-- 6 files changed, 18 insertions(+), 22 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/{color-picker/config/prevalues => color-editor}/manifests.ts (53%) rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/{color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts => color-editor/property-editor-ui-color-editor.element.ts} (76%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index 618c6e6a1a..87211f6333 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -23,7 +23,7 @@ const SORTER_CONFIG: UmbSorterConfig = { querySelectModelToElement: (container: HTMLElement, modelEntry: UmbSwatchDetails) => { return container.querySelector('data-sort-entry-id=[' + modelEntry.value + ']'); }, - identifier: 'Umb.SorterIdentifier.ColorPicker.Prevalues', + identifier: 'Umb.SorterIdentifier.ColorEditor', itemSelector: 'umb-multiple-color-picker-item-input', containerSelector: '#sorter-wrapper', }; @@ -45,6 +45,8 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE frozenArray.splice(args.newIndex, 0, args.item); this.items = frozenArray; + console.log(args.newIndex); + return true; }, performItemRemove: (args) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts index effccb9233..38b40daf26 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.ColorPicker.ts @@ -19,7 +19,7 @@ export const manifest: ManifestPropertyEditorSchema = { alias: 'items', label: 'Colors', description: 'Add, remove or sort colors', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.ColorPicker.Prevalues', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.ColorEditor', }, ], }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-editor/manifests.ts similarity index 53% rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-editor/manifests.ts index 6c2b2c3ae6..922d03fc43 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-editor/manifests.ts @@ -2,11 +2,11 @@ import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension export const manifest: ManifestPropertyEditorUi = { type: 'propertyEditorUi', - alias: 'Umb.PropertyEditorUi.ColorPicker.Prevalues', - name: 'Color Picker Prevalues Property Editor UI', - js: () => import('./property-editor-ui-color-picker-prevalues.element.js'), + alias: 'Umb.PropertyEditorUi.ColorEditor', + name: 'Color Editor Property Editor UI', + js: () => import('./property-editor-ui-color-editor.element.js'), meta: { - label: 'Color Picker Prevalues', + label: 'Color Editor', icon: 'icon-page-add', group: 'Umbraco.DropDown.Flexible', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-editor/property-editor-ui-color-editor.element.ts similarity index 76% rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-editor/property-editor-ui-color-editor.element.ts index 03a5da8ec6..a1e12b4b8c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/config/prevalues/property-editor-ui-color-picker-prevalues.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-editor/property-editor-ui-color-editor.element.ts @@ -6,13 +6,10 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/ import { UmbMultipleColorPickerInputElement } from '@umbraco-cms/backoffice/components'; /** - * @element umb-property-editor-ui-color-picker-prevalues + * @element umb-property-editor-ui-color-editor */ -@customElement('umb-property-editor-ui-color-picker-prevalues') -export class UmbPropertyEditorUIColorPickerPrevaluesElement - extends UmbLitElement - implements UmbPropertyEditorUiElement -{ +@customElement('umb-property-editor-ui-color-editor') +export class UmbPropertyEditorUIColorEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement { #defaultShowLabels = true; @property({ type: Array }) @@ -40,10 +37,10 @@ export class UmbPropertyEditorUIColorPickerPrevaluesElement } } -export default UmbPropertyEditorUIColorPickerPrevaluesElement; +export default UmbPropertyEditorUIColorEditorElement; declare global { interface HTMLElementTagNameMap { - 'umb-property-editor-ui-color-picker-prevalues': UmbPropertyEditorUIColorPickerPrevaluesElement; + 'umb-property-editor-ui-color-editor': UmbPropertyEditorUIColorEditorElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts index be5da208f0..7b2fff99ba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts @@ -1,7 +1,6 @@ -import { manifest as prevalues } from './config/prevalues/manifests.js'; import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; -const manifest: ManifestPropertyEditorUi = { +export const manifest: ManifestPropertyEditorUi = { type: 'propertyEditorUi', alias: 'Umb.PropertyEditorUi.ColorPicker', name: 'Color Picker Property Editor UI', @@ -13,7 +12,3 @@ const manifest: ManifestPropertyEditorUi = { group: 'pickers', }, }; - -const config: Array = [prevalues]; - -export const manifests = [manifest, ...config]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts index 7efbeb0fcb..49f304aaff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts @@ -1,4 +1,5 @@ -import { manifests as colorPicker } from './color-picker/manifests.js'; +import { manifest as colorPicker } from './color-picker/manifests.js'; +import { manifest as colorEditor } from './color-editor/manifests.js'; import { manifest as datePicker } from './date-picker/manifests.js'; import { manifest as eyeDropper } from './eye-dropper/manifests.js'; import { manifest as multiUrlPicker } from './multi-url-picker/manifests.js'; @@ -33,7 +34,8 @@ import { manifest as memberGroupPicker } from './member-group-picker/manifests.j import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ - ...colorPicker, + colorPicker, + colorEditor, datePicker, eyeDropper, multiUrlPicker, From f6dbb7a8e1cb58741b4dfc64a3c95900b5e69eb2 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:29:44 +0100 Subject: [PATCH 09/13] sorter --- .../multiple-color-picker-input.element.ts | 9 ++++----- .../src/packages/core/sorter/sorter.controller.ts | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index 87211f6333..815ebff28c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -36,7 +36,6 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE #prevalueSorter = new UmbSorterController(this, { ...SORTER_CONFIG, - //TODO: Fix sorting when UmbSorterController gets fixed performItemInsert: (args) => { const frozenArray = [...this.items]; const indexToMove = frozenArray.findIndex((x) => x.value === args.item.value); @@ -45,7 +44,7 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE frozenArray.splice(args.newIndex, 0, args.item); this.items = frozenArray; - console.log(args.newIndex); + this.dispatchEvent(new UmbChangeEvent()); return true; }, @@ -153,7 +152,7 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE this.#focusNewItem(); } - #onInput(event: UmbInputEvent, currentIndex: number) { + #onChange(event: UmbInputEvent, currentIndex: number) { event.stopPropagation(); const target = event.currentTarget as UmbMultipleColorPickerItemInputElement; const value = target.value as string; @@ -193,7 +192,7 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE return html` ${repeat( this._items, - (item, index) => index, + (item) => item.value, (item, index) => html` this.#onInput(event, index)} + @change=${(event: UmbChangeEvent) => this.#onChange(event, index)} @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" ?disabled=${this.disabled} ?readonly=${this.readonly} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts index b9bc23e05d..fa1b7f6662 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts @@ -691,6 +691,7 @@ export class UmbSorterController implements UmbController { if (movingItemIndex !== -1 && movingItemIndex <= movingItemIndex) { newIndex--; } + if (nextEl) { // We had a reference element, we want to get the index of it. // This is might a problem if a item is being moved forward? (was also like this in the AngularJS version...) From 31b6b4d70960f01bd49312190cd04e28aacb70b7 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 4 Dec 2023 13:49:52 +0100 Subject: [PATCH 10/13] change event --- .../multiple-color-picker-item-input.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts index 04140eb7bc..d4b7d306b6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts @@ -98,7 +98,7 @@ export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(Umb #onColorInput(event: InputEvent) { event.stopPropagation(); this.value = this._colorPicker.value; - this.dispatchEvent(new UmbInputEvent()); + this.dispatchEvent(new UmbChangeEvent()); } // Prevent valid events from bubbling outside the message element From 550f298010a5a13c6a7efec16401ab496163a610 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 7 Dec 2023 10:06:33 +0100 Subject: [PATCH 11/13] move to new modal data model --- .../multiple-color-picker-item-input.element.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts index d4b7d306b6..ff24d8c5ae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts @@ -60,10 +60,12 @@ export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(Umb #onDelete() { const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: `${this.localize.term('actions_delete')} ${this.value || ''}`, - content: this.localize.term('content_nestedContentDeleteItem'), - color: 'danger', - confirmLabel: this.localize.term('actions_delete'), + data: { + headline: `${this.localize.term('actions_delete')} ${this.value || ''}`, + content: this.localize.term('content_nestedContentDeleteItem'), + color: 'danger', + confirmLabel: this.localize.term('actions_delete'), + } }); modalContext?.onSubmit().then(() => { From 4469db0839ef77be224b4ec1f6f91577857d45f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 7 Dec 2023 22:39:20 +1300 Subject: [PATCH 12/13] fix image cropper test warnings --- .../image-cropper-focus-setter.element.ts | 42 +++++++++++-------- .../input-image-cropper.element.ts | 4 +- ...or-ui-image-crops-configuration.element.ts | 10 ++--- 3 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts index 4042a2a5ec..d8d9399b94 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts @@ -13,9 +13,9 @@ import { @customElement('umb-image-cropper-focus-setter') export class UmbImageCropperFocusSetterElement extends LitElement { - @query('#image') imageElement!: HTMLImageElement; - @query('#wrapper') wrapperElement!: HTMLImageElement; - @query('#focal-point') focalPointElement!: HTMLImageElement; + @query('#image') imageElement?: HTMLImageElement; + @query('#wrapper') wrapperElement?: HTMLImageElement; + @query('#focal-point') focalPointElement?: HTMLImageElement; @property({ type: String }) src?: string; @property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 }; @@ -35,7 +35,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement { protected updated(_changedProperties: PropertyValueMap | Map): void { super.updated(_changedProperties); - if (_changedProperties.has('focalPoint')) { + if (_changedProperties.has('focalPoint') && this.focalPointElement) { this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`; this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`; } @@ -45,23 +45,28 @@ export class UmbImageCropperFocusSetterElement extends LitElement { super.firstUpdated(_changedProperties); this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`); - this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`; - this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`; - this.imageElement.onload = () => { - const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight; + if (this.focalPointElement) { + this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`; + this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`; + } + if (this.imageElement) { + this.imageElement.onload = () => { + if (!this.imageElement || !this.wrapperElement) return; + const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight; - if (imageAspectRatio > 1) { - this.imageElement.style.width = '100%'; - this.wrapperElement.style.width = '100%'; - } else { - this.imageElement.style.height = '100%'; - this.wrapperElement.style.height = '100%'; - } + if (imageAspectRatio > 1) { + this.imageElement.style.width = '100%'; + this.wrapperElement.style.width = '100%'; + } else { + this.imageElement.style.height = '100%'; + this.wrapperElement.style.height = '100%'; + } - this.imageElement.style.aspectRatio = `${imageAspectRatio}`; - this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`; - }; + this.imageElement.style.aspectRatio = `${imageAspectRatio}`; + this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`; + }; + } } async #addEventListeners() { @@ -92,6 +97,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement { #onSetFocalPoint(event: MouseEvent) { event.preventDefault(); + if (!this.focalPointElement || !this.imageElement) return; const image = this.imageElement.getBoundingClientRect(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts index 63282ae372..9a93d83a37 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts @@ -109,8 +109,8 @@ export class UmbInputImageCropperElement extends LitElement { .focalPoint=${this.focalPoint} .src=${this.src}>
- Remove files (NOT IMPLEMENTED YET) - Reset focal point + Remove files (NOT IMPLEMENTED YET) + Reset focal point
`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts index 2077022012..bc03872c53 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts @@ -103,17 +103,17 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
Alias - +
Width - + px
Height - + px
@@ -130,8 +130,8 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement ${item.alias} (${item.width} x ${item.height}px)
- this.#onEdit(item)}>Edit - this.#onRemove(item.alias)}>Remove + this.#onEdit(item)}>Edit + this.#onRemove(item.alias)}>Remove
`, From e421ba0188e645a4267d2992a2853c21f7a1db43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 7 Dec 2023 22:42:33 +1300 Subject: [PATCH 13/13] tiny mce max image size configuration --- ...rty-editor-ui-tiny-mce-maximagesize-configuration.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts index 86fa1a9750..323f500713 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts @@ -15,7 +15,7 @@ export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement value: number = 0; render() { - return html``; + return html``; } static styles = [UmbTextStyles];