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

web: migrate banner to sidebar

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-06-13 22:55:41 +02:00
parent 09cd8f8f63
commit 31fc4d1cb9
7 changed files with 44 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/elements/Banner.ts
View File

@ -1,27 +0,0 @@
import { customElement, CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import AKGlobal from "../authentik.css";
@customElement("ak-banner")
export class Banner extends LitElement {
@property()
level = "pf-m-warning";
static get styles(): CSSResult[] {
return [PFBase, PFBanner, PFFlex, AKGlobal];
}
render(): TemplateResult {
return html`<div class="pf-c-banner ${this.level} pf-m-sticky">
<div class="pf-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap" style="height: 100%;">
<div class="pf-u-display-none pf-u-display-block-on-lg">
<slot></slot>
</div>
</div>
</div>`;
}
}

1
web/src/elements/sidebar/Sidebar.ts
View File

@ -19,7 +19,6 @@ export class Sidebar extends LitElement {
css`
:host {
z-index: 100;
box-shadow: none !important;
}
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current:hover::after,

25
web/src/elements/sidebar/SidebarItem.ts
View File

@ -21,6 +21,13 @@ export class SidebarItem extends LitElement {
z-index: 100;
box-shadow: none !important;
}
:host([highlight]) .pf-c-nav__item {
background-color: var(--ak-accent);
margin: 16px;
}
:host([highlight]) .pf-c-nav__item .pf-c-nav__link {
padding-left: 0.5rem;
}
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current:hover::after,
.pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
@ -75,6 +82,12 @@ export class SidebarItem extends LitElement {
@property({ type: Boolean })
isActive = false;
@property({ type: Boolean })
isAbsoluteLink?: boolean;
@property({ type: Boolean })
highlight?: boolean;
parent?: SidebarItem;
get childItems(): SidebarItem[] {
@ -159,9 +172,15 @@ export class SidebarItem extends LitElement {
</li>`;
}
return html`<li class="pf-c-nav__item">
<a href="#${this.path}" class="pf-c-nav__link ${this.isActive ? "pf-m-current" : ""}">
<slot name="label"></slot>
</a>
${this.path ? html`
<a href="${this.isAbsoluteLink ? '' : '#'}${this.path}" class="pf-c-nav__link ${this.isActive ? "pf-m-current" : ""}">
<slot name="label"></slot>
</a>
` : html`
<span class="pf-c-nav__link">
<slot name="label"></slot>
</span>
`}
</li>`;
}
}