From 818d06c651223c0a01a8506e7a21010739925a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 15 Dec 2022 13:12:47 +0100 Subject: [PATCH 1/3] action and tabs slot for body-layout --- .../body-layout/body-layout.element.ts | 63 ++++++++++++++++--- .../editor-content/editor-content.element.ts | 1 - .../editor-entity-layout.element.ts | 54 +++------------- 3 files changed, 62 insertions(+), 56 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts index 32d31aee54..fa872657a7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts @@ -1,6 +1,6 @@ -import { css, html, LitElement } from 'lit'; +import { css, html, LitElement, nothing } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; @customElement('umb-body-layout') export class UmbBodyLayout extends LitElement { @@ -16,15 +16,27 @@ export class UmbBodyLayout extends LitElement { } #header { - background-color: var(--uui-color-surface); + display: flex; + align-items: center; + justify-content: space-between; width: 100%; + min-height: 60px; + + background-color: var(--uui-color-surface); border-bottom: 1px solid var(--uui-color-border); box-sizing: border-box; - /* padding: 0 var(--uui-size-6); */ + } + + #headline { + display: block; + margin: 0 var(--uui-size-layout-1); + } + + #tabs { + margin-left: auto; } #main { - /* padding: 0 var(--uui-size-6); */ display: flex; flex: 1; flex-direction: column; @@ -33,28 +45,61 @@ export class UmbBodyLayout extends LitElement { #footer { display: flex; align-items: center; - height: 70px; + justify-content: space-between; width: 100%; - /*padding: 0 var(--uui-size-6);*/ + height: 54px; /* TODO: missing var(--uui-size-18);*/ border-top: 1px solid var(--uui-color-border); background-color: var(--uui-color-surface); box-sizing: border-box; } + + #actions { + display: flex; + gap: 6px; + margin: 0 var(--uui-size-layout-1); + margin-left: auto; + } `, ]; + + connectedCallback() { + super.connectedCallback(); + this.shadowRoot?.removeEventListener('slotchange', this._slotChanged); + this.shadowRoot?.addEventListener('slotchange', this._slotChanged); + } + + private _slotChanged = (e: Event) => { + (e.target as any).style.display = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0 ? '' : 'none'; + }; + + /** + * Alias of the editor. The Layout will render the editor views that are registered for this editor alias. + * @public + * @type {string} + * @attr + * @default '' + */ + @property() + public headline = ''; + render() { return html` + + `; } } 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 34c3ca3fa1..0041e9046a 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 @@ -61,7 +61,6 @@ export class UmbEditorContentElement extends UmbContextProviderMixin( #footer { margin: 0 var(--uui-size-layout-1); - flex:1 1 auto; } `, ]; 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 6b4f567f1b..7ff23cf616 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 @@ -37,36 +37,6 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi height: 100%; } - #header { - display: flex; - align-items: center; - min-height: 60px; - } - - #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; - flex: 1 1 auto; - } - - #actions { - display: flex; - margin-left: auto; - gap: 6px; - margin: 0 var(--uui-size-layout-1); - } - uui-input { width: 100%; } @@ -162,7 +132,7 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi return html` ${this._editorViews?.length > 0 ? html` - + ${this._editorViews.map( (view: ManifestEditorView) => html` - + + ${this._renderTabs()} - + + extension.meta.editors.includes(this.alias)}> + + `; } From 457269269f0238dbb3bef222c9640473fbd256af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 15 Dec 2022 13:13:34 +0100 Subject: [PATCH 2/3] clean + disconnect --- .../components/body-layout/body-layout.element.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts index fa872657a7..aad18332ed 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts @@ -1,6 +1,6 @@ import { css, html, LitElement, nothing } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; @customElement('umb-body-layout') export class UmbBodyLayout extends LitElement { @@ -69,6 +69,11 @@ export class UmbBodyLayout extends LitElement { this.shadowRoot?.addEventListener('slotchange', this._slotChanged); } + disconnectedCallback() { + super.disconnectedCallback(); + this.shadowRoot?.removeEventListener('slotchange', this._slotChanged); + } + private _slotChanged = (e: Event) => { (e.target as any).style.display = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0 ? '' : 'none'; }; From 1df12214420e3462cc9422a2a095a34926a8677b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Dec 2022 14:16:10 +0100 Subject: [PATCH 3/3] update property description --- .../public/mockServiceWorker.js | 2 +- .../body-layout/body-layout.element.ts | 16 +++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js b/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js index 4ed73191bd..70f0a2b994 100644 --- a/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js +++ b/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js @@ -2,7 +2,7 @@ /* tslint:disable */ /** - * Mock Service Worker (0.49.1). + * Mock Service Worker (0.49.2). * @see https://github.com/mswjs/msw * - Please do NOT modify this file. * - Please do NOT serve this file on production. diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts index aad18332ed..b15ac3fa35 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts @@ -18,7 +18,7 @@ export class UmbBodyLayout extends LitElement { #header { display: flex; align-items: center; - justify-content: space-between; + justify-content: space-between; width: 100%; min-height: 60px; @@ -45,7 +45,7 @@ export class UmbBodyLayout extends LitElement { #footer { display: flex; align-items: center; - justify-content: space-between; + justify-content: space-between; width: 100%; height: 54px; /* TODO: missing var(--uui-size-18);*/ border-top: 1px solid var(--uui-color-border); @@ -62,7 +62,6 @@ export class UmbBodyLayout extends LitElement { `, ]; - connectedCallback() { super.connectedCallback(); this.shadowRoot?.removeEventListener('slotchange', this._slotChanged); @@ -75,11 +74,12 @@ export class UmbBodyLayout extends LitElement { } private _slotChanged = (e: Event) => { - (e.target as any).style.display = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0 ? '' : 'none'; + (e.target as any).style.display = + (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0 ? '' : 'none'; }; /** - * Alias of the editor. The Layout will render the editor views that are registered for this editor alias. + * Renders a headline in the header. * @public * @type {string} * @attr @@ -92,7 +92,7 @@ export class UmbBodyLayout extends LitElement { return html` @@ -100,11 +100,9 @@ export class UmbBodyLayout extends LitElement { - - `; } }