From 0e807128f81128db9df5ead4a2ff3e362ccd4459 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 15 Feb 2024 14:17:26 +0100 Subject: [PATCH] area insert and style --- .../sorter-item.ts | 1 + .../sorter-with-two-containers/sorter-item.ts | 1 + .../block-grid-area-config-entry.context.ts | 3 +- .../block-grid-area-config-entry.element.ts | 41 +++++---- .../block-grid-entries.element.ts | 2 +- .../context/block-grid-manager.context.ts | 2 +- ...itor-ui-block-grid-areas-config.element.ts | 84 +++++++++++++------ 7 files changed, 89 insertions(+), 45 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts index a3f7ef5fb3..78f34a105b 100644 --- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts @@ -8,6 +8,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) { @property({ type: String, reflect: true }) name: string = ''; + // TODO: Does it make any different to have this as a property? @property({ type: Boolean, reflect: true, attribute: 'drag-placeholder' }) umbDragPlaceholder = false; diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts index 3dd7f0b5e7..626fb4e37d 100644 --- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts @@ -8,6 +8,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) { @property({ type: String, reflect: true }) name: string = ''; + // TODO: Does it make any different to have this as a property? @property({ type: Boolean, reflect: true, attribute: 'drag-placeholder' }) umbDragPlaceholder = false; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts index 4bf1b86c60..80bb71f21a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts @@ -36,7 +36,8 @@ export class UmbBlockGridAreaConfigEntryContext extends UmbContextBase | undefined) => { if (value) { - this.#area.setValue(value.find((x) => x.key === this.#areaKey)); + const areaType = value.find((x) => x.key === this.#areaKey); + this.#area.setValue(areaType); } }, 'observeAreaKey', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts index fe11660191..b02b173379 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts @@ -14,11 +14,11 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements public get areaKey(): string | undefined { return this._areaKey; } - public set areaKey(value: string | undefined) { - if (!value) return; - this._areaKey = value; - this.setAttribute('data-area-key', value); - this.#context.setAreaKey(value); + public set areaKey(areaKey: string | undefined) { + if (!areaKey) return; + this._areaKey = areaKey; + this.setAttribute('data-area-key', areaKey); + this.#context.setAreaKey(areaKey); } private _areaKey?: string | undefined; // @@ -69,17 +69,15 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements #renderBlock() { return this._areaKey ? html` -
-
${this._alias}
- - - - - this.#context.requestDelete()}> - - - -
+ ${this._alias} + + + + + this.#context.requestDelete()}> + + + ` : ''; } @@ -88,12 +86,23 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements return this.#renderBlock(); } + // TODO: Update UUI, as it is missing proper colors to be used for this case: static styles = [ css` :host { position: relative; display: block; + box-sizing: border-box; + background-color: var(--uui-color-disabled); + border: 1px solid var(--uui-color-border); + border-radius: var(--uui-border-radius); + transition: background-color 120ms; } + + :host(:hover) { + background-color: var(--uui-color-disabled-standalone); + } + uui-action-bar { position: absolute; top: var(--uui-size-2); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts index f2055dd228..fb6eaf4b7d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts @@ -1,6 +1,6 @@ -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js'; import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block'; import { html, customElement, state, repeat, css, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts index 42a8d8698a..8b2e113b98 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts @@ -6,7 +6,7 @@ import type { UmbBlockDataType } from '../../block/types.js'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; -const UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET = '/umbraco/backoffice/css/umbraco-blockgridlayout.css'; +export const UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET = '/umbraco/backoffice/css/umbraco-blockgridlayout.css'; /** * A implementation of the Block Manager specifically for the Block Grid Editor. diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts index 0289bdb5f8..e0120840f8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts @@ -1,11 +1,16 @@ import type { UmbBlockGridTypeAreaType } from '../../index.js'; +import { UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET } from '../../context/block-grid-manager.context.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { html, customElement, property, css, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { + UmbPropertyValueChangeEvent, + type UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; import { UmbId } from '@umbraco-cms/backoffice/id'; +import '../../components/block-grid-area-config-entry/index.js'; @customElement('umb-property-editor-ui-block-grid-areas-config') export class UmbPropertyEditorUIBlockGridAreasConfigElement @@ -17,7 +22,14 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement #valueOfAreaGridColumns?: number | null; @property({ type: Array }) - value: Array = []; + public get value(): Array { + return this._value; + } + public set value(value: Array) { + this._value = value ?? []; + } + @state() + private _value: Array = []; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -30,6 +42,9 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement this.#gotAreaColumns(); } + @state() + private _styleElement?: HTMLLinkElement; + @state() _areaGridColumns?: number; @@ -37,11 +52,26 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement super(); this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => { - this.observe(await context.propertyValueByAlias('areaGridColumns'), (value) => { - // Value can be undefined, but 'undefined > 0' is still valid JS and will return false. [NL] - this.#valueOfAreaGridColumns = (value as number) > 0 ? (value as number) : null; - this.#gotAreaColumns(); - }); + this.observe( + await context.propertyValueByAlias('areaGridColumns'), + (value) => { + // Value can be undefined, but 'undefined > 0' is still valid JS and will return false. [NL] + this.#valueOfAreaGridColumns = (value as number) > 0 ? value : null; + this.#gotAreaColumns(); + }, + 'observeAreaGridColumns', + ); + + this.observe( + await context.propertyValueByAlias('layoutStylesheet'), + (stylesheet) => { + if (this._styleElement && this._styleElement.href === stylesheet) return; + this._styleElement = document.createElement('link'); + this._styleElement.setAttribute('rel', 'stylesheet'); + this._styleElement.setAttribute('href', stylesheet ?? UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET); + }, + 'observeStylesheet', + ); }); } @@ -55,39 +85,41 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement const halfGridColumns = this._areaGridColumns * 0.5; const columnSpan = halfGridColumns === Math.round(halfGridColumns) ? halfGridColumns : this._areaGridColumns; - this.value.push({ - key: UmbId.new(), - alias: '', // TODO: Should we auto generate something here? - columnSpan: columnSpan, - rowSpan: 1, - minAllowed: 0, - maxAllowed: undefined, - specifiedAllowance: [], - }); + this._value = [ + ...this._value, + { + key: UmbId.new(), + alias: '', // TODO: Should we auto generate something here? + columnSpan: columnSpan, + rowSpan: 1, + minAllowed: 0, + maxAllowed: undefined, + specifiedAllowance: [], + }, + ]; + this.requestUpdate('_value'); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); - //TODO: vm.openAreaOverlay(newArea); + //TODO: open area edit workspace } + // TODO: Needs localizations: render() { return this._areaGridColumns - ? html`
${repeat( this.value, (area) => area.key, (area) => - html``, + .areaKey=${area.key}>`, )}
- - ` + ` : ''; }