overall reworked structure

2023-03-29 11:39:37 +02:00
parent 2f8c1d89ee
commit a0dae8b5af
7 changed files with 137 additions and 101 deletions
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/manifests.ts
@@ -20,8 +20,8 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.DocumentType.Design',
 		name: 'Document Type Workspace Design View',
-		loader: () => import('./views/design/workspace-view-document-type-design.element'),
-		weight: 100,
+		loader: () => import('./views/design/document-type-workspace-view-design.element'),
+		weight: 1000,
 		meta: {
 			label: 'Design',
 			pathname: 'design',
@@ -33,14 +33,14 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 	},
 	{
 		type: 'workspaceView',
-		alias: 'Umb.WorkspaceView.DocumentType.ListView',
-		name: 'Document Type Workspace List View',
-		loader: () => import('./views/listview/workspace-view-document-type-listview.element'),
+		alias: 'Umb.WorkspaceView.DocumentType.Structure',
+		name: 'Document Type Workspace Structure View',
+		loader: () => import('./views/structure/document-type-workspace-view-structure.element'),
 		weight: 100,
 		meta: {
-			label: 'Listview',
-			pathname: 'listview',
-			icon: 'umb:list',
+			label: 'Structure',
+			pathname: 'structure',
+			icon: 'umb:mindmap',
 		},
 		conditions: {
 			workspaces: ['Umb.Workspace.DocumentType'],
@@ -50,12 +50,12 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.DocumentType.Permissions',
 		name: 'Document Type Workspace Permissions View',
-		loader: () => import('./views/permissions/workspace-view-document-type-permissions.element'),
+		loader: () => import('./views/details/document-type-workspace-view-details.element'),
 		weight: 100,
 		meta: {
-			label: 'Permissions',
-			pathname: 'permissions',
-			icon: 'umb:keychain',
+			label: 'Details',
+			pathname: 'details',
+			icon: 'umb:settings',
 		},
 		conditions: {
 			workspaces: ['Umb.Workspace.DocumentType'],
@@ -65,7 +65,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.DocumentType.Templates',
 		name: 'Document Type Workspace Templates View',
-		loader: () => import('./views/templates/workspace-view-document-type-templates.element'),
+		loader: () => import('./views/templates/document-type-workspace-view-templates.element'),
 		weight: 100,
 		meta: {
 			label: 'Templates',
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts
@@ -1,14 +1,14 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, query, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UmbWorkspaceDocumentTypeContext } from '../../document-type-workspace.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import '../../../../../shared/property-creator/property-creator.element.ts';

-@customElement('umb-workspace-view-document-type-design')
-export class UmbWorkspaceViewDocumentTypeDesignElement extends UmbLitElement {
+@customElement('umb-document-type-workspace-view-design')
+export class UmbDocumentTypeWorkspaceViewDesignElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -171,10 +171,10 @@ export class UmbWorkspaceViewDocumentTypeDesignElement extends UmbLitElement {
 	}
 }

-export default UmbWorkspaceViewDocumentTypeDesignElement;
+export default UmbDocumentTypeWorkspaceViewDesignElement;

 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-workspace-view-document-type-design': UmbWorkspaceViewDocumentTypeDesignElement;
+		'umb-document-type-workspace-view-design': UmbDocumentTypeWorkspaceViewDesignElement;
 	}
 }
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.stories.ts
@@ -1,4 +1,4 @@
-import './workspace-view-document-type-design.element';
+import './document-type-workspace-view-design.element';

 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
@@ -6,12 +6,12 @@ import { html } from 'lit';
 //import { data } from '../../../../../core/mocks/data/document-type.data';
 //import { UmbDocumentTypeContext } from '../../document-type.context';

-import type { UmbWorkspaceViewDocumentTypeDesignElement } from './workspace-view-document-type-design.element';
+import type { UmbDocumentTypeWorkspaceViewDesignElement } from './document-type-workspace-view-design.element';

 export default {
 	title: 'Workspaces/Document Type/Views/Design',
-	component: 'umb-workspace-view-document-type-design',
-	id: 'umb-workspace-view-document-type-design',
+	component: 'umb-document-type-workspace-view-design',
+	id: 'umb-document-type-workspace-view-design',
 	decorators: [
 		(story) => {
 			return html`TODO: make use of mocked workspace context??`;
@@ -22,6 +22,6 @@ export default {
 	],
 } as Meta;

-export const AAAOverview: Story<UmbWorkspaceViewDocumentTypeDesignElement> = () =>
-	html` <umb-workspace-view-document-type-design></umb-workspace-view-document-type-design>`;
+export const AAAOverview: Story<UmbDocumentTypeWorkspaceViewDesignElement> = () =>
+	html` <umb-document-type-workspace-view-design></umb-document-type-workspace-view-design>`;
 AAAOverview.storyName = 'Overview';
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/permissions/workspace-view-document-type-permissions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/permissions/workspace-view-document-type-permissions.element.ts
@@ -5,20 +5,21 @@ import { UmbWorkspaceDocumentTypeContext } from '../../document-type-workspace.c
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';

-@customElement('umb-workspace-view-document-type-permissions')
-export class UmbWorkspaceViewDocumentTypePermissionsElement extends UmbLitElement {
+@customElement('umb-document-type-workspace-view-details')
+export class UmbDocumentTypeWorkspaceViewDetailsElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			:host {
-				display: block;
+			uui-box {
 				margin: var(--uui-size-layout-1);
 			}
+
 			uui-label,
 			umb-property-editor-ui-number {
 				display: block;
 			}

+			// TODO: is this necessary?
 			uui-toggle {
 				display: flex;
 			}
@@ -50,39 +51,32 @@ export class UmbWorkspaceViewDocumentTypePermissionsElement extends UmbLitElemen

 	render() {
 		return html`
-			<uui-box headline="Permissions">
-				<umb-workspace-property-layout alias="Root" label="Allow as Root">
-					<div slot="description">Allow editors to create content of this type in the root of the content tree.</div>
-					<div slot="editor"><uui-toggle label="Allow as root"></uui-toggle></div>
-				</umb-workspace-property-layout>
-				<umb-workspace-property-layout alias="ChildNodeType" label="Allowed child node types">
-					<div slot="description">
-						Allow content of the specified types to be created underneath content of this type.
-					</div>
-					<div slot="editor">
-						<umb-input-document-type-picker
-							.currentDocumentType="${this._documentType}"></umb-input-document-type-picker>
-					</div>
-				</umb-workspace-property-layout>
-				<umb-workspace-property-layout alias="VaryByNature" label="Allow vary by culture">
+			<uui-box headline="Data configuration">
+				<umb-workspace-property-layout alias="VaryByCulture" label="Allow vary by culture">
 					<div slot="description">Allow editors to create content of different languages.</div>
 					<div slot="editor"><uui-toggle label="Vary by culture"></uui-toggle></div>
 				</umb-workspace-property-layout>
+				<umb-workspace-property-layout alias="VaryBySegments" label="Allow segmentation">
+					<div slot="description">Allow editors to segment their content.</div>
+					<div slot="editor"><uui-toggle label="Vary by segments"></uui-toggle></div>
+				</umb-workspace-property-layout>
 				<umb-workspace-property-layout alias="ElementType" label="Is an Element Type">
 					<div slot="description">
-						An Element Type is meant to be used for instance in Nested Content, and not in the tree.<br />
-						A Document Type cannot be changed to an Element Type once it has been used to create one or more content
-						items.
+						An Element Type is used for content instances in Property Editors, like the Block Editors.
 					</div>
 					<div slot="editor"><uui-toggle label="Element type"></uui-toggle></div>
 				</umb-workspace-property-layout>
+			</uui-box>
+			<uui-box headline="History cleanup">
 				<umb-workspace-property-layout alias="HistoryCleanup" label="History cleanup">
-					<div slot="description">Allow overriding the global history cleanup settings.</div>
+					<div slot="description">
+						Allow overriding the global history cleanup settings. (TODO: this ui is not working.. )
+					</div>
 					<div slot="editor">
 						<uui-toggle .checked="${true}" label="Auto cleanup"></uui-toggle>
-						<uui-label for="versions-newer-than-days">Keep all versions newer than days</uui-label>
+						<uui-label for="versions-newer-than-days">Keep all versions newer than X days</uui-label>
 						<umb-property-editor-ui-number id="versions-newer-than-days"></umb-property-editor-ui-number>
-						<uui-label for="latest-version-per-day-days">Keep latest version per day for days</uui-label>
+						<uui-label for="latest-version-per-day-days">Keep latest version per day for X days</uui-label>
 						<umb-property-editor-ui-number id="latest-version-per-day-days"></umb-property-editor-ui-number>
 					</div>
 				</umb-workspace-property-layout>
@@ -91,10 +85,10 @@ export class UmbWorkspaceViewDocumentTypePermissionsElement extends UmbLitElemen
 	}
 }

-export default UmbWorkspaceViewDocumentTypePermissionsElement;
+export default UmbDocumentTypeWorkspaceViewDetailsElement;

 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-workspace-view-document-type-permissions': UmbWorkspaceViewDocumentTypePermissionsElement;
+		'umb-document-type-workspace-view-details': UmbDocumentTypeWorkspaceViewDetailsElement;
 	}
 }
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/listview/workspace-view-document-type-listview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/listview/workspace-view-document-type-listview.element.ts
@@ -1,46 +0,0 @@
-import { css, html } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, state } from 'lit/decorators.js';
-import { UmbWorkspaceDocumentTypeContext } from '../../document-type-workspace.context';
-import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-
-@customElement('umb-workspace-view-document-type-listview')
-export class UmbWorkspaceViewDocumentTypeListviewElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
-
-	@state()
-	_documentType?: DocumentTypeResponseModel;
-
-	private _workspaceContext?: UmbWorkspaceDocumentTypeContext;
-
-	constructor() {
-		super();
-
-		// TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken
-		this.consumeContext<UmbWorkspaceDocumentTypeContext>('umbWorkspaceContext', (documentTypeContext) => {
-			this._workspaceContext = documentTypeContext;
-			this._observeDocumentType();
-		});
-	}
-
-	private _observeDocumentType() {
-		if (!this._workspaceContext) return;
-
-		this.observe(this._workspaceContext.data, (documentType) => {
-			this._documentType = documentType;
-		});
-	}
-
-	render() {
-		return html` Listview `;
-	}
-}
-
-export default UmbWorkspaceViewDocumentTypeListviewElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-workspace-view-document-type-listview': UmbWorkspaceViewDocumentTypeListviewElement;
-	}
-}
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
@@ -0,0 +1,88 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbWorkspaceDocumentTypeContext } from '../../document-type-workspace.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-document-type-workspace-view-structure')
+export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-label,
+			umb-property-editor-ui-number {
+				display: block;
+			}
+
+			// TODO: is this necessary?
+			uui-toggle {
+				display: flex;
+			}
+		`,
+	];
+
+	@state()
+	_documentType?: DocumentTypeResponseModel;
+
+	private _workspaceContext?: UmbWorkspaceDocumentTypeContext;
+
+	constructor() {
+		super();
+
+		// TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken
+		this.consumeContext<UmbWorkspaceDocumentTypeContext>('umbWorkspaceContext', (documentTypeContext) => {
+			this._workspaceContext = documentTypeContext;
+			this._observeDocumentType();
+		});
+	}
+
+	private _observeDocumentType() {
+		if (!this._workspaceContext) return;
+
+		this.observe(this._workspaceContext.data, (documentType) => {
+			this._documentType = documentType;
+		});
+	}
+
+	render() {
+		return html`
+			<uui-box headline="Structure">
+				<umb-workspace-property-layout alias="Root" label="Allow as Root">
+					<div slot="description">Allow editors to create content of this type in the root of the content tree.</div>
+					<div slot="editor"><uui-toggle label="Allow as root"></uui-toggle></div>
+				</umb-workspace-property-layout>
+				<umb-workspace-property-layout alias="ChildNodeType" label="Allowed child node types">
+					<div slot="description">
+						Allow content of the specified types to be created underneath content of this type.
+					</div>
+					<div slot="editor">
+						<umb-input-document-type-picker
+							.currentDocumentType="${this._documentType}"></umb-input-document-type-picker>
+					</div>
+				</umb-workspace-property-layout>
+			</uui-box>
+			<uui-box headline="Presentation">
+				<umb-workspace-property-layout alias="Root" label="Collection">
+					<div slot="description">
+						Use this document as a collection, displaying its children in a Collection View. This could be a list or a
+						table.
+					</div>
+					<div slot="editor"><uui-toggle label="Present as a Collection"></uui-toggle></div>
+				</umb-workspace-property-layout>
+			</uui-box>
+		`;
+	}
+}
+
+export default UmbDocumentTypeWorkspaceViewStructureElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-type-workspace-view-structure': UmbDocumentTypeWorkspaceViewStructureElement;
+	}
+}
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts
@@ -5,8 +5,8 @@ import { UmbWorkspaceDocumentTypeContext } from '../../document-type-workspace.c
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';

-@customElement('umb-workspace-view-document-type-templates')
-export class UmbWorkspaceViewDocumentTypeTemplatesElement extends UmbLitElement {
+@customElement('umb-document-type-workspace-view-templates')
+export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -82,10 +82,10 @@ export class UmbWorkspaceViewDocumentTypeTemplatesElement extends UmbLitElement
 	}
 }

-export default UmbWorkspaceViewDocumentTypeTemplatesElement;
+export default UmbDocumentTypeWorkspaceViewTemplatesElement;

 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-workspace-view-document-type-templates': UmbWorkspaceViewDocumentTypeTemplatesElement;
+		'umb-document-type-workspace-view-templates': UmbDocumentTypeWorkspaceViewTemplatesElement;
 	}
 }