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

added navigation slot and default padding for header-slot

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-06-07 22:02:05 +12:00
parent 67307d3a19
commit 1a3255980b
3 changed files with 83 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
View File

@@ -39,6 +39,9 @@ export class UmbBodyLayoutElement extends LitElement {
@state()
private _headerSlotHasChildren = false;
@state()
private _navigationSlotHasChildren = false;
@state()
private _tabsSlotHasChildren = false;
@@ -81,28 +84,37 @@ export class UmbBodyLayoutElement extends LitElement {
style="display: ${this.headline ||
this._headerSlotHasChildren ||
this._tabsSlotHasChildren ||
this._actionsMenuSlotHasChildren
this._actionsMenuSlotHasChildren ||
this._navigationSlotHasChildren
? ''
: 'none'}">
${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
<slot
id="header-slot"
name="header"
@slotchange=${(e: Event) => {
this._headerSlotHasChildren = this.#hasNodes(e);
}}></slot>
<slot
id="tabs"
id="tabs-slot"
name="tabs"
@slotchange=${(e: Event) => {
this._tabsSlotHasChildren = this.#hasNodes(e);
}}></slot>
<slot
id="action-menu"
id="action-menu-slot"
name="action-menu"
@slotchange=${(e: Event) => {
this._actionsMenuSlotHasChildren = this.#hasNodes(e);
}}></slot>
<slot
id="navigation-slot"
name="navigation"
@slotchange=${(e: Event) => {
this._actionsMenuSlotHasChildren = this.#hasNodes(e);
}}></slot>
</div>
<!-- This div should be changed for the uui-scroll-container when it gets updated -->
@@ -170,15 +182,30 @@ export class UmbBodyLayoutElement extends LitElement {
box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
}
#header-slot,
#tabs-slot,
#action-menu-slot,
#navigation-slot {
display: flex;
height: 100%;
align-items: center;
}
#header-slot {
padding: 0 var(--uui-size-layout-1);
flex-grow: 1;
}
#navigation-slot,
#tabs-slot {
margin-left: auto;
}
#headline {
display: block;
margin: 0 var(--uui-size-layout-1);
}
#tabs {
margin-left: auto;
}
#main {
display: block;
flex: 1;

111
src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
View File

@@ -119,59 +119,61 @@ export class UmbSectionViewsElement extends UmbLitElement {
}
render() {
return html`
${this._routes.length > 0
? html`
<umb-body-layout no-padding>
<div id="header" slot="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
<umb-router-slot
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
this._routerPath = event.target.absoluteRouterPath;
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
this._activePath = event.target.localActiveViewPath;
}}>
</umb-router-slot>
</umb-body-layout>
`
: nothing}
`;
return this._routes.length > 0
? html`
<umb-body-layout no-padding>
${this.#renderDashboards()} ${this.#renderViews()}
<umb-router-slot
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
this._routerPath = event.target.absoluteRouterPath;
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
this._activePath = event.target.localActiveViewPath;
}}>
</umb-router-slot>
</umb-body-layout>
`
: html`${nothing}`;
}
#renderDashboards() {
return this._dashboards.length > 0 ? html`
<uui-tab-group id="dashboards">
${this._dashboards.map(
(dashboard) => html`
<uui-tab
.label="${dashboard.meta.label || dashboard.name}"
href="${this._routerPath}/dashboard/${dashboard.meta.pathname}"
?active="${this._activePath === 'dashboard/' + dashboard.meta.pathname}">
${dashboard.meta.label || dashboard.name}
</uui-tab>
`
)}
</uui-tab-group>
` : '';
return this._dashboards.length > 0
? html`
<uui-tab-group slot="header" id="dashboards">
${this._dashboards.map(
(dashboard) => html`
<uui-tab
.label="${dashboard.meta.label || dashboard.name}"
href="${this._routerPath}/dashboard/${dashboard.meta.pathname}"
?active="${this._activePath === 'dashboard/' + dashboard.meta.pathname}">
${dashboard.meta.label || dashboard.name}
</uui-tab>
`
)}
</uui-tab-group>
`
: '';
}
#renderViews() {
return this._views.length > 0 ? html`
<uui-tab-group id="views">
${this._views.map(
(view) => html`
<uui-tab
.label="${view.meta.label || view.name}"
href="${this._routerPath}/view/${view.meta.pathname}"
?active="${this._activePath === 'view/' + view.meta.pathname}">
<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
${view.meta.label || view.name}
</uui-tab>
`
)}
</uui-tab-group>
` : '';
return this._views.length > 0
? html`
<uui-tab-group slot="navigation" id="views">
${this._views.map(
(view) => html`
<uui-tab
.label="${view.meta.label || view.name}"
href="${this._routerPath}/view/${view.meta.pathname}"
?active="${this._activePath === 'view/' + view.meta.pathname}">
<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
${view.meta.label || view.name}
</uui-tab>
`
)}
</uui-tab-group>
`
: '';
}
static styles = [
@@ -184,22 +186,7 @@ export class UmbSectionViewsElement extends UmbLitElement {
height: 100%;
}
#header {
background-color: var(--uui-color-surface);
border-bottom: 1px solid var(--uui-color-divider-standalone);
display: flex;
justify-content: space-between;
align-items: center;
height: var(--umb-header-layout-height);
box-sizing: border-box;
}
#dashboards {
margin: 0 var(--uui-size-layout-1);
}
#views {
justify-content: flex-end;
--uui-tab-divider: var(--uui-color-divider-standalone);
}

1
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
View File

@@ -125,7 +125,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
#header {
display: flex;
flex: 1 1 auto;
margin: 0 var(--uui-size-layout-1);
}
#name {