diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
index 957af35b5f..0fd9698293 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -13,7 +13,9 @@ import './components/backoffice-notification-container.element';
import './components/editor-layout.element';
import './components/editor-property-layout.element';
import './components/node-property.element';
+import './components/section-layout.element';
import './components/section-sidebar.element';
+import './components/section-main.element';
@defineElement('umb-backoffice')
export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/section-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/section-layout.element.ts
new file mode 100644
index 0000000000..116fb2bf94
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/section-layout.element.ts
@@ -0,0 +1,27 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-section-layout')
+export class UmbSectionLayout extends LitElement {
+ static styles = [
+ UUITextStyles,
+ css`
+ :host {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ }
+ `,
+ ];
+
+ render() {
+ return html``;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-section-layout': UmbSectionLayout;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/section-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/section-main.element.ts
new file mode 100644
index 0000000000..664add7cbb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/section-main.element.ts
@@ -0,0 +1,26 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-section-main')
+export class UmbSectionMain extends LitElement {
+ static styles = [
+ UUITextStyles,
+ css`
+ :host {
+ flex: 1 1 auto;
+ height: 100%;
+ }
+ `,
+ ];
+
+ render() {
+ return html``;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-section-main': UmbSectionMain;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts
new file mode 100644
index 0000000000..3a09b4683a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts
@@ -0,0 +1,11 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-editor-data-type')
+export class UmbEditorDataType extends LitElement {
+ render() {
+ return html`Data types
`;
+ }
+}
+
+export default UmbEditorDataType;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-extensions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-extensions.element.ts
new file mode 100644
index 0000000000..ef3189a1e3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-extensions.element.ts
@@ -0,0 +1,72 @@
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Subscription } from 'rxjs';
+import { UmbContextConsumerMixin } from '../../core/context';
+import { UmbExtensionManifest, UmbExtensionRegistry } from '../../core/extension';
+
+@customElement('umb-editor-extensions')
+export class UmbEditorExtensions extends UmbContextConsumerMixin(LitElement) {
+ @state()
+ private _extensions: Array = [];
+
+ private _extensionRegistry?: UmbExtensionRegistry;
+ private _extensionsSubscription?: Subscription;
+
+ constructor() {
+ super();
+
+ this.consumeContext('umbExtensionRegistry', (_instance: UmbExtensionRegistry) => {
+ this._extensionRegistry = _instance;
+
+ this._extensionsSubscription?.unsubscribe();
+
+ // TODO: Niels: Could we make it easier to unsubscribe? If we invented a Pattern/Mixin/class ala Lit-Controllers we could make it auto unsubscribe.
+ // ContextConsumers could be turned into single classes which uses the 'Controller' ability to hook into connected and disconnected.
+ // Generally that means that a web component must have the ControllerMixin?? and then controllers can easily be attached, they would know about life cycle and thereby be able to unsubscribe on disconnected etc.
+ //
+ // All code regarding subscription could be boiled down to:
+ // OurUmbracoSubscribeMethod(this, this._extensionRegistry.extensions, (extensions) => {}); // uses `this` to append the subscription to the controller array.
+ // Or:
+ // this.attachSubscription(this._extensionRegistry.extensions, (extensions) => {});
+ this._extensionsSubscription = this._extensionRegistry.extensions.subscribe((extensions) => {
+ this._extensions = [...extensions]; // TODO: Though, this is a shallow clone, wouldn't we either do a deep clone or no clone at all?
+ });
+
+ this._extensionsSubscription = this._extensionRegistry.extensionsOfType('section').subscribe((sections) => {
+ // In this callback sections are typed. Example meta.weight...
+ console.log(sections[0].meta.weight);
+ });
+ });
+ }
+
+ disconnectedCallback(): void {
+ super.disconnectedCallback();
+ this._extensionsSubscription?.unsubscribe();
+ }
+
+ render() {
+ return html`
+
+
+
+ Type
+ Name
+ Alias
+
+
+ ${this._extensions.map(
+ (extension) => html`
+
+ ${extension.type}
+ ${extension.name}
+ ${extension.alias}
+
+ `
+ )}
+
+
+ `;
+ }
+}
+
+export default UmbEditorExtensions;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts
new file mode 100644
index 0000000000..0aa7a1b7c4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts
@@ -0,0 +1,33 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+
+@customElement('umb-settings-section-tree')
+class UmbSettingsSectionTree extends LitElement {
+ static styles = [
+ UUITextStyles,
+ css`
+ h3 {
+ padding: var(--uui-size-4) var(--uui-size-8);
+ }
+ `,
+ ];
+
+ render() {
+ return html`
+
+ Settings
+
+
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-settings-section-tree': UmbSettingsSectionTree;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts
index 92d95baf90..c24d543e84 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts
@@ -1,81 +1,43 @@
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { Subscription } from 'rxjs';
+import { IRoute } from 'router-slot';
import { UmbContextConsumerMixin } from '../../../core/context';
-import { UmbExtensionManifest, UmbExtensionRegistry } from '../../../core/extension';
+import './settings-section-tree.element';
@customElement('umb-settings-section')
export class UmbSettingsSection extends UmbContextConsumerMixin(LitElement) {
- static styles = [
- UUITextStyles,
- css`
- :host {
- display: block;
- padding: var(--uui-size-space-5);
- }
- `,
- ];
-
+ // TODO: hardcoded tree routes. These should come from extensions
@state()
- private _extensions: Array = [];
-
- private _extensionRegistry?: UmbExtensionRegistry;
- private _extensionsSubscription?: Subscription;
-
- constructor() {
- super();
-
- this.consumeContext('umbExtensionRegistry', (_instance: UmbExtensionRegistry) => {
- this._extensionRegistry = _instance;
-
- this._extensionsSubscription?.unsubscribe();
-
- // TODO: Niels: Could we make it easier to unsubscribe? If we invented a Pattern/Mixin/class ala Lit-Controllers we could make it auto unsubscribe.
- // ContextConsumers could be turned into single classes which uses the 'Controller' ability to hook into connected and disconnected.
- // Generally that means that a web component must have the ControllerMixin?? and then controllers can easily be attached, they would know about life cycle and thereby be able to unsubscribe on disconnected etc.
- //
- // All code regarding subscription could be boiled down to:
- // OurUmbracoSubscribeMethod(this, this._extensionRegistry.extensions, (extensions) => {}); // uses `this` to append the subscription to the controller array.
- // Or:
- // this.attachSubscription(this._extensionRegistry.extensions, (extensions) => {});
- this._extensionsSubscription = this._extensionRegistry.extensions.subscribe((extensions) => {
- this._extensions = [...extensions]; // TODO: Though, this is a shallow clone, wouldn't we either do a deep clone or no clone at all?
- });
-
- this._extensionsSubscription = this._extensionRegistry.extensionsOfType('section').subscribe((sections) => {
- // In this callback sections are typed. Example meta.weight...
- console.log(sections[0].meta.weight);
- });
- });
- }
-
- disconnectedCallback(): void {
- super.disconnectedCallback();
- this._extensionsSubscription?.unsubscribe();
- }
+ private _routes: Array = [
+ {
+ path: 'dashboard',
+ component: () => import('../../components/section-dashboards.element'),
+ },
+ {
+ path: 'extensions',
+ component: () => import('../../editors/editor-extensions.element'),
+ },
+ {
+ path: 'data-types',
+ component: () => import('../../editors/editor-data-type.element'),
+ },
+ {
+ path: '**',
+ redirectTo: 'dashboard',
+ },
+ ];
render() {
return html`
-
-
-
- Type
- Name
- Alias
-
+
+
+
+
- ${this._extensions.map(
- (extension) => html`
-
- ${extension.type}
- ${extension.name}
- ${extension.alias}
-
- `
- )}
-
-
+
+
+
+
`;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index 9405f3d6a4..bc65d8dff3 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -112,24 +112,24 @@ export const internalManifests: Array = [
icon: 'info',
},
},
- {
- type: 'propertyAction',
- alias: 'Umb.PropertyAction.Copy',
- name: 'Copy',
- elementName: 'umb-property-action-copy',
- js: () => import('./backoffice/property-actions/property-action-copy.element'),
- meta: {
- propertyEditors: ['Umb.PropertyEditorUI.Text']
- }
- },
- {
- type: 'propertyAction',
- alias: 'Umb.PropertyAction.Clear',
- name: 'Clear',
- elementName: 'umb-property-action-clear',
- js: () => import('./backoffice/property-actions/property-action-clear.element'),
- meta: {
- propertyEditors: ['Umb.PropertyEditorUI.Text']
- }
- }
+ {
+ type: 'propertyAction',
+ alias: 'Umb.PropertyAction.Copy',
+ name: 'Copy',
+ elementName: 'umb-property-action-copy',
+ js: () => import('./backoffice/property-actions/property-action-copy.element'),
+ meta: {
+ propertyEditors: ['Umb.PropertyEditorUI.Text'],
+ },
+ },
+ {
+ type: 'propertyAction',
+ alias: 'Umb.PropertyAction.Clear',
+ name: 'Clear',
+ elementName: 'umb-property-action-clear',
+ js: () => import('./backoffice/property-actions/property-action-clear.element'),
+ meta: {
+ propertyEditors: ['Umb.PropertyEditorUI.Text'],
+ },
+ },
];