From f95ae32958834e0040230c09f8a324304df4bc78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 15:38:49 +0200 Subject: [PATCH 1/8] create before and after buttons --- .../block-grid-entry.element.ts | 105 ++++++++++++++++-- .../block-grid-scale-manager.controller.ts | 6 +- .../property-editor-ui-block-list.element.ts | 1 + .../block/context/block-entry.context.ts | 18 +-- 4 files changed, 112 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index c1b6eeb54c..eaf3493964 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -1,6 +1,14 @@ import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { + html, + css, + customElement, + property, + state, + nothing, + type PropertyValueMap, +} from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block'; import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid'; @@ -37,6 +45,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper // #context = new UmbBlockGridEntryContext(this); + #renderTimeout: number | undefined; @state() _columnSpan?: number; @@ -51,7 +60,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper // If _createPath is undefined, its because no blocks are allowed to be created here[NL] @state() - _createPath?: string; + _createBeforePath?: string; + @state() + _createAfterPath?: string; @state() _label = ''; @@ -68,6 +79,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper @state() _canScale?: boolean; + @state() + _showInlineCreateBefore?: boolean; + @state() + _showInlineCreateAfter?: boolean; + @state() + _inlineCreateAboveWidth?: string; + // TODO: use this type on the Element Interface for the Manifest. @state() _blockViewProps: UmbBlockViewPropsType = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render. @@ -110,10 +128,15 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper }); // Paths: - this.observe(this.#context.createPath, (createPath) => { - const oldValue = this._createPath; - this._createPath = createPath; - this.requestUpdate('_createPath', oldValue); + this.observe(this.#context.createBeforePath, (createPath) => { + //const oldValue = this._createBeforePath; + this._createBeforePath = createPath; + //this.requestUpdate('_createPath', oldValue); + }); + this.observe(this.#context.createAfterPath, (createPath) => { + //const oldValue = this._createAfterPath; + this._createAfterPath = createPath; + //this.requestUpdate('_createPath', oldValue); }); this.observe(this.#context.workspaceEditContentPath, (path) => { this._workspaceEditContentPath = path; @@ -156,8 +179,52 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper this.setAttribute('data-content-element-type-alias', contentElementTypeAlias); } }); + + this.#callUpdateInlineCreateButtons(); } + protected updated(_changedProperties: PropertyValueMap | Map): void { + super.updated(_changedProperties); + if (_changedProperties.has('_blockViewProps') || _changedProperties.has('_columnSpan')) { + this.#callUpdateInlineCreateButtons(); + } + } + + #callUpdateInlineCreateButtons() { + clearTimeout(this.#renderTimeout); + this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100) as unknown as number; + } + + #updateInlineCreateButtons = () => { + // TODO: Could we optimize this, so it wont break?, cause currently we trust blindly that parentElement is '.umb-block-grid__layout-container' [NL] + const layoutContainer = this.parentElement; + if (!layoutContainer) return; + const layoutContainerRect = layoutContainer.getBoundingClientRect(); + + if (layoutContainerRect.width === 0) { + this._showInlineCreateBefore = false; + this._showInlineCreateAfter = false; + this._inlineCreateAboveWidth = undefined; + this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100) as unknown as number; + return; + } + + const layoutItemRect = this.getBoundingClientRect(); + if (layoutItemRect.right > layoutContainerRect.right - 5) { + this._showInlineCreateAfter = false; + } else { + this._showInlineCreateAfter = true; + } + + if (layoutItemRect.left > layoutContainerRect.left + 5) { + this._showInlineCreateBefore = false; + this._inlineCreateAboveWidth = undefined; + } else { + this._inlineCreateAboveWidth = getComputedStyle(layoutContainer).width; + this._showInlineCreateBefore = true; + } + }; + #renderInlineEditBlock() { return html`` + ${this._createBeforePath && this._showInlineCreateBefore + ? html`` : nothing}
` : nothing}
+ ${this._createAfterPath && this._showInlineCreateAfter + ? html`` + : nothing} ` : nothing; } @@ -223,6 +301,17 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper top: var(--uui-size-2); right: var(--uui-size-2); } + uui-button-inline-create { + top: 0px; + position: absolute; + + // Avoid showing inline-create in dragging-mode + --umb-block-grid__block--inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none; + display: var(--umb-block-grid__block--inline-create-button-display--condition); + } + uui-button-inline-create[vertical] { + right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5)); + } :host([drag-placeholder]) { opacity: 0.2; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.ts index 2fd4d9f9d7..6dc5a7ca07 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.ts @@ -128,11 +128,11 @@ export class UmbBlockGridScaleManager extends UmbControllerBase { let newColumnSpan = Math.max(blockEndCol - blockStartCol, 1); - const spanOptions = this._host.getRelevantColumnSpanOptions(); - if (!spanOptions) return; + const columnOptions = this._host.getRelevantColumnSpanOptions(); + if (!columnOptions) return; // Find nearest allowed Column: - const bestColumnSpanOption = closestColumnSpanOption(newColumnSpan, spanOptions, layoutColumns - blockStartCol); + const bestColumnSpanOption = closestColumnSpanOption(newColumnSpan, columnOptions, layoutColumns - blockStartCol); newColumnSpan = bestColumnSpanOption ?? layoutColumns; // Find allowed row spans: diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index abf6497b5f..e9e8b905dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -176,6 +176,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement (x) => x.contentUdi, (layoutEntry, index) => html` `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts index ad79fc4d13..c182b6e57b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts @@ -61,8 +61,10 @@ export abstract class UmbBlockEntryContext< this.#index.setValue(index); } - #createPath = new UmbStringState(undefined); - readonly createPath = this.#createPath.asObservable(); + #createBeforePath = new UmbStringState(undefined); + readonly createBeforePath = this.#createBeforePath.asObservable(); + #createAfterPath = new UmbStringState(undefined); + readonly createAfterPath = this.#createAfterPath.asObservable(); #contentElementTypeName = new UmbStringState(undefined); public readonly contentElementTypeName = this.#contentElementTypeName.asObservable(); @@ -173,7 +175,7 @@ export abstract class UmbBlockEntryContext< }); this.observe(this.index, () => { - this.#updateCreatePath(); + this.#updateCreatePaths(); }); } @@ -181,16 +183,18 @@ export abstract class UmbBlockEntryContext< return this._layout.value?.contentUdi; } - #updateCreatePath() { + #updateCreatePaths() { const index = this.#index.value; if (this._entries && index !== undefined) { this.observe( observeMultiple([this._entries.catalogueRouteBuilder, this._entries.canCreate]), ([catalogueRouteBuilder, canCreate]) => { if (catalogueRouteBuilder && canCreate) { - this.#createPath.setValue(this._entries!.getPathForCreateBlock(index)); + this.#createBeforePath.setValue(this._entries!.getPathForCreateBlock(index)); + this.#createAfterPath.setValue(this._entries!.getPathForCreateBlock(index + 1)); } else { - this.#createPath.setValue(undefined); + this.#createBeforePath.setValue(undefined); + this.#createAfterPath.setValue(undefined); } }, 'observeRouteBuilderCreate', @@ -227,7 +231,7 @@ export abstract class UmbBlockEntryContext< abstract _gotManager(): void; #gotEntries() { - this.#updateCreatePath(); + this.#updateCreatePaths(); this.#observeLayout(); if (this._entries) { this.observe( From 892e6f09fcebd7b19f5fbff296f64b954009057d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 16:24:01 +0200 Subject: [PATCH 2/8] styling of inline create buttons --- .../block-grid-entries.element.ts | 3 ++- .../block-grid-entry.element.ts | 21 ++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts index fe7917928c..ce4b663517 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts @@ -207,8 +207,9 @@ export class UmbBlockGridEntriesElement extends UmbLitElement { (x) => x.contentUdi, (layoutEntry, index) => html` `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index eaf3493964..7f3a31f2a6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -22,7 +22,7 @@ import '../block-scale-handler/index.js'; @customElement('umb-block-grid-entry') export class UmbBlockGridEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement { // - @property({ type: Number }) + @property({ type: Number, reflect: true }) public get index(): number | undefined { return this.#context.getIndex(); } @@ -309,9 +309,28 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper --umb-block-grid__block--inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none; display: var(--umb-block-grid__block--inline-create-button-display--condition); } + uui-button-inline-create:not([vertical]) { + left: 0; + width: var(--umb-block-grid-editor--inline-create-width, 100%); + } + :host(:not([index='0'])) uui-button-inline-create:not([vertical]) { + top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5); + } + + :host([at-root]) uui-button-inline-create[vertical] { + /* If at root, and full-width then become 40px wider: */ + --calc: clamp(0, calc(var(--umb-block-grid--item-column-span) - (var(--umb-block-grid--grid-columns)-1)), 1); + left: calc(-20px * var(--calc)); + width: calc(var(--umb-block-grid-editor--inline-create-width, 100%) + 40px * var(--calc)); + } uui-button-inline-create[vertical] { right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5)); } + :host([at-root]) uui-button-inline-create[vertical] { + /* If at root, and full-width then move a little out to the right: */ + --calc: clamp(0, calc(var(--umb-block-grid--item-column-span) - (var(--umb-block-grid--grid-columns)-1)), 1); + right: calc(-2px * var(--calc)); + } :host([drag-placeholder]) { opacity: 0.2; From 436aaef53640585f83e5bf3a1e6b7b3e2b120278 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 16:51:15 +0200 Subject: [PATCH 3/8] correct insert at index in area --- .../src/libs/observable-api/utils/index.ts | 1 + .../block/block-grid/context/block-grid-manager.context.ts | 7 +++++-- .../packages/block/block/context/block-entry.context.ts | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts index f207030636..ff6dfc7e0d 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts @@ -8,6 +8,7 @@ export * from './json-string-comparison.function.js'; export * from './merge-observables.function.js'; export * from './observe-multiple.function.js'; export * from './partial-update-frozen-array.function.js'; +export * from './push-at-to-unique-array.function.js'; export * from './push-to-unique-array.function.js'; export * from './simple-hash-code.function.js'; export * from './strict-equality-memoization.function.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts index a2d7737ec8..1f578296e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts @@ -1,7 +1,7 @@ import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js'; import type { UmbBlockGridWorkspaceData } from '../index.js'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -import { UmbArrayState, appendToFrozenArray, partialUpdateFrozenArray } from '@umbraco-cms/backoffice/observable-api'; +import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '@umbraco-cms/backoffice/observable-api'; import { type UmbBlockDataType, UmbBlockManagerContext } from '@umbraco-cms/backoffice/block'; import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type'; @@ -71,7 +71,10 @@ export class UmbBlockGridManagerContext< // Append the layout entry to be inserted and unfreeze the rest of the data: const areas = currentEntry.areas.map((x) => x.key === areaKey - ? { ...x, items: appendToFrozenArray(x.items, insert, (x) => x.contentUdi === insert.contentUdi) } + ? { + ...x, + items: pushAtToUniqueArray([...x.items], insert, (x) => x.contentUdi === insert.contentUdi, index), + } : x, ); return appendToFrozenArray( diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts index c182b6e57b..f5f76b8de7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts @@ -362,6 +362,7 @@ export abstract class UmbBlockEntryContext< async requestDelete() { const blockName = this.getLabel(); + // TODO: Localizations missing [NL] await umbConfirmModal(this, { headline: `Delete ${blockName}`, content: `Are you sure you want to delete this ${blockName}?`, From 6ef454e3c36d56ca22eb77b0e6512d2839739056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 20:52:31 +0200 Subject: [PATCH 4/8] only make layout corrections if layout entry is not undefined --- .../context/block-grid-entry.context.ts | 59 +++++++++---------- .../block/context/block-entry.context.ts | 6 +- 2 files changed, 30 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts index 7eeb562cd1..4dee713f93 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts @@ -102,11 +102,12 @@ export class UmbBlockGridEntryContext columnSpan = this.#calcColumnSpan(columnSpan, this.getRelevantColumnSpanOptions(), layoutColumns); if (columnSpan === this.getColumnSpan()) return; - //this._layout.update({ columnSpan }); - //const contentUdi = this.getContentUdi(); - //if (!contentUdi) return; - //this._manager?.updateLayout({ contentUdi, columnSpan }); - this._layout.update({ columnSpan }); + const layoutValue = this._layout.getValue(); + if (!layoutValue) return; + this._layout.setValue({ + ...layoutValue, + columnSpan, + }); } /** * Get the column span of this entry. @@ -125,11 +126,12 @@ export class UmbBlockGridEntryContext if (!minMax) return; rowSpan = Math.max(minMax[0], Math.min(rowSpan, minMax[1])); if (rowSpan === this.getRowSpan()) return; - //this._layout.update({ rowSpan }); - //const contentUdi = this.getContentUdi(); - //if (!contentUdi) return; - //this._manager?.updateLayout({ contentUdi, rowSpan }); - this._layout.update({ rowSpan }); + const layoutValue = this._layout.getValue(); + if (!layoutValue) return; + this._layout.setValue({ + ...layoutValue, + rowSpan, + }); } /** * Get the row span of this entry. @@ -145,7 +147,6 @@ export class UmbBlockGridEntryContext _gotEntries() { this.scaleManager.setEntriesContext(this._entries); - if (!this._entries) return; this.#gotEntriesAndManager(); @@ -185,7 +186,6 @@ export class UmbBlockGridEntryContext if (!this._entries || !this._manager) return; // Secure areas fits options: - // NOLZ this.observe( observeMultiple([this.areas, this.layoutAreas]), ([areas, layoutAreas]) => { @@ -193,15 +193,10 @@ export class UmbBlockGridEntryContext const areasAreIdentical = areas.length === layoutAreas.length && areas.every((area) => layoutAreas.some((y) => y.key === area.key)); if (areasAreIdentical === false) { - /* - const contentUdi = this.getContentUdi(); - if (!contentUdi) return; - this._manager?.updateLayout({ - contentUdi, - areas: layoutAreas.map((x) => (areas.find((y) => y.key === x.key) ? x : { key: x.key, items: [] })), - }); - */ - this._layout.update({ + const layoutValue = this._layout.getValue(); + if (!layoutValue) return; + this._layout.setValue({ + ...layoutValue, areas: layoutAreas.map((x) => (areas.find((y) => y.key === x.key) ? x : { key: x.key, items: [] })), }); } @@ -210,7 +205,6 @@ export class UmbBlockGridEntryContext ); // Secure columnSpan fits options: - // NOLZ this.observe( observeMultiple([this.layout, this.columnSpan, this.relevantColumnSpanOptions, this._entries.layoutColumns]), ([layout, columnSpan, relevantColumnSpanOptions, layoutColumns]) => { @@ -221,27 +215,30 @@ export class UmbBlockGridEntryContext layoutColumns, ); if (newColumnSpan !== columnSpan) { - //const contentUdi = this.getContentUdi(); - //if (!contentUdi) return; - //this._manager?.updateLayout({ contentUdi, columnSpan: newColumnSpan }); - this._layout.update({ columnSpan: newColumnSpan }); + const layoutValue = this._layout.getValue(); + if (!layoutValue) return; + this._layout.setValue({ + ...layoutValue, + columnSpan: newColumnSpan, + }); } }, 'observeColumnSpanValidation', ); // Secure rowSpan fits options: - // NOLZ this.observe( observeMultiple([this.minMaxRowSpan, this.rowSpan]), ([minMax, rowSpan]) => { if (minMax) { const newRowSpan = Math.max(minMax[0], Math.min(rowSpan ?? 1, minMax[1])); if (newRowSpan !== rowSpan) { - //const contentUdi = this.getContentUdi(); - //if (!contentUdi) return; - //this._manager!.updateLayout({ contentUdi, rowSpan: newRowSpan }); - this._layout.update({ rowSpan: newRowSpan }); + const layoutValue = this._layout.getValue(); + if (!layoutValue) return; + this._layout.setValue({ + ...layoutValue, + rowSpan: newRowSpan, + }); } } }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts index f5f76b8de7..ba4b67f5a3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts @@ -249,13 +249,11 @@ export abstract class UmbBlockEntryContext< abstract _gotEntries(): void; #observeData() { - if (!this._manager) return; - const contentUdi = this._layout.value?.contentUdi; - if (!contentUdi) return; + if (!this._manager || !this.#contentUdi) return; // observe content: this.observe( - this._manager.contentOf(contentUdi), + this._manager.contentOf(this.#contentUdi), (content) => { this.#content.setValue(content); }, From 9081dbdf912b336a3383e16dec68b6a03b10f3ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 21:28:23 +0200 Subject: [PATCH 5/8] remove styling detail --- .../block-grid-entry/block-grid-entry.element.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index 7f3a31f2a6..3857129de7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -316,21 +316,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper :host(:not([index='0'])) uui-button-inline-create:not([vertical]) { top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5); } - - :host([at-root]) uui-button-inline-create[vertical] { - /* If at root, and full-width then become 40px wider: */ - --calc: clamp(0, calc(var(--umb-block-grid--item-column-span) - (var(--umb-block-grid--grid-columns)-1)), 1); - left: calc(-20px * var(--calc)); - width: calc(var(--umb-block-grid-editor--inline-create-width, 100%) + 40px * var(--calc)); - } uui-button-inline-create[vertical] { right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5)); } - :host([at-root]) uui-button-inline-create[vertical] { - /* If at root, and full-width then move a little out to the right: */ - --calc: clamp(0, calc(var(--umb-block-grid--item-column-span) - (var(--umb-block-grid--grid-columns)-1)), 1); - right: calc(-2px * var(--calc)); - } :host([drag-placeholder]) { opacity: 0.2; From efde56094b48467f672a12e1da312a4b2c21d3bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 21:29:17 +0200 Subject: [PATCH 6/8] remove Block --- .../packages/block/block/context/block-entries.context.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts index 0e375270b4..52c642e8f1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts @@ -121,13 +121,11 @@ export abstract class UmbBlockEntriesContext< } if (layout.settingsUdi) { - this._manager?.removeOneSettings(layout.settingsUdi); + this._manager!.removeOneSettings(layout.settingsUdi); } + this._manager!.removeOneContent(contentUdi); - this._manager?.removeOneContent(contentUdi); - - //this._layoutEntries.removeOne(contentUdi); - alert('TODO: Remove layout entry..'); + this._layoutEntries.removeOne(contentUdi); } //copy } From 5ff83de37d9e1c4912a69b8d61cea4928d1085a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 May 2024 21:36:13 +0200 Subject: [PATCH 7/8] remove at-loot attribute --- .../components/block-grid-entries/block-grid-entries.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts index ce4b663517..bcdc14b897 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts @@ -207,7 +207,6 @@ export class UmbBlockGridEntriesElement extends UmbLitElement { (x) => x.contentUdi, (layoutEntry, index) => html` Date: Wed, 22 May 2024 23:59:30 +0100 Subject: [PATCH 8/8] fixed type import --- .../block-grid-entry/block-grid-entry.element.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index 3857129de7..de8480d127 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -1,14 +1,7 @@ import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { - html, - css, - customElement, - property, - state, - nothing, - type PropertyValueMap, -} from '@umbraco-cms/backoffice/external/lit'; +import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block'; import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';