From f4296fc29b909a4217a951b522cce32c9bb242ff Mon Sep 17 00:00:00 2001 From: JesmoDev Date: Wed, 25 May 2022 16:20:51 +0200 Subject: [PATCH] content and node editor --- src/Umbraco.Web.UI.Client/src/app.ts | 27 ++-- .../src/backoffice/backoffice-main.element.ts | 15 +- .../backoffice/node-editor-layout.element.ts | 88 ++++++++++++ .../src/backoffice/node-editor.element.ts | 136 ------------------ .../src/content/content-editor.element.ts | 95 ++++++++++++ .../src/content/content-section.element.ts | 4 +- .../src/properties/node-property.element.ts | 9 -- 7 files changed, 207 insertions(+), 167 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/node-editor-layout.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/content/content-editor.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index bf7b86de04..c0ab95ddb5 100644 --- 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 = [ @@ -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(); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts index 8dcbc9c0b6..b148b30f62 100644 --- 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) { + private async _createSectionElement(section: UmbExtensionManifest) { 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} `; } } diff --git 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 new file mode 100644 index 0000000000..76c3ada1a6 --- /dev/null +++ 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` +
+ + + + + +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-node-editor-layout': UmbNodeEditorLayout; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts deleted file mode 100644 index 6c9a5af9b2..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/node-editor.element.ts +++ /dev/null @@ -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` -
-
- - - Content - Info - Actions - -
- - - - - -
- - - - - -
- Save and preview - Save - Save and publish -
-
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-node-editor': UmbNodeEditor; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/content/content-editor.element.ts b/src/Umbraco.Web.UI.Client/src/content/content-editor.element.ts new file mode 100644 index 0000000000..a2da80d294 --- /dev/null +++ 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` + + + + Content + Info + Actions + + + + + + +
+ + + + + +
+ Save and preview + Save + Save and publish +
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-content-editor': UmbContentEditor; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/content/content-section.element.ts b/src/Umbraco.Web.UI.Client/src/content/content-section.element.ts index 195756b124..a9aacb177d 100644 --- 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``; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/properties/node-property.element.ts b/src/Umbraco.Web.UI.Client/src/properties/node-property.element.ts index 78ce523098..708cf8a4b0 100644 --- 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); - } `, ];