content and node editor

2022-05-25 16:20:51 +02:00
parent a2c4b773a7
commit f4296fc29b
7 changed files with 207 additions and 167 deletions
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -6,7 +6,7 @@ import './installer/installer.element';
 import './auth/login/login.element';
 import './auth/auth-layout.element';
 import './backoffice/backoffice.element';
-import './backoffice/node-editor.element';
+import './backoffice/node-editor-layout.element';

 import { UmbSectionContext } from './section.context';

@@ -15,7 +15,14 @@ import { customElement } from 'lit/decorators.js';
 import { Subscription } from 'rxjs';

 import { getInitStatus } from './api/fetcher';
-import { isUmbRouterBeforeEnterEvent, UmbRoute, UmbRouteLocation, UmbRouter, UmbRouterBeforeEnterEvent, umbRouterBeforeEnterEventType } from './core/router';
+import {
+  isUmbRouterBeforeEnterEvent,
+  UmbRoute,
+  UmbRouteLocation,
+  UmbRouter,
+  UmbRouterBeforeEnterEvent,
+  umbRouterBeforeEnterEventType,
+} from './core/router';
 import { UmbContextProviderMixin } from './core/context';

 const routes: Array<UmbRoute> = [
@@ -70,7 +77,7 @@ export class UmbApp extends UmbContextProviderMixin(LitElement) {
  private _onBeforeEnter = (event: Event) => {
    if (!isUmbRouterBeforeEnterEvent(event)) return;
    this._handleUnauthorizedNavigation(event);
-  }
+  };

  private _handleUnauthorizedNavigation(event: UmbRouterBeforeEnterEvent) {
    if (event.to.route.meta.requiresAuth && !this._isAuthorized()) {
@@ -100,26 +107,24 @@ export class UmbApp extends UmbContextProviderMixin(LitElement) {
        this._router.push('/install');
        return;
      }
-      
+
      if (!this._isAuthorized() || window.location.pathname === '/install') {
        this._router.push('/login');
      } else {
-        const next = window.location.pathname === '/' ? '/section/Content'  : window.location.pathname;
+        const next = window.location.pathname === '/' ? '/section/Content' : window.location.pathname;
        this._router.push(next);
      }

      this._useLocation();
-
    } catch (error) {
      console.log(error);
    }
  }

-  private _useLocation () {
+  private _useLocation() {
    this._locationSubscription?.unsubscribe();
-      
-    this._locationSubscription = this._router?.location
-    .subscribe((location: UmbRouteLocation) => {
+
+    this._locationSubscription = this._router?.location.subscribe((location: UmbRouteLocation) => {
      if (location.route.alias === 'login') {
        this._renderView('umb-login');
        return;
@@ -134,7 +139,7 @@ export class UmbApp extends UmbContextProviderMixin(LitElement) {
    });
  }

-  _renderView (view: string) {
+  _renderView(view: string) {
    if (this._view?.tagName === view.toUpperCase()) return;
    this._view = document.createElement(view);
    this.requestUpdate();
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
@@ -32,7 +32,7 @@ export class UmbBackofficeMain extends UmbContextConsumerMixin(LitElement) {
  private _sectionContext?: UmbSectionContext;
  private _currentSectionSubscription?: Subscription;

-  constructor () {
+  constructor() {
    super();

    this.consumeContext('umbSectionContext', (_instance: UmbSectionContext) => {
@@ -41,11 +41,10 @@ export class UmbBackofficeMain extends UmbContextConsumerMixin(LitElement) {
    });
  }

-  private _useCurrentSection () {
+  private _useCurrentSection() {
    this._currentSectionSubscription?.unsubscribe();

-    this._currentSectionSubscription = this._sectionContext?.getCurrent()
-    .subscribe(section => {
+    this._currentSectionSubscription = this._sectionContext?.getCurrent().subscribe((section) => {
      this._createSectionElement(section);
    });
  }
@@ -55,12 +54,12 @@ export class UmbBackofficeMain extends UmbContextConsumerMixin(LitElement) {
    this._currentSectionSubscription?.unsubscribe();
  }

-  private async _createSectionElement (section: UmbExtensionManifest<UmbManifestSectionMeta>) {
+  private async _createSectionElement(section: UmbExtensionManifest<UmbManifestSectionMeta>) {
    if (!section) return;

    // TODO: How do we handle dynamic imports of our files?
    if (section.js) {
-      await import(/* @vite-ignore */section.js);
+      await import(/* @vite-ignore */ section.js);
    }

    if (section.elementName) {
@@ -69,9 +68,7 @@ export class UmbBackofficeMain extends UmbContextConsumerMixin(LitElement) {
  }

  render() {
-    return html`
-      ${ this._sectionElement }
-    `;
+    return html` ${this._sectionElement} `;
  }
 }

--- a/src/Umbraco.Web.UI.Client/src/backoffice/node-editor-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/node-editor-layout.element.ts
@@ -0,0 +1,88 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement } from 'lit/decorators.js';
+
+import '../properties/node-property.element.ts';
+import '../properties/property-editor-text.element.ts';
+import '../properties/property-editor-textarea.element.ts';
+
+@customElement('umb-node-editor-layout')
+class UmbNodeEditorLayout extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      #node-editor {
+        background-color: var(--uui-color-background);
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #header {
+        background-color: var(--uui-color-surface);
+        width: 100%;
+        display: flex;
+        flex: none;
+        gap: 16px;
+        align-items: center;
+        border-bottom: 1px solid var(--uui-color-border);
+      }
+
+      #content {
+        padding: var(--uui-size-6);
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      #footer {
+        display: flex;
+        flex: none;
+        justify-content: end;
+        align-items: center;
+        height: 70px;
+        width: 100%;
+        gap: 16px;
+        padding-right: 24px;
+        border-top: 1px solid var(--uui-color-border);
+        background-color: var(--uui-color-surface);
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  private _onSaveAndPublish() {
+    console.log('Save and publish');
+  }
+
+  render() {
+    return html`
+      <div id="node-editor">
+        <div id="header">
+          <slot name="name"></slot>
+          <slot name="apps"></slot>
+        </div>
+        <uui-scroll-container id="content">
+          <slot name="content"></slot>
+        </uui-scroll-container>
+        <div id="footer">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-node-editor-layout': UmbNodeEditorLayout;
+  }
+}
--- a/src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts
@@ -1,136 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement } from 'lit/decorators.js';
-
-import '../properties/node-property.element.ts';
-import '../properties/property-editor-text.element.ts';
-import '../properties/property-editor-textarea.element.ts';
-
-@customElement('umb-node-editor')
-class UmbNodeEditor extends LitElement {
-  static styles = [
-    UUITextStyles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-
-      #node-editor {
-        background-color: var(--uui-color-background);
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      #node-editor-top {
-        background-color: var(--uui-color-surface);
-        width: 100%;
-        display: flex;
-        flex: none;
-        gap: 16px;
-        align-items: center;
-        border-bottom: 1px solid var(--uui-color-border);
-      }
-
-      #node-editor-top uui-input {
-        width: 100%;
-        margin-left: 16px;
-      }
-
-      #node-editor-top uui-tab-group {
-        --uui-tab-divider: var(--uui-color-border);
-        border-left: 1px solid var(--uui-color-border);
-        flex-wrap: nowrap;
-        height: 60px;
-      }
-
-      #node-editor-content {
-        padding: var(--uui-size-6);
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        gap: 16px;
-      }
-
-      uui-tab {
-        font-size: 0.8rem;
-      }
-
-      #node-editor-bottom {
-        display: flex;
-        flex: none;
-        justify-content: end;
-        align-items: center;
-        height: 70px;
-        width: 100%;
-        gap: 16px;
-        padding-right: 24px;
-        border-top: 1px solid var(--uui-color-border);
-        background-color: var(--uui-color-surface);
-        box-sizing: border-box;
-      }
-
-      .property {
-        display: grid;
-        grid-template-columns: 200px 600px;
-        gap: 32px;
-      }
-      .property > .property-label > p {
-        color: var(--uui-color-text-alt);
-      }
-      .property uui-input,
-      .property uui-textarea {
-        width: 100%;
-      }
-
-      uui-box hr {
-        margin-bottom: var(--uui-size-6);
-      }
-
-      hr {
-        border: 0;
-        border-top: 1px solid var(--uui-color-border-alt);
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <div id="node-editor">
-        <div id="node-editor-top">
-          <uui-input value="Home"></uui-input>
-          <uui-tab-group>
-            <uui-tab active>Content</uui-tab>
-            <uui-tab>Info</uui-tab>
-            <uui-tab disabled>Actions</uui-tab>
-          </uui-tab-group>
-        </div>
-        <uui-scroll-container id="node-editor-content">
-          <uui-box>
-            <umb-node-property label="Text string label" description="This is the a text string property">
-              <umb-property-editor-text></umb-property-editor-text>
-            </umb-node-property>
-            <hr />
-            <umb-node-property label="Textarea label" description="this is a textarea property">
-              <umb-property-editor-textarea></umb-property-editor-textarea>
-            </umb-node-property>
-          </uui-box>
-        </uui-scroll-container>
-        <div id="node-editor-bottom">
-          <uui-button>Save and preview</uui-button>
-          <uui-button look="secondary">Save</uui-button>
-          <uui-button look="primary" color="positive">Save and publish</uui-button>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'umb-node-editor': UmbNodeEditor;
-  }
-}
--- a/src/Umbraco.Web.UI.Client/src/content/content-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/content/content-editor.element.ts
@@ -0,0 +1,95 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement } from 'lit/decorators.js';
+
+import '../properties/node-property.element.ts';
+import '../properties/property-editor-text.element.ts';
+import '../properties/property-editor-textarea.element.ts';
+import '../backoffice/node-editor-layout.element.ts';
+
+@customElement('umb-content-editor')
+class UmbContentEditor extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      uui-input {
+        width: 100%;
+        margin-left: 16px;
+      }
+
+      uui-tab-group {
+        --uui-tab-divider: var(--uui-color-border);
+        border-left: 1px solid var(--uui-color-border);
+        flex-wrap: nowrap;
+        height: 60px;
+      }
+
+      uui-tab {
+        font-size: 0.8rem;
+      }
+
+      uui-box hr {
+        margin-bottom: var(--uui-size-6);
+      }
+
+      hr {
+        border: 0;
+        /* TODO: Use correct color property */
+        border-top: 1px solid #e7e7e7;
+      }
+    `,
+  ];
+
+  private _onSaveAndPublish() {
+    console.log('Save and publish');
+  }
+
+  private _onSave() {
+    console.log('Save');
+  }
+
+  private _onSaveAndPreview() {
+    console.log('Save and preview');
+  }
+
+  render() {
+    return html`
+      <umb-node-editor-layout>
+        <uui-input slot="name" value="Home"></uui-input>
+        <uui-tab-group slot="apps">
+          <uui-tab active>Content</uui-tab>
+          <uui-tab>Info</uui-tab>
+          <uui-tab disabled>Actions</uui-tab>
+        </uui-tab-group>
+
+        <uui-box slot="content">
+          <umb-node-property label="Text string label" description="This is the a text string property">
+            <umb-property-editor-text></umb-property-editor-text>
+          </umb-node-property>
+          <hr />
+          <umb-node-property label="Textarea label" description="this is a textarea property">
+            <umb-property-editor-textarea></umb-property-editor-textarea>
+          </umb-node-property>
+        </uui-box>
+
+        <div slot="actions">
+          <uui-button @click=${this._onSaveAndPreview}>Save and preview</uui-button>
+          <uui-button @click=${this._onSave} look="secondary">Save</uui-button>
+          <uui-button @click=${this._onSaveAndPublish} look="primary" color="positive">Save and publish</uui-button>
+        </div>
+      </umb-node-editor-layout>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'umb-content-editor': UmbContentEditor;
+  }
+}
--- a/src/Umbraco.Web.UI.Client/src/content/content-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/content/content-section.element.ts
@@ -1,7 +1,7 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-
+import './content-editor.element';
@defineElement('umb-content-section')
 export class UmbContentSection extends LitElement {
  static styles = [
@@ -16,7 +16,7 @@ export class UmbContentSection extends LitElement {
  ];

  render() {
-    return html`<umb-node-editor></umb-node-editor>`;
+    return html`<umb-content-editor></umb-content-editor>`;
  }
 }

--- a/src/Umbraco.Web.UI.Client/src/properties/node-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/properties/node-property.element.ts
@@ -22,15 +22,6 @@ class UmbNodeProperty extends LitElement {
      .property uui-textarea {
        width: 100%;
      }
-
-      uui-box hr {
-        margin-bottom: var(--uui-size-6);
-      }
-
-      hr {
-        border: 0;
-        border-top: 1px solid var(--uui-color-border-alt);
-      }
    `,
  ];