Block Grid: Add a bit more spacing and align button in block grid areas config (#20374)

* Add a bit more spacing and align button in block grid areas config

* Remove unnecessary blank line in CSS

---------

Co-authored-by: Andy Butland <abutland73@gmail.com>
This commit is contained in:
Bjarne Fyrstenborg
2025-10-06 07:20:25 +02:00
committed by GitHub
parent e80cc1a9f0
commit 16c0de803b
2 changed files with 13 additions and 3 deletions

View File

@@ -73,7 +73,7 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements
#renderBlock() {
return this._key
? html`
<span>${this._alias}</span>
<span class="alias">${this._alias}</span>
<uui-action-bar>
<uui-button label="edit" compact href=${this.workspacePath + 'edit/' + this._key}>
<uui-icon name="icon-edit"></uui-icon>
@@ -110,14 +110,18 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements
background-color: var(--uui-color-disabled-standalone);
}
:host([drag-placeholder]) {
opacity: 0.2;
}
uui-action-bar {
position: absolute;
top: var(--uui-size-2);
right: var(--uui-size-2);
}
:host([drag-placeholder]) {
opacity: 0.2;
.alias {
padding: var(--uui-size-space-4);
}
`,
];

View File

@@ -159,6 +159,12 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
static override styles = [
css`
:host {
display: flex;
flex-direction: column;
gap: var(--uui-size-2);
}
.umb-block-grid__area {
cursor: move;
}