From d84d1fc55d73458b10aea6be63491cb48ebef22d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 28 Apr 2024 13:11:40 +0200 Subject: [PATCH 01/11] only render context menu when it is open --- .../section-sidebar.element.ts | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts index 65da98a094..c330a5a1dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts @@ -1,20 +1,31 @@ import { UmbSectionSidebarContext } from './section-sidebar.context.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-section-sidebar') export class UmbSectionSidebarElement extends UmbLitElement { + @state() + private _isOpen = false; + #sectionSidebarContext = new UmbSectionSidebarContext(this); + constructor() { + super(); + + this.observe(this.#sectionSidebarContext.contextMenuIsOpen, (value) => { + this._isOpen = value; + }); + } + render() { - return html` - - - - - - `; + return this._isOpen + ? html` ${this.#renderScrollContainer()} ` + : this.#renderScrollContainer(); + } + + #renderScrollContainer() { + return html` `; } static styles = [ From 341ca9dd21ddfcd9436f0a25c13a40d751af95d6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 28 Apr 2024 14:02:37 +0200 Subject: [PATCH 02/11] require host in open/toggle method --- .../section-sidebar.context.ts | 21 +++++++++++++------ .../core/section/section-sidebar/types.ts | 5 +++++ 2 files changed, 20 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts index 839d76ae90..e845b8eff7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts @@ -1,3 +1,4 @@ +import type { UmbOpenContextMenuArgs } from './types.js'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; @@ -16,21 +17,24 @@ export class UmbSectionSidebarContext extends UmbContextBase(undefined); headline = this.#headline.asObservable(); + #contextElement: HTMLElement | undefined = undefined; + constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_CONTEXT); } - toggleContextMenu(entityType: string, unique: string | null | undefined, headline: string | undefined) { - this.openContextMenu(entityType, unique, headline); + toggleContextMenu(host: HTMLElement, args: UmbOpenContextMenuArgs) { + this.openContextMenu(host, args); } // TODO: we wont get notified about tree item name changes because we don't have a subscription // we need to figure out how we best can handle this when we only know the entity and unique id - openContextMenu(entityType: string, unique: string | null | undefined, headline: string | undefined) { - this.#entityType.setValue(entityType); - this.#unique.setValue(unique); - this.#headline.setValue(headline); + openContextMenu(host: HTMLElement, args: UmbOpenContextMenuArgs) { + this.#entityType.setValue(args.entityType); + this.#unique.setValue(args.unique); + this.#headline.setValue(args.headline); this.#contextMenuIsOpen.setValue(true); + this.#contextElement = host; } closeContextMenu() { @@ -38,6 +42,11 @@ export class UmbSectionSidebarContext extends UmbContextBase Date: Sun, 28 Apr 2024 14:05:17 +0200 Subject: [PATCH 03/11] align method names --- .../core/section/section-sidebar/section-sidebar.context.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts index e845b8eff7..69d9348efb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts @@ -45,7 +45,7 @@ export class UmbSectionSidebarContext extends UmbContextBase Date: Sun, 28 Apr 2024 14:11:30 +0200 Subject: [PATCH 04/11] proxy context requests --- .../section-sidebar-context-menu.element.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts index b17d9635c8..16cd02b42e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts @@ -4,6 +4,8 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { observeMultiple } from '@umbraco-cms/backoffice/observable-api'; +import type { UmbContextRequestEvent } from '@umbraco-cms/backoffice/context-api'; +import { UMB_CONTENT_REQUEST_EVENT_TYPE } from '@umbraco-cms/backoffice/context-api'; @customElement('umb-section-sidebar-context-menu') export class UmbSectionSidebarContextMenuElement extends UmbLitElement { @@ -39,6 +41,19 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { this.removeUmbControllerByAlias('_observeHeadline'); } }); + + this.addEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, this.#proxyContextRequests as EventListener); + } + + #proxyContextRequests(event: UmbContextRequestEvent) { + if (!this.#sectionSidebarContext) return; + // Note for this hack (The if-sentence): [NL] + // We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched. + // To avoid such this hack just prevents proxying the event if its a request for its own context. + if (event.contextAlias !== UMB_SECTION_SIDEBAR_CONTEXT.contextAlias) { + event.stopImmediatePropagation(); + this.#sectionSidebarContext.getContextElement()?.dispatchEvent(event.clone()); + } } #observeEntityModel() { @@ -94,6 +109,11 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { : nothing; } + disconnectedCallback(): void { + super.disconnectedCallback(); + this.removeEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, this.#proxyContextRequests as EventListener); + } + static styles = [ UmbTextStyles, css` From ce33c144369305e3499c2afaf01b5196d77b5fad Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Sun, 28 Apr 2024 14:12:33 +0200 Subject: [PATCH 05/11] pass host and args --- .../entity-actions-bundle/entity-actions-bundle.element.ts | 6 +++++- .../tree/tree-item/tree-item-base/tree-item-context-base.ts | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts index 98b3c13bea..71090ba875 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts @@ -75,7 +75,11 @@ export class UmbEntityActionsBundleElement extends UmbLitElement { #openContextMenu() { if (!this.entityType) throw new Error('Entity type is not defined'); if (this.unique === undefined) throw new Error('Unique is not defined'); - this.#sectionSidebarContext?.toggleContextMenu(this.entityType, this.unique, this.label); + this.#sectionSidebarContext?.toggleContextMenu(this, { + entityType: this.entityType, + unique: this.unique, + headline: this.label, + }); } async #onFirstActionClick(event: PointerEvent) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts index 3c7a25dfac..93825c96df 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts @@ -180,7 +180,11 @@ export abstract class UmbTreeItemContextBase Date: Mon, 29 Apr 2024 08:52:55 +0200 Subject: [PATCH 06/11] Revert "only render context menu when it is open" This reverts commit d84d1fc55d73458b10aea6be63491cb48ebef22d. --- .../section-sidebar.element.ts | 27 ++++++------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts index c330a5a1dd..65da98a094 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts @@ -1,31 +1,20 @@ import { UmbSectionSidebarContext } from './section-sidebar.context.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-section-sidebar') export class UmbSectionSidebarElement extends UmbLitElement { - @state() - private _isOpen = false; - #sectionSidebarContext = new UmbSectionSidebarContext(this); - constructor() { - super(); - - this.observe(this.#sectionSidebarContext.contextMenuIsOpen, (value) => { - this._isOpen = value; - }); - } - render() { - return this._isOpen - ? html` ${this.#renderScrollContainer()} ` - : this.#renderScrollContainer(); - } - - #renderScrollContainer() { - return html` `; + return html` + + + + + + `; } static styles = [ From 026a52847a07d00541255ab05570fd4b3e9d1f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 30 Apr 2024 12:56:40 +0200 Subject: [PATCH 07/11] move proxy event handler --- .../section-sidebar-context-menu.element.ts | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts index 16cd02b42e..7e4c545168 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts @@ -41,19 +41,6 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { this.removeUmbControllerByAlias('_observeHeadline'); } }); - - this.addEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, this.#proxyContextRequests as EventListener); - } - - #proxyContextRequests(event: UmbContextRequestEvent) { - if (!this.#sectionSidebarContext) return; - // Note for this hack (The if-sentence): [NL] - // We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched. - // To avoid such this hack just prevents proxying the event if its a request for its own context. - if (event.contextAlias !== UMB_SECTION_SIDEBAR_CONTEXT.contextAlias) { - event.stopImmediatePropagation(); - this.#sectionSidebarContext.getContextElement()?.dispatchEvent(event.clone()); - } } #observeEntityModel() { @@ -81,6 +68,17 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { this.#closeContextMenu(); } + #proxyContextRequests(event: UmbContextRequestEvent) { + if (!this.#sectionSidebarContext) return; + // Note for this hack (The if-sentence): [NL] + // We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched. + // To avoid such this hack just prevents proxying the event if its a request for its own context. + if (event.contextAlias !== UMB_SECTION_SIDEBAR_CONTEXT.contextAlias) { + event.stopImmediatePropagation(); + this.#sectionSidebarContext.getContextElement()?.dispatchEvent(event.clone()); + } + } + render() { return html` ${this.#renderBackdrop()} @@ -99,7 +97,7 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { #renderModal() { return this._isOpen && this._unique !== undefined && this._entityType - ? html`
+ ? html`
${this._headline ? html`

${this.localize.string(this._headline)}

` : nothing} Date: Tue, 30 Apr 2024 13:44:07 +0200 Subject: [PATCH 08/11] align element type with modals --- .../core/section/section-sidebar/section-sidebar.context.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts index 69d9348efb..5fad1202bb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts @@ -17,19 +17,19 @@ export class UmbSectionSidebarContext extends UmbContextBase(undefined); headline = this.#headline.asObservable(); - #contextElement: HTMLElement | undefined = undefined; + #contextElement: Element | undefined = undefined; constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_CONTEXT); } - toggleContextMenu(host: HTMLElement, args: UmbOpenContextMenuArgs) { + toggleContextMenu(host: Element, args: UmbOpenContextMenuArgs) { this.openContextMenu(host, args); } // TODO: we wont get notified about tree item name changes because we don't have a subscription // we need to figure out how we best can handle this when we only know the entity and unique id - openContextMenu(host: HTMLElement, args: UmbOpenContextMenuArgs) { + openContextMenu(host: Element, args: UmbOpenContextMenuArgs) { this.#entityType.setValue(args.entityType); this.#unique.setValue(args.unique); this.#headline.setValue(args.headline); From 9f6f1ecfd9eb0ccbdfe5fe23f8daddab8418eabe Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 30 Apr 2024 13:44:18 +0200 Subject: [PATCH 09/11] pass host element instead of class --- .../tree/tree-item/tree-item-base/tree-item-context-base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts index 93825c96df..d86bd67532 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts @@ -180,7 +180,7 @@ export abstract class UmbTreeItemContextBase Date: Tue, 30 Apr 2024 15:25:14 +0200 Subject: [PATCH 10/11] fix --- .../property-editor-ui-picker-modal.element.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts index 7a1894f23f..6c19375a8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts @@ -30,14 +30,13 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< connectedCallback(): void { super.connectedCallback(); - this._submitLabel = this.data?.submitLabel ?? this._submitLabel; + // TODO: We never parse on a submit label, so this seem weird as we don't enable this of other places. + //this._submitLabel = this.data?.submitLabel ?? this._submitLabel; this.#usePropertyEditorUIs(); } #usePropertyEditorUIs() { - if (!this.data) return; - this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => { // Only include Property Editor UIs which has Property Editor Schema Alias this._propertyEditorUIs = propertyEditorUIs.filter( From 561bbdb0249cdd53fa9871f981ae098dc2dc6719 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 30 Apr 2024 20:08:13 +0200 Subject: [PATCH 11/11] clean up --- .../section-sidebar-context-menu.element.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts index 7e4c545168..c1cdbe7762 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts @@ -107,11 +107,6 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { : nothing; } - disconnectedCallback(): void { - super.disconnectedCallback(); - this.removeEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, this.#proxyContextRequests as EventListener); - } - static styles = [ UmbTextStyles, css`