From cda1569457a8d4f1a809159284c026294ccc2680 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 25 Sep 2024 11:25:11 +0200 Subject: [PATCH] unpublished ui look --- .../packages/block/block-custom-view/types.ts | 1 + .../block-grid-entry.element.ts | 13 ++++++++++ .../block-list-entry.element.ts | 17 +++++++++++-- .../inline-list-block.element.ts | 25 ++++++++++++++----- .../ref-list-block/ref-list-block.element.ts | 6 +++++ 5 files changed, 54 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts index ead519dbbf..fb67f8ae08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts @@ -27,6 +27,7 @@ export interface UmbBlockEditorCustomViewProperties< settings?: UmbBlockDataType; contentInvalid?: boolean; settingsInvalid?: boolean; + unpublished?: boolean; } export interface UmbBlockEditorCustomViewElement< diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index b8e3db2da6..96b21292da 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -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}>`; } @@ -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}>`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts index e57b1a056a..e354c0f8bb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts @@ -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``; } @@ -264,6 +276,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper return html``; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts index 199095708b..9c7ae7378f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts @@ -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`