From d7558dee0a8fcc5599e99d639b791de06fddf26e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 8 Nov 2024 07:57:07 +0100 Subject: [PATCH 1/2] make area create button hide on drag --- .../block-grid-entries.element.ts | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts index 7e763cf82c..ffa931e21a 100644 --- a/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts +++ b/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts @@ -438,15 +438,14 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen } #createButton { - padding-top: 1px; grid-template-columns: 1fr auto; display: grid; } - // Only when we are n an area, we like to hide the button on drag + /* Only when we are n an area, we like to hide the button on drag */ :host([area-key]) #createButton { - --umb-block-grid--is-dragging--variable: var(--umb-block-grid--is-dragging) none; - display: var(--umb-block-grid--is-dragging--variable, grid); + --umb-block-grid--create-button--is-dragging--variable: var(--umb-block-grid--is-dragging) none; + display: var(--umb-block-grid--create-button--is-dragging--variable, grid); } :host(:not([pristine]):invalid) #createButton { --uui-button-contrast: var(--uui-color-danger); @@ -457,9 +456,17 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen } .umb-block-grid__layout-container[data-area-length='0'] { - --umb-block-grid--is-dragging--variable: var(--umb-block-grid--is-dragging) 1; - min-height: calc(var(--umb-block-grid--is-dragging--variable, 0) * var(--uui-size-11)); - border: calc(var(--umb-block-grid--is-dragging--variable, 0) * 1px) dashed var(--uui-color-border); + --umb-block-grid--layout-container--is-dragging--variable: var(--umb-block-grid--is-dragging) 1; + min-height: calc(var(--umb-block-grid--layout-container--is-dragging--variable, 0) * var(--uui-size-11)); + } + + .umb-block-grid__layout-container[data-area-length='0']::after { + content: ''; + position: absolute; + inset: 0; + top: 1px; + border: calc(var(--umb-block-grid--layout-container--is-dragging--variable, 0) * 1px) dashed + var(--uui-color-border); border-radius: var(--uui-border-radius); } `, From c39495ddcc765e12967ba1e944ab14742fe01134 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 8 Nov 2024 08:20:55 +0100 Subject: [PATCH 2/2] append part attributes --- .../block-grid-areas-container.element.ts | 1 + .../property-editor-ui-block-grid-areas-config.element.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts index adb7ceea0d..5c2d0fed1d 100644 --- a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts +++ b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts @@ -62,6 +62,7 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement { ? html` ${this._styleElement}
${repeat( this._areas, diff --git a/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts index 8e173fd0d8..f72910da99 100644 --- a/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts +++ b/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts @@ -117,6 +117,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement ? html`${this._styleElement}
${repeat( this.value,