web: add fullHeight toggle to empty state, add dark empty state

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-17 18:49:55 +01:00
parent 5f0192ee48
commit bf32cf3265
3 changed files with 15 additions and 4 deletions

View File

@ -2,6 +2,7 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import AKGlobal from "../authentik.css";
import { SpinnerSize } from "./Spinner";
@ -14,15 +15,18 @@ export class EmptyState extends LitElement {
@property({type: Boolean})
loading = false;
@property({type: Boolean})
fullHeight = false;
@property()
header?: string;
header: string = "";
static get styles(): CSSResult[] {
return [PFBase, PFEmptyState, PFTitle];
return [PFBase, PFEmptyState, PFTitle, AKGlobal];
}
render(): TemplateResult {
return html`<div class="pf-c-empty-state">
return html`<div class="pf-c-empty-state ${this.fullHeight && 'pf-m-full-height'}">
<div class="pf-c-empty-state__content">
${this.loading ?
html`<div class="pf-c-empty-state__icon">