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

web: re-format with prettier

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-08-03 17:52:21 +02:00
parent 77ed25ae34
commit 2c60ec50be
218 changed files with 11696 additions and 8225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../authentik.css";
@ -10,19 +18,18 @@ import { EventsApi } from "../../api/dist";
@customElement("ak-page-header")
export class PageHeader extends LitElement {
@property()
icon?: string;
@property({type: Boolean})
iconImage = false
@property({ type: Boolean })
iconImage = false;
@property({type: Boolean})
@property({ type: Boolean })
hasNotifications = false;
@property()
set header(value: string) {
tenant().then(tenant => {
tenant().then((tenant) => {
if (value !== "") {
document.title = `${value} - ${tenant.brandingTitle}`;
} else {
@ -42,33 +49,40 @@ export class PageHeader extends LitElement {
_header = "";
static get styles(): CSSResult[] {
return [PFBase, PFButton, PFPage, PFContent, AKGlobal, css`
:host {
display: flex;
flex-direction: row;
min-height: 114px;
}
.pf-c-button.pf-m-plain {
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
border-radius: 0px;
}
.pf-c-page__main-section {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
img.pf-icon {
max-height: 24px;
}
.sidebar-trigger,
.notification-trigger {
font-size: 24px;
}
.notification-trigger.has-notifications {
color: #2B9AF3;
}
`];
return [
PFBase,
PFButton,
PFPage,
PFContent,
AKGlobal,
css`
:host {
display: flex;
flex-direction: row;
min-height: 114px;
}
.pf-c-button.pf-m-plain {
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
border-radius: 0px;
}
.pf-c-page__main-section {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
img.pf-icon {
max-height: 24px;
}
.sidebar-trigger,
.notification-trigger {
font-size: 24px;
}
.notification-trigger.has-notifications {
color: #2b9af3;
}
`,
];
}
renderIcon(): TemplateResult {
@ -82,50 +96,51 @@ export class PageHeader extends LitElement {
}
firstUpdated(): void {
new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
seen: false,
ordering: "-created",
pageSize: 1,
}).then(r => {
this.hasNotifications = r.pagination.count > 0;
});
new EventsApi(DEFAULT_CONFIG)
.eventsNotificationsList({
seen: false,
ordering: "-created",
pageSize: 1,
})
.then((r) => {
this.hasNotifications = r.pagination.count > 0;
});
}
render(): TemplateResult {
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``}
</div>
</section>
<button
class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications ? "has-notifications" : ""}"
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
bubbles: true,
composed: true,
})
);
}}>
<i class="fas fa-bell"></i>
</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``}
</div>
</section>
<button
class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications
? "has-notifications"
: ""}"
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
bubbles: true,
composed: true,
}),
);
}}
>
<i class="fas fa-bell"></i>
</button>`;
}
}