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

web/elements: add ak-label for status to replace simple icons

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-09 16:59:45 +02:00
parent 34b8a97ae9
commit c887139367
9 changed files with 207 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/pages/admin-overview/AdminOverviewPage.ts
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import { CSSResult, customElement, html, TemplateResult } from "lit-element";
import "../../elements/charts/AdminLoginsChart";
import "../../elements/cards/AggregatePromiseCard";
@ -20,20 +20,25 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import AKGlobal from "../../authentik.css";
import { Page } from "../../elements/Page";
@customElement("ak-admin-overview")
export class AdminOverviewPage extends LitElement {
export class AdminOverviewPage extends Page {
pageTitle(): string {
return t`System Overview`;
}
pageDescription(): string | undefined {
return;
}
pageIcon(): string {
return "";
}
static get styles(): CSSResult[] {
return [PFGallery, PFPage, PFContent, AKGlobal];
}
render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>${t`System Overview`}</h1>
</div>
</section>
renderContent(): TemplateResult {
return html`
<section class="pf-c-page__main-section">
<div class="pf-l-gallery pf-m-gutter">
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header=${t`Logins over the last 24 hours`} style="grid-column-end: span 3;grid-row-end: span 2;">

2
web/src/pages/admin-overview/cards/AdminStatusCard.ts
View File

@ -34,7 +34,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
this.value = v;
return this.getStatus(v);
}).then((status) => {
return html`<p class="ak-aggregate-card">
return html`<p>
<i class="${status.icon}"></i>&nbsp;${this.renderValue()}
</p>
${status.message ? html`<p class="subtext">${status.message}</p>` : html``}`;