align expose style

This commit is contained in:
Niels Lyngsø
2024-09-27 09:32:49 +02:00
parent 167059c290
commit d8d7fd98ef
4 changed files with 33 additions and 4 deletions

View File

@@ -6,6 +6,7 @@ import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'
import '../block-grid-areas-container/index.js';
import '../ref-grid-block/index.js';
import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
/**
* @element umb-block-grid-block-inline
@@ -16,9 +17,18 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
@property({ attribute: false })
label?: string;
@property({ type: String, reflect: false })
icon?: string;
@property({ attribute: false })
config?: UmbBlockEditorCustomViewConfiguration;
@property({ type: Boolean, reflect: true })
unpublished?: boolean;
@property({ attribute: false })
content?: UmbBlockDataType;
@state()
_inlineProperty: UmbPropertyTypeModel | undefined;
@@ -39,7 +49,9 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
}
override render() {
return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.config?.editContentPath ?? ''}>
return html`<umb-ref-grid-block standalone href=${this.config?.editContentPath ?? ''}>
<umb-icon slot="icon" .name=${this.icon}></umb-icon>
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
<umb-property-type-based-property
.property=${this._inlineProperty}
slot="areas"></umb-property-type-based-property>
@@ -55,6 +67,10 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
umb-block-grid-areas-container::part(area) {
margin: var(--uui-size-2);
}
:host([unpublished]) umb-icon,
:host([unpublished]) umb-ufm-render {
opacity: 0.6;
}
`,
];
}

View File

@@ -16,15 +16,22 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
@property({ attribute: false })
label?: string;
@property({ type: String, reflect: false })
icon?: string;
@property({ attribute: false })
config?: UmbBlockEditorCustomViewConfiguration;
@property({ type: Boolean, reflect: true })
unpublished?: boolean;
@property({ attribute: false })
content?: UmbBlockDataType;
override render() {
return html`<umb-ref-grid-block standalone href=${this.config?.editContentPath ?? ''}>
<umb-ufm-render inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
<umb-icon slot="icon" .name=${this.icon}></umb-icon>
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
</umb-ref-grid-block>`;
}
@@ -37,6 +44,10 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
umb-block-grid-areas-container::part(area) {
margin: var(--uui-size-2);
}
:host([unpublished]) umb-icon,
:host([unpublished]) umb-ufm-render {
opacity: 0.6;
}
`,
];
}

View File

@@ -55,7 +55,8 @@ export class UmbRefListBlockElement extends UmbLitElement {
uui-ref-node {
min-height: var(--uui-size-16);
}
:host([unpublished]) uui-ref-node {
:host([unpublished]) umb-icon,
:host([unpublished]) umb-ufm-render {
opacity: 0.6;
}
`,

View File

@@ -49,7 +49,8 @@ export class UmbRefRteBlockElement extends UmbLitElement {
uui-ref-node {
min-height: var(--uui-size-16);
}
:host([unpublished]) uui-ref-node {
:host([unpublished]) umb-icon,
:host([unpublished]) umb-ufm-render {
opacity: 0.6;
}
`,