habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: move SidebarHamburger into PageHeader

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-10 17:30:23 +02:00
parent 6f7fb4c919
commit f6b8dc5cea
7 changed files with 59 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/elements/PageHeader.ts
View File

@ -1,9 +1,10 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { TITLE_SUFFIX } from "../constants";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { EVENT_SIDEBAR_TOGGLE, TITLE_SUFFIX } from "../constants";
@customElement("ak-page-header")
export class PageHeader extends LitElement {
@ -34,7 +35,15 @@ export class PageHeader extends LitElement {
_header = "";
static get styles(): CSSResult[] {
return [PFBase, PFPage, PFContent, AKGlobal];
return [PFBase, PFButton, PFPage, PFContent, AKGlobal, css`
:host {
display: flex;
flex-direction: row;
}
button.sidebar-trigger {
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
}
`];
}
renderIcon(): TemplateResult {
@ -48,14 +57,26 @@ export class PageHeader extends LitElement {
}
render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<button
class="sidebar-trigger pf-c-button pf-m-plain"
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
bubbles: true,
composed: true,
})
);
}}>
<i class="fas fa-bars"></i>
</button>
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>
${this.renderIcon()}
${this.header}
</h1>
${this.description ?
html`<p>${this.description}</p>`: html``}
html`<p>${this.description}</p>` : html``}
</div>
</section>`;
}

4
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -28,8 +28,8 @@ export class SidebarBrand extends LitElement {
display: flex;
flex-direction: column;
align-items: center;
height: 82px;
min-height: 82px;
height: 114px;
min-height: 114px;
}
.pf-c-brand img {
width: 100%;

38
web/src/elements/sidebar/SidebarHamburger.ts
View File

@ -1,38 +0,0 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import AKGlobal from "../../authentik.css";
import { EVENT_SIDEBAR_TOGGLE } from "../../constants";
@customElement("ak-sidebar-hamburger")
export class SidebarHamburger extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal].concat(
css`
:host {
position: absolute;
top: var(--pf-c-page__main-section--PaddingTop);
right: var(--pf-c-page__main-section--PaddingRight);
z-index: 250;
}
`
);
}
onClick(): void {
this.dispatchEvent(
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
bubbles: true,
composed: true,
})
);
}
render(): TemplateResult {
return html`<button @click=${() => (this.onClick())} class="pf-c-button pf-m-plain" type="button">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>`;
}
}