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

web: SpinnerSize -> PFSize, add size prop for modal button

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-04 22:04:46 +02:00
parent a66b832154
commit e06d729fe5
11 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/elements/EmptyState.ts
View File

@ -4,7 +4,7 @@ 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";
import { PFSize } from "./Spinner";
@customElement("ak-empty-state")
export class EmptyState extends LitElement {
@ -30,7 +30,7 @@ export class EmptyState extends LitElement {
<div class="pf-c-empty-state__content">
${this.loading ?
html`<div class="pf-c-empty-state__icon">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>`:
html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`}
<h1 class="pf-c-title pf-m-lg">

4
web/src/elements/Spinner.ts
View File

@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
export enum SpinnerSize {
export enum PFSize {
Small = "pf-m-sm",
Medium = "pf-m-md",
Large = "pf-m-lg",
@ -12,7 +12,7 @@ export enum SpinnerSize {
@customElement("ak-spinner")
export class Spinner extends LitElement {
@property()
size: SpinnerSize = SpinnerSize.Medium;
size: PFSize = PFSize.Medium;
static get styles(): CSSResult[] {
return [PFSpinner];

5
web/src/elements/buttons/ModalButton.ts
View File

@ -12,11 +12,12 @@ import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css";
import { PFSize } from "../Spinner";
@customElement("ak-modal-button")
export class ModalButton extends LitElement {
@property()
href?: string;
size: PFSize = PFSize.Large;
@property({type: Boolean})
open = false;
@ -78,7 +79,7 @@ export class ModalButton extends LitElement {
return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div
class="pf-c-modal-box pf-m-lg"
class="pf-c-modal-box ${this.size}"
role="dialog"
aria-modal="true"
>

4
web/src/elements/buttons/SpinnerButton.ts
View File

@ -3,7 +3,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
import AKGlobal from "../../authentik.css";
import { SpinnerSize } from "../Spinner";
import { PFSize } from "../Spinner";
import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
@customElement("ak-spinner-button")
@ -69,7 +69,7 @@ export class SpinnerButton extends LitElement {
}}>
${this.isRunning
? html` <span class="pf-c-button__progress">
<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>
<ak-spinner size=${PFSize.Medium}></ak-spinner>
</span>`
: ""}
<slot></slot>

4
web/src/elements/cards/AggregatePromiseCard.ts
View File

@ -2,7 +2,7 @@ import { customElement, html, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until";
import { AggregateCard } from "./AggregateCard";
import "../Spinner";
import { SpinnerSize } from "../Spinner";
import { PFSize } from "../Spinner";
@customElement("ak-aggregate-card-promise")
export class AggregatePromiseCard extends AggregateCard {
@ -20,7 +20,7 @@ export class AggregatePromiseCard extends AggregateCard {
renderInner(): TemplateResult {
return html`<p class="center-value">
${until(this.promiseProxy(), html`<ak-spinner size="${SpinnerSize.Large}"></ak-spinner>`)}
${until(this.promiseProxy(), html`<ak-spinner size="${PFSize.Large}"></ak-spinner>`)}
</p>`;
}