Merge pull request #2525 from umbraco/v15/feature/block-grid-create-b…

…utton Feature: Block Grid — make area create button hide on drag
umbraco · Nov 8, 2024 · 9934d11 · 9934d11
2 parents 44d2366 + c39495d
commit 9934d11
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/...ck/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/...ck/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}
 					<div
 						class="umb-block-grid__area-container"
+						part="area-container"
 						style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
 						${repeat(
 							this._areas,

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
@@ -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);
 			}
 		`,

diff --git a/...rty-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/...rty-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
@@ -117,6 +117,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 			? html`${this._styleElement}
 					<div
 						class="umb-block-grid__area-container"
+						part="area-container"
 						style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
 						${repeat(
 							this.value,