From 9cfacc18d768a2287d3da2351f2280c66cecdfd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 16 Aug 2024 21:52:12 +0200 Subject: [PATCH] fix inline editing mode for Block List Editor --- .../block-list-entry.element.ts | 4 +- .../inline-list-block.element.ts | 145 +++++++++++++++--- .../ref-list-block/ref-list-block.element.ts | 6 +- ...ace-view-edit-content-no-router.element.ts | 10 +- .../block-workspace-view-edit-tab.element.ts | 27 ++-- 5 files changed, 155 insertions(+), 37 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts index 4d8764fec6..50ef8fd776 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts @@ -200,11 +200,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper }; #renderRefBlock() { - return html``; + return html``; } #renderInlineBlock() { - return html``; + return html``; } #renderBlock() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts index 23735f41ac..fc432e787d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts @@ -17,9 +17,12 @@ export class UmbInlineListBlockElement extends UmbLitElement { #workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE; #contentUdi?: string; - @property({ type: String }) + @property({ type: String, reflect: false }) label?: string; + @property({ type: String, reflect: false }) + icon?: string; + @state() _isOpen = false; @@ -60,27 +63,111 @@ export class UmbInlineListBlockElement extends UmbLitElement { } override render() { - return html` - - ${this._isOpen === true - ? html`` - : ''} - `; + return html` +
+ + ${this._isOpen === true + ? html`` + : ''} +
+ `; + } + + #renderContent() { + return html` + + + + +
+
${this.label}
+
+ + `; } static override styles = [ UmbTextStyles, css` - #accordion-button { + #host { + position: relative; + display: block; + width: 100%; + + box-sizing: border-box; + border-radius: var(--uui-border-radius); + background-color: var(--uui-color-surface); + + border: 1px solid var(--uui-color-border); + transition: border-color 80ms; + + min-width: 250px; + } + #open-part + * { + border-top: 1px solid var(--uui-color-border); + } + :host([disabled]) #open-part { + cursor: default; + transition: border-color 80ms; + } + :host(:not([disabled])) #host:has(#open-part:hover) { + border-color: var(--uui-color-border-emphasis); + } + :host(:not([disabled])) #open-part:hover + * { + border-color: var(--uui-color-border-emphasis); + } + :host([disabled]) #host { + border-color: var(--uui-color-disabled-standalone); + } + + slot[name='tag'] { + flex-grow: 1; + + display: flex; + justify-content: flex-end; + align-items: center; + } + + button { + font-size: inherit; + font-family: inherit; + border: 0; + padding: 0; + background-color: transparent; + text-align: left; + color: var(--uui-color-text); + } + + #content { + align-self: stretch; + line-height: normal; + display: flex; + position: relative; + align-items: center; + } + + #open-part { + color: inherit; + text-decoration: none; + cursor: pointer; + display: flex; text-align: left; align-items: center; @@ -88,7 +175,29 @@ export class UmbInlineListBlockElement extends UmbLitElement { width: 100%; border: none; background: none; - padding: 0; + + min-height: var(--uui-size-16); + padding: calc(var(--uui-size-2) + 1px); + } + + #icon { + font-size: 1.2em; + margin-left: var(--uui-size-2); + margin-right: var(--uui-size-1); + } + + :host(:not([disabled])) #open-part:hover #icon { + color: var(--uui-color-interactive-emphasis); + } + :host(:not([disabled])) #open-part:hover #name { + color: var(--uui-color-interactive-emphasis); + } + + :host([disabled]) #icon { + color: var(--uui-color-disabled-contrast); + } + :host([disabled]) #name { + color: var(--uui-color-disabled-contrast); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts index 2c167d839a..828caa1ac6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts @@ -11,9 +11,12 @@ import '@umbraco-cms/backoffice/ufm'; @customElement('umb-ref-list-block') export class UmbRefListBlockElement extends UmbLitElement { // - @property({ type: String }) + @property({ type: String, reflect: false }) label?: string; + @property({ type: String, reflect: false }) + icon?: string; + @state() _content?: UmbBlockDataType; @@ -46,6 +49,7 @@ export class UmbRefListBlockElement extends UmbLitElement { override render() { return html` + `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts index abc74ff912..62a9961c71 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts @@ -47,6 +47,8 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => { this.#blockWorkspace = workspaceContext; this.#tabsStructureHelper.setStructureManager(workspaceContext.content.structure); + + // TODO: Switch to use .setup when Validation is merged. [NL] workspaceContext.content.createPropertyDatasetContext(this); this._observeRootGroups(); }); @@ -118,11 +120,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme ? html` + .containerId=${this._activeTabId}> ` : ''} `; @@ -135,6 +133,8 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme display: block; height: 100%; --uui-tab-background: var(--uui-color-surface); + + padding: calc(var(--uui-size-layout-1)); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts index 5bc56080a5..34e88a91a2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts @@ -83,17 +83,22 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { class="properties" .containerId=${this._containerId}>` : ''} - ${repeat( - this._groups, - (group) => group.id, - (group) => - html` `, - )} + ${this.hideSingleGroup && this._groups.length === 1 + ? this.renderGroup(this._groups[0]) + : repeat( + this._groups, + (group) => group.id, + (group) => html` ${this.renderGroup(group)}`, + )} + `; + } + + renderGroup(group: UmbPropertyTypeContainerModel) { + return html` + `; }