From 18faafb57bb27245a6aaff5ffd263e5a4569496a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 2 Jun 2022 14:40:08 +0200
Subject: [PATCH] umb-editor-property-layout

---
 src/Umbraco.Web.UI.Client/src/app.ts          |  3 +-
 ...ut.element.ts => editor-layout.element.ts} | 10 +++---
 .../editors/editor-property-layout.element.ts | 32 +++++++++++++++++++
 .../node-editor/node-property.element.ts      | 20 ++++--------
 .../content/content-editor.element.ts         |  4 +--
 5 files changed, 47 insertions(+), 22 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/editors/{node-editor/node-editor-layout.element.ts => editor-layout.element.ts} (90%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/editors/editor-property-layout.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index 434bd01c62..6134e275c8 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -11,7 +11,8 @@ import { UmbNodeStore } from './core/stores/node.store';
 import { UmbDataTypeStore } from './core/stores/data-type.store';
 
 // Load these in the correct components
-import './editors/node-editor/node-editor-layout.element';
+import './editors/editor-layout.element';
+import './editors/editor-property-layout.element';
 import './editors/node-editor/node-property-data-type.element';
 import './editors/node-editor/node-property.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/editors/node-editor/node-editor-layout.element.ts b/src/Umbraco.Web.UI.Client/src/editors/editor-layout.element.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/editors/node-editor/node-editor-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/editors/editor-layout.element.ts
index 404c4f4ac9..8c0c82e69d 100644
--- a/src/Umbraco.Web.UI.Client/src/editors/node-editor/node-editor-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/editors/editor-layout.element.ts
@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
 
-@customElement('umb-node-editor-layout')
-class UmbNodeEditorLayout extends LitElement {
+@customElement('umb-editor-layout')
+class UmbEditorLayout extends LitElement {
   static styles = [
     UUITextStyles,
     css`
@@ -13,7 +13,7 @@ class UmbNodeEditorLayout extends LitElement {
         height: 100%;
       }
 
-      #node-editor {
+      #editor-frame {
         background-color: var(--uui-color-background);
         width: 100%;
         height: 100%;
@@ -57,7 +57,7 @@ class UmbNodeEditorLayout extends LitElement {
 
   render() {
     return html`
-      <div id="node-editor">
+      <div id="editor-frame">
         <div id="header">
           <slot name="name"></slot>
           <slot name="apps"></slot>
@@ -76,6 +76,6 @@ class UmbNodeEditorLayout extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'umb-node-editor-layout': UmbNodeEditorLayout;
+    'umb-editor-layout': UmbEditorLayout;
   }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/editors/editor-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/editors/editor-property-layout.element.ts
new file mode 100644
index 0000000000..02cf90ceb8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/editors/editor-property-layout.element.ts
@@ -0,0 +1,32 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-editor-property-layout')
+class UmbEditorPropertyLayout extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-columns: 200px 600px;
+        gap: 32px;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <slot name="header" class="header">
+      </slot>
+      <slot name="editor" class="editor">
+      </slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-editor-property-layout': UmbEditorPropertyLayout;
+  }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/editors/node-editor/node-property.element.ts b/src/Umbraco.Web.UI.Client/src/editors/node-editor/node-property.element.ts
index 55bf4ae494..14759737c9 100644
--- a/src/Umbraco.Web.UI.Client/src/editors/node-editor/node-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/editors/node-editor/node-property.element.ts
@@ -10,18 +10,10 @@ class UmbNodeProperty extends LitElement {
       :host {
         display: block;
       }
-      .property {
-        display: grid;
-        grid-template-columns: 200px 600px;
-        gap: 32px;
-      }
-      .property > .property-label > p {
+
+      p {
         color: var(--uui-color-text-alt);
       }
-      .property uui-input,
-      .property uui-textarea {
-        width: 100%;
-      }
     `,
   ];
 
@@ -41,18 +33,18 @@ class UmbNodeProperty extends LitElement {
 
   render() {
     return html`
-      <div class="property">
-        <div class="header">
+      <umb-editor-property-layout>
+        <div slot="header">
           <uui-label>${this.property.label}</uui-label>
           <p>${this.property.description}</p>
         </div>
-        <div class="editor">
+        <div slot="editor">
           <umb-node-property-data-type
             .dataTypeKey=${this.property.dataTypeKey}
             .value=${this.value}
             @property-data-type-value-change=${this._onPropertyDataTypeChange}></umb-node-property-data-type>
         </div>
-      </div>
+      </umb-editor-property-layout>
     `;
   }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-editor.element.ts b/src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-editor.element.ts
index b2886ab528..664cbae0c1 100644
--- a/src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-editor.element.ts
@@ -108,7 +108,7 @@ export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
 
   render() {
     return html`
-      <umb-node-editor-layout>
+      <umb-editor-layout>
         <uui-input slot="name" .value="${this._node?.name}"></uui-input>
         <uui-tab-group slot="apps">
           <uui-tab label="Content" active></uui-tab>
@@ -139,7 +139,7 @@ export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
             color="positive"
             label="Save and publish"></uui-button>
         </div>
-      </umb-node-editor-layout>
+      </umb-editor-layout>
     `;
   }
 }