diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts new file mode 100644 index 0000000000..7aa8cf4e08 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts @@ -0,0 +1,13 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestPropertyEditorUi = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.BlockGridColumnSpan', + name: 'Block Grid Column Span Property Editor UI', + js: () => import('./property-editor-ui-block-grid-column-span.element.js'), + meta: { + label: 'Block Grid Column Span', + icon: 'icon-document', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts new file mode 100644 index 0000000000..a22f67b1ab --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts @@ -0,0 +1,39 @@ +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; + +@customElement('umb-property-editor-ui-block-grid-column-span') +export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement implements UmbPropertyEditorUiElement { + private _value: Array = []; + + @property({ type: Array }) + public get value(): Array { + return this._value; + } + public set value(value: Array) { + this._value = value || []; + } + + @property({ attribute: false }) + public set config(config: UmbPropertyEditorConfigCollection | undefined) {} + + private _onChange(event: CustomEvent) { + this.dispatchEvent(new CustomEvent('property-value-change')); + } + + render() { + return html`Column span TODO `; + } + + static styles = [UmbTextStyles]; +} + +export default UmbPropertyEditorUIBlockGridColumnSpanElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-block-grid-column-span': UmbPropertyEditorUIBlockGridColumnSpanElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts new file mode 100644 index 0000000000..042a5422b9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import type { UmbPropertyEditorUIBlockGridColumnSpanElement } from './property-editor-ui-block-grid-column-span.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +import './property-editor-ui-block-grid-column-span.element.js'; + +export default { + title: 'Property Editor UIs/Block Grid Column Span', + component: 'umb-property-editor-ui-block-grid-column-span', + id: 'umb-property-editor-ui-block-grid-column-span', +} as Meta; + +export const AAAOverview: Story = () => + html` `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts index c3f119f8f5..11b3d055ed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts @@ -1,5 +1,6 @@ import { manifest as blockGridEditor } from './block-grid-editor/manifests.js'; import { manifest as blockGridLayoutStylesheet } from './block-grid-layout-stylesheet/manifests.js'; import { manifest as blockGridTypeConfiguration } from './block-grid-type-configuration/manifests.js'; +import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js'; -export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet]; +export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet, blockGridColumnSpan]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts index b33b0934c6..c3ac612a4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts @@ -7,12 +7,7 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement { render() { return html` -
GRID BLOCK ADVANCED View
- - + - - - + label="Inline editing" + alias="inlineEditing" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> + label="Hide content editor" + alias="hideContentEditor" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> `; @@ -86,16 +57,6 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement uui-box { margin-top: var(--uui-size-layout-1); } - - uui-label, - umb-property-editor-ui-number { - display: block; - } - - // TODO: is this necessary? - uui-toggle { - display: flex; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts index a3d522f937..a12b413e30 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts @@ -7,70 +7,15 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement { render() { return html` -
GRID BLOCK AREAS View
- + + label=${this.localize.term('blockEditor_areasLayoutColumns')} + alias="areasLayoutColumns" + property-editor-ui-alias="Umb.PropertyEditorUi.Number"> - - - - - - - - - - - - + label=${this.localize.term('blockEditor_areasConfigurations')} + alias="areas" + property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreas"> `; } @@ -86,16 +31,6 @@ export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement imp uui-box { margin-top: var(--uui-size-layout-1); } - - uui-label, - umb-property-editor-ui-number { - display: block; - } - - // TODO: is this necessary? - uui-toggle { - display: flex; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts index b8c116b232..09b06fc88e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts @@ -1,80 +1,119 @@ -import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; +import { UmbBlockTypeWorkspaceContext } from '../../../block-type/workspace/block-type-workspace.context.js'; +import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; @customElement('umb-block-grid-type-workspace-view') export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement { + #labelOnTopSetting = { alias: 'labelOnTop', value: true }; + + @state() + private _showSizeOptions = false; + + @state() + private _backgroundColor?: string; + + @state() + private _contentElementTypeKey?: string; + + @state() + private _editorSize?: string; + + @state() + private _iconColor?: string; + + @state() + private _label?: string; + + @state() + private _settingsElementTypeKey?: string; + + @state() + private _stylesheet?: string; + + @state() + private _view?: string; + + constructor() { + super(); + this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => { + const workspace = instance as UmbBlockTypeWorkspaceContext; + this.observe(workspace.data, (data) => { + this._backgroundColor = data?.backgroundColor; + this._contentElementTypeKey = data?.contentElementTypeKey; + this._editorSize = data?.editorSize; + this._iconColor = data?.iconColor; + this._label = data?.label; + this._settingsElementTypeKey = data?.settingsElementTypeKey; + this._stylesheet = data?.stylesheet; + this._view = data?.view; + }); + }); + } + render() { return html` -
GRID BLOCK SETTINGS View
- + + property-editor-ui-alias="Umb.PropertyEditorUi.TextBox" + .config=${[this.#labelOnTopSetting]}> - - - - - - - + + label=${this.localize.term('blockEditor_allowBlockInRoot')} + alias="allowInRoot" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> - + label=${this.localize.term('blockEditor_allowBlockInAreas')} + alias="allowInAreas" + property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> + ${this.#renderSizeOptions()} `; } + #renderSizeOptions() { + if (this._showSizeOptions) { + return html` + `; + } else { + return html`
+ (this._showSizeOptions = !this._showSizeOptions)}> +
`; + } + } + static styles = [ UmbTextStyles, css` @@ -83,18 +122,17 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement margin: var(--uui-size-layout-1); padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container. } + uui-box { margin-top: var(--uui-size-layout-1); } - uui-label, - umb-property-editor-ui-number { - display: block; - } - - // TODO: is this necessary? - uui-toggle { + #showOptions { display: flex; + height: 100px; + } + #showOptions uui-button { + flex: 1; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts index 4f29915c66..a2ce992de5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts @@ -50,7 +50,9 @@ export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement { render() { return this.workspaceAlias ? html` - + ` : ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts index f92c67a51f..37fadc0063 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts @@ -78,7 +78,12 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement) @input=${this._onMinInput} label=${this.minLabel}> – - `; + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.element.ts index f726414e7c..0869bdbffd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.element.ts @@ -1,8 +1,9 @@ -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UUIModalSidebarSize, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; /** * @element umb-property-editor-ui-overlay-size @@ -10,13 +11,34 @@ import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/prope @customElement('umb-property-editor-ui-overlay-size') export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() - value = ''; + value: UUIModalSidebarSize | string = ''; + + @state() + private _list: Array