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

more clean up of header-sections

Browse Source
This commit is contained in:
Niels Lyngsø
2023-11-30 11:16:33 +01:00
parent 2ee56d9b43
commit 43ccb1da91
1 changed files with 18 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts
View File

@@ -1,15 +1,12 @@
import { UMB_BACKOFFICE_CONTEXT_TOKEN } from '../backoffice.context.js';
import type { UmbBackofficeContext } from '../backoffice.context.js';
import { css, CSSResultGroup, html, when, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { css, CSSResultGroup, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import type { ManifestSection } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
@customElement('umb-backoffice-header-sections')
export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
@state()
private _open = false;
@state()
private _sections: Array<UmbExtensionManifestInitializer<ManifestSection>> = [];
@@ -28,37 +25,33 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
});
}
private _handleMore(e: MouseEvent) {
e.stopPropagation();
this._open = !this._open;
}
private _handleLabelClick() {
const moreTab = this.shadowRoot?.getElementById('moreTab');
moreTab?.setAttribute('active', 'true');
this._open = false;
}
private _observeSections() {
if (!this._backofficeContext) return;
this.observe(this._backofficeContext.allowedSections, (allowedSections) => {
const oldValue = this._sections;
this._sections = allowedSections;
this.requestUpdate('_sections', oldValue);
});
this.observe(
this._backofficeContext.allowedSections,
(allowedSections) => {
const oldValue = this._sections;
this._sections = allowedSections;
this.requestUpdate('_sections', oldValue);
},
'observeSections',
);
}
private _observeCurrentSection() {
if (!this._backofficeContext) return;
this.observe(this._backofficeContext.activeSectionAlias, (currentSectionAlias) => {
this._currentSectionAlias = currentSectionAlias || '';
});
this.observe(
this._backofficeContext.activeSectionAlias,
(currentSectionAlias) => {
this._currentSectionAlias = currentSectionAlias || '';
},
'observeCurrentSection',
);
}
private _renderSections() {
render() {
return html`
<uui-tab-group id="tabs">
${repeat(
@@ -75,10 +68,6 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
`;
}
render() {
return html` ${this._renderSections()} `;
}
static styles: CSSResultGroup = [
css`
#tabs {
@@ -90,17 +79,6 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);
--uui-tab-background: var(--uui-color-header-background);
}
#dropdown {
background-color: white;
border-radius: var(--uui-border-radius);
width: 100%;
height: 100%;
box-sizing: border-box;
box-shadow: var(--uui-shadow-depth-3);
min-width: 200px;
color: black; /* Change to variable */
}
`,
];
}