scaffolding properties

This commit is contained in:
Niels Lyngsø
2023-12-20 14:50:30 +01:00
parent 7befe4996f
commit 3354ac9dca
4 changed files with 137 additions and 1 deletions

View File

@@ -0,0 +1 @@
export const UMB_BLOCK_TYPE_WORKSPACE_ALIAS = 'Umb.Workspace.BlockType';

View File

@@ -1,10 +1,13 @@
import { UMB_BLOCK_TYPE_WORKSPACE_ALIAS } from './block-type-workspace-alias.const.js';
import { manifests as workspaceViewManifests } from './views/manifests.js';
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes> = [
...workspaceViewManifests,
{
type: 'workspace',
name: 'Block Workspace',
alias: 'Umb.Workspace.BlockType',
alias: UMB_BLOCK_TYPE_WORKSPACE_ALIAS,
element: () => import('./block-type-workspace.element.js'),
api: () => import('./block-type-workspace.context.js'),
weight: 900,

View File

@@ -0,0 +1,86 @@
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-type-list-workspace-view-settings')
export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
render() {
return html`
<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.StaticFile"></umb-property>
<umb-property
label="Custom stylesheet"
alias="stylesheet"
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFile"></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">
<umb-property
label="Content Model"
alias="contentElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.ElementTypePicker"></umb-property>
<umb-property
label="Settings Model"
alias="settingsElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.ElementTypePicker"></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.StaticFile"></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 UmbBlockTypeListWorkspaceViewSettingsElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-type-list-workspace-view-settings': UmbBlockTypeListWorkspaceViewSettingsElement;
}
}

View File

@@ -0,0 +1,46 @@
import { UMB_BLOCK_TYPE_WORKSPACE_ALIAS } from '../block-type-workspace-alias.const.js';
import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
import type { ManifestWorkspaceAction, ManifestWorkspaceView } from '@umbraco-cms/backoffice/extension-registry';
const workspaceActions: Array<ManifestWorkspaceAction> = [
{
type: 'workspaceAction',
alias: 'Umb.WorkspaceAction.DataType.Save',
name: 'Save Data Type Workspace Action',
api: UmbSaveWorkspaceAction,
meta: {
label: 'Save',
look: 'primary',
color: 'positive',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: UMB_BLOCK_TYPE_WORKSPACE_ALIAS,
},
],
},
];
export const workspaceViews: Array<ManifestWorkspaceView> = [
{
type: 'workspaceView',
alias: 'Umb.WorkspaceView.BlockType.List.Settings',
name: 'Document Type Workspace Design View',
js: () => import('./block-type-list-workspace-view.element.js'),
weight: 1000,
meta: {
label: 'Settings',
pathname: 'settings',
icon: 'icon-settings',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: UMB_BLOCK_TYPE_WORKSPACE_ALIAS,
},
],
},
];
export const manifests = [...workspaceViews, ...workspaceActions];