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

workspace views

Browse Source
This commit is contained in:
Niels Lyngsø
2024-01-02 14:14:35 +01:00
parent 5c277f50cf
commit 7d84f6f167
10 changed files with 283 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
View File

@@ -1,4 +1,4 @@
import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
import { manifests as workspaceManifests } from './workspace/views/manifests.js';
import { manifests as workspaceManifests } from './workspace/manifests.js';
export const manifests = [...workspaceManifests, ...propertyEditorManifests];

1
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
View File

@@ -1,4 +1,5 @@
import type { UmbBlockTypeBase, UmbInputBlockTypeElement } from '../../../block-type/index.js';
import '../../../block-type/components/input-block-type/index.js';
import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';

18
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts Normal file
View File

@@ -0,0 +1,18 @@
import { manifests as workspaceViewManifests } from './views/manifests.js';
import { UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS } from './index.js';
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes> = [
...workspaceViewManifests,
{
type: 'workspace',
name: 'Block Grid Type Workspace',
alias: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
element: () => import('../../block-type/workspace/block-type-workspace.element.js'),
api: () => import('../../block-type/workspace/block-type-workspace.context.js'),
weight: 900,
meta: {
entityType: 'block-grid-type',
},
},
];

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

@@ -0,0 +1,109 @@
import { css, html, customElement } 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';
@customElement('umb-block-grid-type-workspace-view-advanced')
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>
<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>
</uui-box>
`;
}
static styles = [
UmbTextStyles,
css`
:host {
display: block;
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 {
display: flex;
}
`,
];
}
export default UmbBlockTypeGridWorkspaceViewAdvancedElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-grid-type-workspace-view-advanced': UmbBlockTypeGridWorkspaceViewAdvancedElement;
}
}

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

@@ -0,0 +1,109 @@
import { css, html, customElement } 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';
@customElement('umb-block-grid-type-workspace-view-areas')
export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
render() {
return html`
<h5>GRID BLOCK AREAS View</h5>
<uui-box headline="Editor Appearance">
<umb-property
label="Label"
alias="label"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></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>
</uui-box>
`;
}
static styles = [
UmbTextStyles,
css`
:host {
display: block;
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 {
display: flex;
}
`,
];
}
export default UmbBlockTypeGridWorkspaceViewAreasElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-grid-type-workspace-view-areas': UmbBlockTypeGridWorkspaceViewAreasElement;
}
}

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

@@ -3,10 +3,11 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-block-grid-type-workspace-view-settings')
export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
@customElement('umb-block-grid-type-workspace-view')
export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
render() {
return html`
<h5>GRID BLOCK SETTINGS View</h5>
<uui-box headline="Editor Appearance">
<umb-property
label="Label"
@@ -99,10 +100,10 @@ export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement
];
}
export default UmbBlockTypeListWorkspaceViewSettingsElement;
export default UmbBlockTypeGridWorkspaceViewSettingsElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-grid-type-workspace-view-settings': UmbBlockTypeListWorkspaceViewSettingsElement;
'umb-block-grid-type-workspace-view-settings': UmbBlockTypeGridWorkspaceViewSettingsElement;
}
}

38
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
View File

@@ -6,7 +6,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
type: 'workspaceView',
alias: 'Umb.WorkspaceView.BlockType.Grid.Settings',
name: 'Block Grid Type Workspace Settings View',
js: () => import('./block-grid-type-workspace-view.element.js'),
js: () => import('./block-grid-type-workspace-view-settings.element.js'),
weight: 1000,
meta: {
label: 'Settings',
@@ -20,6 +20,42 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
},
],
},
{
type: 'workspaceView',
alias: 'Umb.WorkspaceView.BlockType.Grid.Areas',
name: 'Block Grid Type Workspace Areas View',
js: () => import('./block-grid-type-workspace-view-areas.element.js'),
weight: 1000,
meta: {
label: 'Areas',
pathname: 'areas',
icon: 'icon-grid',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
},
],
},
{
type: 'workspaceView',
alias: 'Umb.WorkspaceView.BlockType.Grid.Advance',
name: 'Block Grid Type Workspace Advance View',
js: () => import('./block-grid-type-workspace-view-advanced.element.js'),
weight: 1000,
meta: {
label: 'Advanced',
pathname: 'advanced',
icon: 'icon-wrench',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
},
],
},
];
export const manifests = [...workspaceViews];

2
src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
View File

@@ -1,4 +1,4 @@
import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
import { manifests as workspaceManifests } from './workspace/views/manifests.js';
import { manifests as workspaceManifests } from './workspace/manifests.js';
export const manifests = [...workspaceManifests, ...propertyEditorManifests];

2
src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts
View File

@@ -1,3 +1,3 @@
import { manifests as workspaceManifests } from './workspace/views/manifests.js';
import { manifests as workspaceManifests } from './workspace/manifests.js';
export const manifests = [...workspaceManifests];

1
src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts
View File

@@ -1 +1,2 @@
export * from './input-block-type/index.js';
export * from './block-type-card/index.js';