From f45cf51880b717efdf76752ac6376cefa22a05c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 12 Dec 2022 14:49:43 +0100
Subject: [PATCH] remove icon/name slots from layout, for just one header slot
 + styling adjustments

---
 .../data-type/editor-data-type.element.ts     |  8 ++-
 .../editor-document-type.element.ts           |  5 +-
 .../editor-action-extension.element.ts        |  1 +
 .../editor-content/editor-content.element.ts  | 57 ++++++++++++-------
 .../edit/editor-view-content-edit.element.ts  | 12 +++-
 .../info/editor-view-content-info.element.ts  | 10 +++-
 .../editor-entity-layout.element.ts           | 29 ++++++----
 .../editor-entity/editor-entity.element.ts    | 36 ++++++------
 .../editor-property-layout.element.ts         |  2 +-
 .../user-group/editor-user-group.element.ts   |  2 +-
 .../sections/shared/section.element.ts        | 12 ----
 11 files changed, 100 insertions(+), 74 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
index a8db696e39..f9398a0def 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
@@ -28,8 +28,10 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
 				height: 100%;
 			}
 
-			#name {
-				width: 100%;
+			#header {
+				/* TODO: can this be applied from layout slot CSS? */
+				margin: 0 var(--uui-size-layout-1);
+				flex:1 1 auto;
 			}
 		`,
 	];
@@ -141,7 +143,7 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
 	render() {
 		return html`
 			<umb-editor-entity-layout alias="Umb.Editor.DataType">
-				<uui-input id="name" slot="name" .value=${this._dataTypeName} @input="${this._handleInput}"></uui-input>
+				<uui-input id="header" slot="header" .value=${this._dataTypeName} @input="${this._handleInput}"></uui-input>
 			</umb-editor-entity-layout>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
index e34d9ff1ef..ca925dd249 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
@@ -122,9 +122,8 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(
 	render() {
 		return html`
 			<umb-editor-entity-layout alias="Umb.Editor.DocumentType">
-				<div slot="icon">Icon</div>
-
-				<div slot="name">
+				<div slot="header">
+					<div>Icon</div>
 					<uui-input id="name" .value=${this._documentType?.name} @input="${this._handleInput}">
 						<div id="alias" slot="append">${this._documentType?.alias}</div>
 					</uui-input>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-action-extension/editor-action-extension.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-action-extension/editor-action-extension.element.ts
index 94711a1606..e88b801c70 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-action-extension/editor-action-extension.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-action-extension/editor-action-extension.element.ts
@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { createExtensionElement } from '@umbraco-cms/extensions-api';
 import type { ManifestEditorAction } from '@umbraco-cms/models';
 
+// Niels, thoughts, TODO: Consider naming this just actions, not extension as everything is an extension.
 @customElement('umb-editor-action-extension')
 export class UmbEditorActionExtensionElement extends LitElement {
 	static styles: CSSResultGroup = [UUITextStyles];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/editor-content.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/editor-content.element.ts
index 18d03e63f2..aadcdaa07d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/editor-content.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/editor-content.element.ts
@@ -31,11 +31,22 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 				height: 100%;
 			}
 
-			#popover {
-				display: block;
+			#header {
+				margin: 0 var(--uui-size-layout-1);
+				flex:1 1 auto;
+			}
+			#name-input {
+				width: 100%;
+				height: 100%;/** I really don't know why this fixes the border colliding with variant-selector-toggle, but lets this solution for now */
 			}
 
-			#dropdown {
+			#variant-selector-toggle {
+				white-space: nowrap;
+			}
+			#variant-selector-popover {
+				display: block;
+			}
+			#variant-selector-dropdown {
 				overflow: hidden;
 				z-index: -1;
 				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
@@ -47,8 +58,9 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 				box-shadow: var(--uui-shadow-depth-3);
 			}
 
-			uui-input {
-				width: 100%;
+			#footer {
+				margin: 0 var(--uui-size-layout-1);
+				flex:1 1 auto;
 			}
 		`,
 	];
@@ -90,6 +102,7 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 		}
 	};
 
+	// TODO: How do we ensure this is a change of this document and not nested documents? Should the event be stopped at this spot at avoid such.
 	private _setPropertyValue(alias: string, value: unknown) {
 		this._node?.data.forEach((data) => {
 			if (data.alias === alias) {
@@ -160,13 +173,13 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 	render() {
 		return html`
 			<umb-editor-entity-layout alias=${this.alias}>
-				<div slot="name">
-					<uui-input .value=${this._node?.name} @input="${this._handleInput}">
+				<div id="header" slot="header">
+					<uui-input id="name-input" .value=${this._node?.name} @input="${this._handleInput}">
 						<!-- Implement Variant Selector -->
 						${this._node && this._node.variants.length > 0
 							? html`
 									<div slot="append">
-										<uui-button id="trigger" @click=${this._toggleVariantSelector}>
+										<uui-button id="variant-selector-toggle" @click=${this._toggleVariantSelector}>
 											English (United States)
 											<uui-caret></uui-caret>
 										</uui-button>
@@ -176,11 +189,12 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 					</uui-input>
 
 					<!-- Implement Variant Selector -->
+					<!-- TODO: Refactor Variant Selector into its own component -->
 					${this._node && this._node.variants.length > 0
 						? html`
-								<uui-popover id="popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
-									<div id="dropdown" slot="popover">
-										<uui-scroll-container id="scroll-container">
+								<uui-popover id="variant-selector-popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
+									<div id="variant-selector-dropdown" slot="popover">
+										<uui-scroll-container>
 											<ul>
 												<li>Implement variants</li>
 											</ul>
@@ -191,17 +205,16 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 						: nothing}
 				</div>
 
-				<div slot="footer">Breadcrumbs</div>
-
-				<div slot="actions">
-					<uui-button @click=${this._onSaveAndPreview} label="Save and preview"></uui-button>
-					<uui-button @click=${this._onSave} look="secondary" label="Save"></uui-button>
-					<uui-button
-						@click=${this._onSaveAndPublish}
-						look="primary"
-						color="positive"
-						label="Save and publish"></uui-button>
-				</div>
+				<div id="footer" slot="footer">Breadcrumbs</div>
+				<!-- TODO: convert document editor actions to extensions: -->
+				<uui-button slot="actions" @click=${this._onSaveAndPreview} label="Save and preview"></uui-button>
+				<uui-button slot="actions" @click=${this._onSave} look="secondary" label="Save"></uui-button>
+				<uui-button
+					slot="actions" 
+					@click=${this._onSaveAndPublish}
+					look="primary"
+					color="positive"
+					label="Save and publish"></uui-button>
 			</umb-editor-entity-layout>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/edit/editor-view-content-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/edit/editor-view-content-edit.element.ts
index 9fe57681d6..59cf84b616 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/edit/editor-view-content-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/edit/editor-view-content-edit.element.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { distinctUntilChanged } from 'rxjs';
@@ -11,7 +11,15 @@ import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 
 @customElement('umb-editor-view-content-edit')
 export class UmbEditorViewContentEditElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
-	static styles = [UUITextStyles];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display:block;
+				margin: var(--uui-size-layout-1);
+			}
+		`
+	];
 
 	@state()
 	_properties: NodeProperty[] = [];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/info/editor-view-content-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/info/editor-view-content-info.element.ts
index 1097d97afc..e251966291 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/info/editor-view-content-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/info/editor-view-content-info.element.ts
@@ -9,7 +9,15 @@ import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 
 @customElement('umb-editor-view-content-info')
 export class UmbEditorViewContentInfoElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display:block;
+				margin: var(--uui-size-layout-1);
+			}
+		`
+	];
 
 	private _nodeContext?: UmbNodeContext;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts
index 986d588ef5..2484aba245 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts
@@ -38,27 +38,32 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 
 			#header {
 				display: flex;
-				gap: 16px;
 				align-items: center;
 				min-height: 60px;
 			}
 
-			#name {
+			#headline {
 				display: block;
 				flex: 1 1 auto;
+				margin: 0 var(--uui-size-layout-1);
+			}
+
+			#tabs {
+				margin-left: auto;
 			}
 
 			#footer {
 				display: flex;
 				height: 100%;
 				align-items: center;
-				gap: 16px;
 				flex: 1 1 auto;
 			}
 
 			#actions {
-				display: block;
+				display: flex;
 				margin-left: auto;
+				gap: 6px;
+				margin: 0 var(--uui-size-layout-1);
 			}
 
 			uui-input {
@@ -167,11 +172,11 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 		}
 	}
 
-	private _renderViews() {
+	private _renderTabs() {
 		return html`
 			${this._editorViews?.length > 0
 				? html`
-						<uui-tab-group slot="views">
+						<uui-tab-group id="tabs">
 							${this._editorViews.map(
 								(view: ManifestEditorView) => html`
 									<uui-tab
@@ -193,12 +198,12 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
 		return html`
 			<umb-body-layout>
 				<div id="header" slot="header">
-					<slot id="icon" name="icon"></slot>
-					<div id="name">
-						${this.headline ? html`<h3>${this.headline}</h3>` : nothing}
-						<slot id="name" name="name"></slot>
-					</div>
-					${this._renderViews()}
+
+					${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
+
+					<slot name="header"></slot>
+
+					${this._renderTabs()}
 				</div>
 
 				<router-slot .routes="${this._routes}"></router-slot>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
index 9c5564500c..bbc7e73d7b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
@@ -36,45 +36,47 @@ export class UmbEditorEntityElement extends UmbContextConsumerMixin(UmbObserverM
 	}
 
 	@state()
-	private _element?: any;
+	private _element?: HTMLElement;
 
-	private _currentEditorAlias = '';
+	private _currentEditorAlias:string | null = null;
 
 	connectedCallback(): void {
 		super.connectedCallback();
 		this._observeEditors();
 	}
 
+	/**
+	TODO: use future system of extension-slot, extension slots must use a condition-system which will be used to determine the filtering happening below.
+	This will first be possible to make when ContextApi is available, as conditions will use this system.
+	*/
 	private _observeEditors() {
-		this.observe<ManifestEditor>(
+		this.observe<ManifestEditor | undefined>(
 			umbExtensionsRegistry
 				.extensionsOfType('editor')
 				.pipe(map((editors) => editors.find((editor) => editor.meta.entityType === this.entityType))),
 			(editor) => {
 				// don't rerender editor if it's the same
-				if (this._currentEditorAlias === editor.alias) return;
-				this._currentEditorAlias = editor.alias;
+				const newEditorAlias = editor?.alias || '';
+				if (this._currentEditorAlias === newEditorAlias) return;
+				this._currentEditorAlias = newEditorAlias;
 				this._createElement(editor);
 			}
 		);
 	}
 
 	private async _createElement(editor?: ManifestEditor) {
-		// TODO: implement fallback editor
-		const fallbackEditor = document.createElement('div');
-		fallbackEditor.innerHTML = '<p>No editor found</p>';
-
-		if (!editor) {
-			this._element = fallbackEditor;
+		this._element = editor ? (await createExtensionElement(editor)) : undefined;
+		if (this._element) {
+			// TODO: use contextApi for this.
+			(this._element as any).entityKey = this.entityKey;
 			return;
 		}
 
-		try {
-			this._element = (await createExtensionElement(editor)) as any;
-			this._element.entityKey = this.entityKey;
-		} catch (error) {
-			this._element = fallbackEditor;
-		}
+		// TODO: implement fallback editor
+		// Note for extension-slot, we must enable giving the extension-slot a fallback element.
+		const fallbackEditor = document.createElement('div');
+		fallbackEditor.innerHTML = '<p>No editor found</p>';
+		this._element = fallbackEditor;
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
index d0dd047dee..622226947e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
@@ -16,7 +16,7 @@ export class UmbEditorPropertyLayoutElement extends LitElement {
 			:host {
 				display: grid;
 				grid-template-columns: 200px 600px;
-				gap: 32px;
+				gap: var(--uui-size-layout-2);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
index d202b68f11..29155f361e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
@@ -264,7 +264,7 @@ export class UmbEditorUserGroupElement extends LitElement {
 	render() {
 		return html`
 			<umb-editor-entity-layout alias="Umb.Editor.UserGroup">
-				<uui-input id="name" slot="name" .value=${this._userName} @input="${this._handleInput}"></uui-input>
+				<uui-input id="name" slot="header" .value=${this._userName} @input="${this._handleInput}"></uui-input>
 				<div id="main">
 					<div id="left-column">${this.renderLeftColumn()}</div>
 					<div id="right-column">${this.renderRightColumn()}</div>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
index 5dc4b60b33..4c6f372374 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
@@ -24,18 +24,6 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
 				display: flex;
 			}
 
-			#header {
-				display: flex;
-				gap: 16px;
-				align-items: center;
-				min-height: 60px;
-			}
-
-			uui-tab-group {
-				--uui-tab-divider: var(--uui-color-border);
-				border-left: 1px solid var(--uui-color-border);
-				border-right: 1px solid var(--uui-color-border);
-			}
 			#router-slot {
 				overflow: auto;
 				height: 100%;