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

Merge pull request #1092 from umbraco/block-type-settings

Browse Source 
block type workspace settings
This commit is contained in:
Niels Lyngsø
2024-01-04 11:09:07 +01:00
committed by GitHub
parent 344c59aca3 b56b36cde2
commit b22d5a3b00
12 changed files with 230 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/manifests.ts Normal file
View File

@@ -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',
},
};

39
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 Normal file
View File

@@ -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<string> = [];
@property({ type: Array })
public get value(): Array<string> {
return this._value;
}
public set value(value: Array<string>) {
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;
}
}

15
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 Normal file
View File

@@ -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<UmbPropertyEditorUIBlockGridColumnSpanElement> = () =>
html` <umb-property-editor-ui-block-grid-column-span></umb-property-editor-ui-block-grid-column-span>`;
AAAOverview.storyName = 'Overview';

3
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts
View File

@@ -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];

57
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
View File

@@ -7,12 +7,7 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis
export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement {
render() {
return html`
<h5>GRID BLOCK ADVANCED View</h5>
<uui-box headline="Editor Appearance">
<umb-property
label="Label"
alias="label"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
<uui-box headline="Advanced">
<umb-property
label="Custom view"
alias="view"
@@ -25,38 +20,14 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement
label="Overlay size"
alias="editorSize"
property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
</uui-box>
<uui-box headline="Data models">
<!-- TODO: implement readonly mode for umb-property -->
<umb-property
label="Content Model"
alias="contentElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
readonly
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
},
]}></umb-property>
label="Inline editing"
alias="inlineEditing"
property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
<umb-property
label="Settings Model"
alias="settingsElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
},
]}></umb-property>
label="Hide content editor"
alias="hideContentEditor"
property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
</uui-box>
<uui-box headline="Catalogue appearance">
<umb-property
@@ -68,8 +39,8 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement
alias="iconColor"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
<umb-property
label="Custom stylesheet"
alias="stylesheet"
label="Thumbnail"
alias="thumbnail"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
</uui-box>
`;
@@ -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;
}
`,
];
}

79
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
View File

@@ -7,70 +7,15 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis
export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
render() {
return html`
<h5>GRID BLOCK AREAS View</h5>
<uui-box headline="Editor Appearance">
<uui-box headline="Areas">
<umb-property
label="Label"
alias="label"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
label=${this.localize.term('blockEditor_areasLayoutColumns')}
alias="areasLayoutColumns"
property-editor-ui-alias="Umb.PropertyEditorUi.Number"></umb-property>
<umb-property
label="Custom view"
alias="view"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
<umb-property
label="Custom stylesheet"
alias="stylesheet"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
<umb-property
label="Overlay size"
alias="editorSize"
property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
</uui-box>
<uui-box headline="Data models">
<!-- TODO: implement readonly mode for umb-property -->
<umb-property
label="Content Model"
alias="contentElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
readonly
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
},
]}></umb-property>
<umb-property
label="Settings Model"
alias="settingsElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
},
]}></umb-property>
</uui-box>
<uui-box headline="Catalogue appearance">
<umb-property
label="Background color"
alias="backgroundColor"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
<umb-property
label="Icon color"
alias="iconColor"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
<umb-property
label="Custom stylesheet"
alias="stylesheet"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
label=${this.localize.term('blockEditor_areasConfigurations')}
alias="areas"
property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreas"></umb-property>
</uui-box>
`;
}
@@ -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;
}
`,
];
}

152
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
View File

@@ -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`
<h5>GRID BLOCK SETTINGS View</h5>
<uui-box headline="Editor Appearance">
<uui-box headline=${this.localize.term('general_general')}>
<umb-property
label="Label"
label=${this.localize.term('general_label')}
alias="label"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"
.config=${[this.#labelOnTopSetting]}></umb-property>
<umb-property
label="Custom view"
alias="view"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
<umb-property
label="Custom stylesheet"
alias="stylesheet"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
<umb-property
label="Overlay size"
alias="editorSize"
property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
</uui-box>
<uui-box headline="Data models">
<!-- TODO: implement readonly mode for umb-property -->
<umb-property
label="Content Model"
label=${this.localize.term('blockEditor_labelContentElementType')}
read-only
alias="contentElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
readonly
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
},
{ alias: 'onlyPickElementTypes', value: true },
{ alias: 'validationLimit', value: { min: 0, max: 1 } },
]}></umb-property>
<umb-property
label="Settings Model"
label=${this.localize.term('blockEditor_labelSettingsElementType')}
alias="settingsElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
},
{ alias: 'onlyPickElementTypes', value: true },
{ alias: 'validationLimit', value: { min: 0, max: 1 } },
]}></umb-property>
</uui-box>
<uui-box headline="Catalogue appearance">
<uui-box headline=${this.localize.term('blockEditor_headlineAllowance')}>
<umb-property
label="Background color"
alias="backgroundColor"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
label=${this.localize.term('blockEditor_allowBlockInRoot')}
alias="allowInRoot"
property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
<umb-property
label="Icon color"
alias="iconColor"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
<umb-property
label="Custom stylesheet"
alias="stylesheet"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
label=${this.localize.term('blockEditor_allowBlockInAreas')}
alias="allowInAreas"
property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
</uui-box>
<uui-box headline=${this.localize.term('blockEditor_sizeOptions')}> ${this.#renderSizeOptions()} </uui-box>
`;
}
#renderSizeOptions() {
if (this._showSizeOptions) {
return html`<umb-property
label=${this.localize.term('blockEditor_allowedBlockColumns')}
alias="columnSpanOptions"
property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridColumnSpan"></umb-property>
<umb-property
label=${this.localize.term('blockEditor_allowedBlockRows')}
alias="availableRows"
property-editor-ui-alias="Umb.PropertyEditorUi.NumberRange"></umb-property>`;
} else {
return html`<div id="showOptions">
<uui-button
label=${this.localize.term('blockEditor_showSizeOptions')}
look="placeholder"
@click=${() => (this._showSizeOptions = !this._showSizeOptions)}></uui-button>
</div>`;
}
}
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;
}
`,
];

4
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts
View File

@@ -50,7 +50,9 @@ export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement {
render() {
return this.workspaceAlias
? html`
<umb-workspace-editor alias=${this.workspaceAlias} headline="Configuration of '${this._name}'">
<umb-workspace-editor
alias=${this.workspaceAlias}
headline=${this.localize.term('blockEditor_blockConfigurationOverlayTitle', [this._name])}>
</umb-workspace-editor>
`
: '';

7
src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts
View File

@@ -78,7 +78,12 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement)
@input=${this._onMinInput}
label=${this.minLabel}></uui-input>
–
<uui-input type="number" .value=${this._maxValue} @input=${this._onMaxInput} label=${this.maxLabel}></uui-input>`;
<uui-input
type="number"
.value=${this._maxValue}
@input=${this._onMaxInput}
label=${this.maxLabel}
placeholder="&infin;"></uui-input>`;
}
}

28
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/property-editor-ui-overlay-size.element.ts
View File

@@ -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<Option> = [
{ value: 'small', name: 'Small', selected: true },
{ value: 'medium', name: 'Medium' },
{ value: 'large', name: 'Large' },
{ value: 'full', name: 'Full' },
];
@property({ attribute: false })
public config?: UmbPropertyEditorConfigCollection;
firstUpdated() {
if (!this.value) return;
this._list = this._list.map((option) => ({
...option,
selected: option.value === this.value,
}));
}
#onChange(event: UUISelectEvent) {
this.value = event.target.value as string;
this.dispatchEvent(new CustomEvent('property-value-change'));
}
render() {
return html`<div>umb-property-editor-ui-overlay-size</div>`;
return html`<uui-select .options=${this._list} @change=${this.#onChange}></uui-select>`;
}
static styles = [UmbTextStyles];

16
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
View File

@@ -1,5 +1,5 @@
import { UmbDocumentTypePickerContext } from './input-document-type.context.js';
import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -66,7 +66,6 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
return this.#pickerContext.getSelection();
}
public set selectedIds(ids: Array<string> | undefined) {
console.log('selectedIds', ids);
this.#pickerContext.setSelection(ids ?? []);
}
@@ -116,10 +115,15 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
}
render() {
return html`
<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
<uui-button id="add-button" look="placeholder" @click=${this.#openPicker} label="open">Add</uui-button>
`;
return html` <uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
${this.#renderAddButton()}`;
}
#renderAddButton() {
if (this.max === 1 && this.selectedIds.length === 1) return nothing;
return html`<uui-button id="add-button" look="placeholder" @click=${this.#openPicker} label="open">
Add
</uui-button>`;
}
private _renderItem(item: DocumentTypeItemResponseModel) {

8
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
View File

@@ -11,7 +11,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
return this._value;
}
public set value(value: Array<string> | string | undefined) {
this._value = value ?? [];
this._value = value;
}
private _value?: Array<string> | string;
@@ -49,7 +49,11 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
? html`
<umb-input-document-type
@change=${this._onChange}
.selectedIds=${this._multiPicker ? (this._value as Array<string>) ?? [] : [this._value as string]}
.selectedIds=${this._multiPicker
? (this._value as Array<string>) ?? []
: this._value
? [this._value as string]
: []}
.min=${this._limitMin ?? 0}
.max=${this._limitMax ?? Infinity}
.element-types-only=${this._onlyElementTypes}