yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling of inline create buttons

Browse Source
This commit is contained in:
Niels Lyngsø
2024-05-22 16:24:01 +02:00
parent 294f9d94a3
commit 892e6f09fc
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
View File

@@ -207,8 +207,9 @@ export class UmbBlockGridEntriesElement extends UmbLitElement {
(x) => x.contentUdi,
(layoutEntry, index) =>
html`<umb-block-grid-entry
?at-root=${this._areaKey === null}
class="umb-block-grid__layout-item"
.index=${index}
index=${index}
.contentUdi=${layoutEntry.contentUdi}
.layout=${layoutEntry}>
</umb-block-grid-entry>`,

21
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
View File

@@ -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;