web: re-format with prettier
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -9,7 +9,6 @@ import "./SidebarUser";
|
||||
|
||||
@customElement("ak-sidebar")
|
||||
export class Sidebar extends LitElement {
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||
import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
@ -25,7 +33,7 @@ export const DefaultTenant: CurrentTenant = {
|
||||
|
||||
@customElement("ak-sidebar-brand")
|
||||
export class SidebarBrand extends LitElement {
|
||||
@property({attribute: false})
|
||||
@property({ attribute: false })
|
||||
tenant: CurrentTenant = DefaultTenant;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
@ -45,7 +53,7 @@ export class SidebarBrand extends LitElement {
|
||||
}
|
||||
.pf-c-brand img {
|
||||
width: 100%;
|
||||
padding: 0 .5rem;
|
||||
padding: 0 0.5rem;
|
||||
height: 42px;
|
||||
}
|
||||
button.pf-c-button.sidebar-trigger {
|
||||
@ -67,28 +75,34 @@ export class SidebarBrand extends LitElement {
|
||||
|
||||
firstUpdated(): void {
|
||||
configureSentry(true);
|
||||
tenant().then(tenant => this.tenant = tenant);
|
||||
tenant().then((tenant) => (this.tenant = tenant));
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
${window.innerWidth <= MIN_WIDTH ? html`
|
||||
<button
|
||||
class="sidebar-trigger pf-c-button"
|
||||
@click=${() => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}}>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
` : html``}
|
||||
return html` ${window.innerWidth <= MIN_WIDTH
|
||||
? html`
|
||||
<button
|
||||
class="sidebar-trigger pf-c-button"
|
||||
@click=${() => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
`
|
||||
: html``}
|
||||
<a href="#/" class="pf-c-page__header-brand-link">
|
||||
<div class="pf-c-brand ak-brand">
|
||||
<img src="${ifDefined(this.tenant.brandingLogo)}" alt="authentik icon" loading="lazy" />
|
||||
<img
|
||||
src="${ifDefined(this.tenant.brandingLogo)}"
|
||||
alt="authentik icon"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</a>`;
|
||||
}
|
||||
|
||||
@ -9,7 +9,6 @@ import { ROUTE_SEPARATOR } from "../../constants";
|
||||
|
||||
@customElement("ak-sidebar-item")
|
||||
export class SidebarItem extends LitElement {
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
@ -25,7 +24,7 @@ export class SidebarItem extends LitElement {
|
||||
background-color: var(--ak-accent);
|
||||
margin: 16px;
|
||||
}
|
||||
:host([highlight]) .pf-c-nav__item .pf-c-nav__link {
|
||||
:host([highlight]) .pf-c-nav__item .pf-c-nav__link {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.pf-c-nav__link.pf-m-current::after,
|
||||
@ -92,13 +91,13 @@ export class SidebarItem extends LitElement {
|
||||
|
||||
get childItems(): SidebarItem[] {
|
||||
const children = Array.from(this.querySelectorAll<SidebarItem>("ak-sidebar-item") || []);
|
||||
children.forEach(child => child.parent = this);
|
||||
children.forEach((child) => (child.parent = this));
|
||||
return children;
|
||||
}
|
||||
|
||||
@property({attribute: false})
|
||||
@property({ attribute: false })
|
||||
set activeWhen(regexp: string[]) {
|
||||
regexp.forEach(r => {
|
||||
regexp.forEach((r) => {
|
||||
this.activeMatchers.push(new RegExp(r));
|
||||
});
|
||||
}
|
||||
@ -110,7 +109,7 @@ export class SidebarItem extends LitElement {
|
||||
|
||||
onHashChange(): void {
|
||||
const activePath = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR)[0];
|
||||
this.childItems.forEach(item => {
|
||||
this.childItems.forEach((item) => {
|
||||
this.expandParentRecursive(activePath, item);
|
||||
});
|
||||
this.isActive = this.matchesPath(activePath);
|
||||
@ -125,7 +124,7 @@ export class SidebarItem extends LitElement {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return this.activeMatchers.some(v => {
|
||||
return this.activeMatchers.some((v) => {
|
||||
const match = v.exec(path);
|
||||
if (match !== null) {
|
||||
return true;
|
||||
@ -138,7 +137,7 @@ export class SidebarItem extends LitElement {
|
||||
item.parent.expanded = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
item.childItems.forEach(i => this.expandParentRecursive(activePath, i));
|
||||
item.childItems.forEach((i) => this.expandParentRecursive(activePath, i));
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
@ -153,10 +152,16 @@ export class SidebarItem extends LitElement {
|
||||
}
|
||||
}
|
||||
if (this.childItems.length > 0) {
|
||||
return html`<li class="pf-c-nav__item ${this.expanded ? "pf-m-expandable pf-m-expanded" : ""}">
|
||||
<button class="pf-c-nav__link" aria-expanded="true" @click=${() => {
|
||||
this.expanded = !this.expanded;
|
||||
}}>
|
||||
return html`<li
|
||||
class="pf-c-nav__item ${this.expanded ? "pf-m-expandable pf-m-expanded" : ""}"
|
||||
>
|
||||
<button
|
||||
class="pf-c-nav__link"
|
||||
aria-expanded="true"
|
||||
@click=${() => {
|
||||
this.expanded = !this.expanded;
|
||||
}}
|
||||
>
|
||||
<slot name="label"></slot>
|
||||
<span class="pf-c-nav__toggle">
|
||||
<span class="pf-c-nav__toggle-icon">
|
||||
@ -172,15 +177,20 @@ export class SidebarItem extends LitElement {
|
||||
</li>`;
|
||||
}
|
||||
return html`<li class="pf-c-nav__item">
|
||||
${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>
|
||||
`}
|
||||
${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>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,6 @@ import { ifDefined } from "lit-html/directives/if-defined";
|
||||
|
||||
@customElement("ak-sidebar-user")
|
||||
export class SidebarUser extends LitElement {
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
@ -34,9 +33,16 @@ export class SidebarUser extends LitElement {
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<a href="#/user" class="pf-c-nav__link user-avatar" id="user-settings">
|
||||
${until(me().then((u) => {
|
||||
return html`<img class="pf-c-avatar" src="${ifDefined(u.user.avatar)}" alt="" />`;
|
||||
}), html``)}
|
||||
${until(
|
||||
me().then((u) => {
|
||||
return html`<img
|
||||
class="pf-c-avatar"
|
||||
src="${ifDefined(u.user.avatar)}"
|
||||
alt=""
|
||||
/>`;
|
||||
}),
|
||||
html``,
|
||||
)}
|
||||
</a>
|
||||
<a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
|
||||
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
||||
|
||||
Reference in New Issue
Block a user