From d3ee90fbeabc3dd10cea52426c3d51ea046fdf37 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:10:33 +0200 Subject: [PATCH 1/7] Update manifests.ts --- src/packages/property-editors/content-picker/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/packages/property-editors/content-picker/manifests.ts b/src/packages/property-editors/content-picker/manifests.ts index 98da3baee5..412adfacaf 100644 --- a/src/packages/property-editors/content-picker/manifests.ts +++ b/src/packages/property-editors/content-picker/manifests.ts @@ -14,6 +14,7 @@ const manifest: ManifestPropertyEditorUi = { icon: 'icon-page-add', group: 'pickers', propertyEditorSchemaAlias: 'Umbraco.MultiNodeTreePicker', + supportsReadOnly: true, settings: { properties: [ { From faf5cf7b245a57d61426fb2f10dddb90e963db37 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:11:23 +0200 Subject: [PATCH 2/7] pass readonly to input --- .../property-editor-ui-content-picker.element.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts b/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts index c40a756769..c6b35c9b2f 100644 --- a/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts +++ b/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts @@ -37,6 +37,15 @@ export class UmbPropertyEditorUIContentPickerElement } #value?: UmbContentPickerValueType = []; + /** + * 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() _type: UmbContentPickerSource['type'] = 'content'; @@ -150,6 +159,7 @@ export class UmbPropertyEditorUIContentPickerElement .startNode=${startNode} .allowedContentTypeIds=${this._allowedContentTypeUniques ?? ''} ?showOpenButton=${this._showOpenButton} + ?readonly=${this.readonly} @change=${this.#onChange}> `; } From d7cb8321317c1599d42db31488e64146af8df031 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:11:38 +0200 Subject: [PATCH 3/7] pass readonly to inputs --- .../input-content/input-content.element.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts b/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts index b404d9a51e..3d1485052e 100644 --- a/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts +++ b/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts @@ -8,7 +8,6 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-input-content'; - @customElement(elementName) export class UmbInputContentElement extends UmbFormControlMixin( UmbLitElement, @@ -79,6 +78,15 @@ export class UmbInputContentElement extends UmbFormControlMixin 0 ? this.#selection.join(',') : 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; + #entityTypeLookup = { content: 'document', media: 'media', member: 'member' }; #selection: Array = []; @@ -117,6 +125,7 @@ export class UmbInputContentElement extends UmbFormControlMixin `; } @@ -131,6 +140,7 @@ export class UmbInputContentElement extends UmbFormControlMixin `; } @@ -145,6 +155,7 @@ export class UmbInputContentElement extends UmbFormControlMixin `; } From 15e72166d0bdfe1962568de625c8653e42ab8773 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:25:21 +0200 Subject: [PATCH 4/7] readonly media picker --- .../input-media/input-media.element.ts | 62 ++++++++++++++----- .../media-entity-picker/manifests.ts | 1 + ...y-editor-ui-media-entity-picker.element.ts | 10 +++ 3 files changed, 59 insertions(+), 14 deletions(-) diff --git a/src/packages/media/media/components/input-media/input-media.element.ts b/src/packages/media/media/components/input-media/input-media.element.ts index 3e0d1f331a..e502ea7953 100644 --- a/src/packages/media/media/components/input-media/input-media.element.ts +++ b/src/packages/media/media/components/input-media/input-media.element.ts @@ -1,7 +1,16 @@ import type { UmbMediaCardItemModel } from '../../modals/index.js'; import type { UmbMediaItemModel } from '../../repository/index.js'; import { UmbMediaPickerContext } from './input-media.context.js'; -import { css, customElement, html, ifDefined, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + customElement, + html, + ifDefined, + nothing, + property, + repeat, + state, +} from '@umbraco-cms/backoffice/external/lit'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -13,7 +22,6 @@ import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import '@umbraco-cms/backoffice/imaging'; const elementName = 'umb-input-media'; - @customElement(elementName) export class UmbInputMediaElement extends UmbFormControlMixin(UmbLitElement) { #sorter = new UmbSorterController(this, { @@ -116,6 +124,27 @@ export class UmbInputMediaElement extends UmbFormControlMixin 0 ? this.selection.join(',') : 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 }) + public get readonly() { + return this.#readonly; + } + public set readonly(value) { + this.#readonly = value; + + if (this.#readonly) { + this.#sorter.disable(); + } else { + this.#sorter.enable(); + } + } + #readonly = false; + @state() private _editMediaPath = ''; @@ -182,7 +211,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin + label=${this.localize.term('general_choose')} + ?disabled=${this.readonly}> ${this.localize.term('general_choose')} @@ -207,30 +237,34 @@ export class UmbInputMediaElement extends UmbFormControlMixin + href="${ifDefined(href)}" + ?readonly=${this.readonly}> ${this.#renderIsTrashed(item)} - - this.#onRemove(item)}> - - - + ${this.#renderRemoveAction(item)} `; } + #renderRemoveAction(item: UmbMediaCardItemModel) { + if (this.readonly) return nothing; + return html` + this.#onRemove(item)}> + + + `; + } + #renderIsTrashed(item: UmbMediaCardItemModel) { - if (!item.isTrashed) return; + if (!item.isTrashed) return nothing; return html` Trashed diff --git a/src/packages/media/media/property-editors/media-entity-picker/manifests.ts b/src/packages/media/media/property-editors/media-entity-picker/manifests.ts index 3b0bb49284..86bf37902e 100644 --- a/src/packages/media/media/property-editors/media-entity-picker/manifests.ts +++ b/src/packages/media/media/property-editors/media-entity-picker/manifests.ts @@ -9,5 +9,6 @@ export const manifest: ManifestPropertyEditorUi = { label: 'Media Entity Picker', icon: 'icon-picture', group: 'pickers', + supportsReadOnly: true, }, }; diff --git a/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts b/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts index c5426bfe0f..96827931d1 100644 --- a/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts +++ b/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts @@ -19,6 +19,15 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i this._max = minMax?.max ?? Infinity; } + /** + * 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() _min: number = 0; @@ -36,6 +45,7 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i .min=${this._min} .max=${this._max} .value=${this.value} + ?readonly=${this.readonly} @change=${this.#onChange}> `; } From 4e5524815e3d5e4f53368803e27ef667e55f95ca Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 28 Aug 2024 10:30:55 +0200 Subject: [PATCH 5/7] simplify readonly UI by hiding adds button when something is selected --- .../input-document/input-document.element.ts | 12 ++++---- .../input-media/input-media.element.ts | 28 +++++++++++-------- .../input-rich-media.element.ts | 26 +++++++++-------- .../input-member-group.element.ts | 16 +++++++---- .../input-member/input-member.element.ts | 20 +++++++------ .../input-multi-url.element.ts | 22 +++++++++------ 6 files changed, 73 insertions(+), 51 deletions(-) diff --git a/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/packages/documents/documents/components/input-document/input-document.element.ts index ae0236a47d..18575ba822 100644 --- a/src/packages/documents/documents/components/input-document/input-document.element.ts +++ b/src/packages/documents/documents/components/input-document/input-document.element.ts @@ -197,15 +197,17 @@ export class UmbInputDocumentElement extends UmbFormControlMixin= this.max) return; - return html` - = this.max) return nothing; + if (this.readonly && this.selection.length > 0) { + return nothing; + } else { + return html` - `; + ?disabled=${this.readonly}>`; + } } #renderItems() { diff --git a/src/packages/media/media/components/input-media/input-media.element.ts b/src/packages/media/media/components/input-media/input-media.element.ts index fab5adca27..9be7203248 100644 --- a/src/packages/media/media/components/input-media/input-media.element.ts +++ b/src/packages/media/media/components/input-media/input-media.element.ts @@ -222,18 +222,22 @@ export class UmbInputMediaElement extends UmbFormControlMixin= this.max) return; - return html` - - - ${this.localize.term('general_choose')} - - `; + if (this._cards && this.max && this._cards.length >= this.max) return nothing; + if (this.readonly && this._cards.length > 0) { + return nothing; + } else { + return html` + + + ${this.localize.term('general_choose')} + + `; + } } #renderItem(item: UmbMediaCardItemModel) { diff --git a/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index 9b5cf80fef..e89055aa0b 100644 --- a/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -362,17 +362,21 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, #renderAddButton() { if ((this._cards && this.max && this._cards.length >= this.max) || (this._cards.length && !this.multiple)) return; - return html` - - - ${this.localize.term('general_choose')} - - `; + if (this.readonly && this._cards.length > 0) { + return nothing; + } else { + return html` + + + ${this.localize.term('general_choose')} + + `; + } } #renderItem(item: UmbRichMediaCardModel) { diff --git a/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts index 42e4eb17b8..06e85a651a 100644 --- a/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts +++ b/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts @@ -190,12 +190,16 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin= this.max) return nothing; - return html``; + if (this.readonly && this.selection.length > 0) { + return nothing; + } else { + return html``; + } } #renderItem(item: UmbMemberGroupItemModel) { diff --git a/src/packages/members/member/components/input-member/input-member.element.ts b/src/packages/members/member/components/input-member/input-member.element.ts index 3c1983d5c9..b8ffac2d53 100644 --- a/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/packages/members/member/components/input-member/input-member.element.ts @@ -196,14 +196,18 @@ export class UmbInputMemberElement extends UmbFormControlMixin= this.max) return nothing; - return html` - - `; + if (this.readonly && this.selection.length > 0) { + return nothing; + } else { + return html` + + `; + } } #renderItem(item: UmbMemberItemModel) { diff --git a/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts index 13be644661..67b398fbdc 100644 --- a/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts +++ b/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts @@ -272,15 +272,19 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, } #renderAddButton() { - if (this.max === 1 && this.urls && this.urls.length >= this.max) return; - return html` - - `; + if (this.max === 1 && this.urls && this.urls.length >= this.max) return nothing; + if (this.readonly && this.urls.length > 0) { + return nothing; + } else { + return html` + + `; + } } #renderItems() { From b158333e2800a8e7a3446609fbd31c4f1e01dc0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 2 Sep 2024 19:35:14 +0200 Subject: [PATCH 6/7] add tdo comment input-media.element.ts --- .../media/media/components/input-media/input-media.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/packages/media/media/components/input-media/input-media.element.ts b/src/packages/media/media/components/input-media/input-media.element.ts index 9be7203248..b6cbe7a4ef 100644 --- a/src/packages/media/media/components/input-media/input-media.element.ts +++ b/src/packages/media/media/components/input-media/input-media.element.ts @@ -222,6 +222,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin= this.max) return nothing; if (this.readonly && this._cards.length > 0) { return nothing; From 607fc1d4edfc23abb866c29ab55c8b8d748e28a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 2 Sep 2024 19:37:07 +0200 Subject: [PATCH 7/7] TODO comment on input-rich-media.element.ts --- .../components/input-rich-media/input-rich-media.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index e89055aa0b..1e705d6de7 100644 --- a/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -361,6 +361,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, } #renderAddButton() { + // TODO: Stop preventing adding more, instead implement proper validation for user feedback. [NL] if ((this._cards && this.max && this._cards.length >= this.max) || (this._cards.length && !this.multiple)) return; if (this.readonly && this._cards.length > 0) { return nothing;