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

unpublished ui look

Browse Source
This commit is contained in:
Niels Lyngsø
2024-09-25 11:25:11 +02:00
parent 6121a245c6
commit cda1569457
5 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts
View File

@@ -27,6 +27,7 @@ export interface UmbBlockEditorCustomViewProperties<
settings?: UmbBlockDataType;
contentInvalid?: boolean;
settingsInvalid?: boolean;
unpublished?: boolean;
}
export interface UmbBlockEditorCustomViewElement<

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

@@ -84,6 +84,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
@state()
_icon?: string;
@state()
_exposed?: boolean;
@state()
_workspaceEditContentPath?: string;
@@ -173,6 +176,14 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
},
null,
);
this.observe(
this.#context.hasExpose,
(exposed) => {
this.#updateBlockViewProps({ unpublished: !exposed });
this._exposed = exposed;
},
null,
);
this.observe(
this.#context.inlineEditingMode,
(mode) => {
@@ -376,6 +387,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
class="umb-block-grid__block--view"
.label=${this._label}
.icon=${this._icon}
.unpublished=${!this._exposed}
.content=${this._blockViewProps.content}
.settings=${this._blockViewProps.settings}></umb-block-grid-block-inline>`;
}
@@ -385,6 +397,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
class="umb-block-grid__block--view"
.label=${this._label}
.icon=${this._icon}
.unpublished=${!this._exposed}
.content=${this._blockViewProps.content}
.settings=${this._blockViewProps.settings}></umb-block-grid-block>`;
}

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

@@ -73,6 +73,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
@state()
_icon?: string;
@state()
_exposed?: boolean;
@state()
_workspaceEditContentPath?: string;
@@ -144,10 +147,18 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
},
null,
);
this.observe(
this.#context.hasExpose,
(exposed) => {
this.#updateBlockViewProps({ unpublished: !exposed });
this._exposed = exposed;
},
null,
);
this.observe(
this.#context.inlineEditingMode,
(inlineEditingMode) => {
this._inlineEditingMode = inlineEditingMode;
(mode) => {
this._inlineEditingMode = mode;
},
null,
);
@@ -256,6 +267,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
return html`<umb-ref-list-block
.label=${this._label}
.icon=${this._icon}
.unpublished=${!this._exposed}
.content=${this._blockViewProps.content}
.settings=${this._blockViewProps.settings}></umb-ref-list-block>`;
}
@@ -264,6 +276,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
return html`<umb-inline-list-block
.label=${this._label}
.icon=${this._icon}
.unpublished=${!this._exposed}
.content=${this._blockViewProps.content}
.settings=${this._blockViewProps.settings}></umb-inline-list-block>`;
}

25
src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts
View File

@@ -1,13 +1,17 @@
import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../index.js';
import type { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../../block/index.js';
import { UMB_BLOCK_WORKSPACE_ALIAS } from '../../../block/index.js';
import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
import {
UMB_BLOCK_WORKSPACE_ALIAS,
type UmbBlockDataType,
type UMB_BLOCK_WORKSPACE_CONTEXT,
} from '@umbraco-cms/backoffice/block';
import { UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
/**
* @element umb-inline-list-block
*/
@@ -23,6 +27,12 @@ export class UmbInlineListBlockElement extends UmbLitElement {
@property({ type: String, reflect: false })
icon?: string;
@property({ type: Boolean, reflect: true })
unpublished?: boolean;
@property({ attribute: false })
content?: UmbBlockDataType;
@state()
_isOpen = false;
@@ -67,7 +77,6 @@ export class UmbInlineListBlockElement extends UmbLitElement {
return html`
<div id="host">
<button
slot="header"
id="open-part"
tabindex="0"
@keydown=${(e: KeyboardEvent) => {
@@ -98,7 +107,7 @@ export class UmbInlineListBlockElement extends UmbLitElement {
<umb-icon .name=${this.icon}></umb-icon>
</span>
<div id="info">
<div id="name">${this.label}</div>
<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
</div>
</span>
`;
@@ -138,6 +147,10 @@ export class UmbInlineListBlockElement extends UmbLitElement {
border-color: var(--uui-color-disabled-standalone);
}
:host([unpublished]) #open-part {
opacity: 0.6;
}
slot[name='tag'] {
flex-grow: 1;

6
src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
View File

@@ -17,6 +17,9 @@ export class UmbRefListBlockElement extends UmbLitElement {
@property({ type: String, reflect: false })
icon?: string;
@property({ type: Boolean, reflect: true })
unpublished?: boolean;
@property({ attribute: false })
content?: UmbBlockDataType;
@@ -52,6 +55,9 @@ export class UmbRefListBlockElement extends UmbLitElement {
uui-ref-node {
min-height: var(--uui-size-16);
}
:host([unpublished]) uui-ref-node {
opacity: 0.6;
}
`,
];
}