yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feature/user-dialog

Browse Source
This commit is contained in:
Niels Lyngsø
2022-12-15 15:42:51 +01:00
parent d012372b1c 469bef04bd
commit d448d20e8b
4 changed files with 65 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/public/mockServiceWorker.js
View File

@@ -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.

64
src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts
View File

@@ -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 } 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,27 +45,63 @@ 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);
}
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';
};
/**
* Renders a headline in the header.
* @public
* @type {string}
* @attr
* @default ''
*/
@property()
public headline = '';
render() {
return html`
<div id="header">
${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
<slot name="header"></slot>
<slot id="tabs" name="tabs"></slot>
</div>
<uui-scroll-container id="main">
<slot></slot>
</uui-scroll-container>
<div id="footer">
<!-- only show footer if slot has elements -->
<slot name="footer"></slot>
<slot id="actions" name="actions"></slot>
</div>
`;
}

1
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/editor-content.element.ts
View File

@@ -61,7 +61,6 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
#footer {
margin: 0 var(--uui-size-layout-1);
flex:1 1 auto;
}
`,
];

54
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element.ts
View File

@@ -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`
<uui-tab-group id="tabs">
<uui-tab-group slot="tabs">
${this._editorViews.map(
(view: ManifestEditorView) => html`
<uui-tab
@@ -182,26 +152,18 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
render() {
return html`
<umb-body-layout>
<div id="header" slot="header">
<umb-body-layout .headline=${this.headline}>
${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
<slot name="header"></slot>
${this._renderTabs()}
</div>
<slot name="header" slot="header"></slot>
${this._renderTabs()}
<router-slot .routes="${this._routes}"></router-slot>
<slot></slot>
<div id="footer" slot="footer">
<slot name="footer"></slot>
<div id="actions">
<umb-extension-slot type="editorAction" .filter=${(extension: any) => extension.meta.editors.includes(this.alias)}></umb-extension-slot>
<slot name="actions"></slot>
</div>
</div>
<slot name="footer" slot="footer"></slot>
<umb-extension-slot slot="actions" type="editorAction" .filter=${(extension: any) => extension.meta.editors.includes(this.alias)}></umb-extension-slot>
<slot name="actions" slot="actions"></slot>
</umb-body-layout>
`;
}