web: SpinnerSize -> PFSize, add size prop for modal button
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
a66b832154
commit
e06d729fe5
|
@ -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">
|
||||
|
|
|
@ -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];
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
|
|
|
@ -40,7 +40,7 @@ import { DEFAULT_CONFIG } from "../api/Config";
|
|||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import { until } from "lit-html/directives/until";
|
||||
import { AccessDeniedChallenge } from "./access_denied/FlowAccessDenied";
|
||||
import { SpinnerSize } from "../elements/Spinner";
|
||||
import { PFSize } from "../elements/Spinner";
|
||||
import { TITLE_SUFFIX } from "../constants";
|
||||
|
||||
@customElement("ak-flow-executor")
|
||||
|
@ -164,7 +164,7 @@ export class FlowExecutor extends LitElement implements StageHost {
|
|||
|
||||
renderLoading(): TemplateResult {
|
||||
return html`<div class="ak-loading">
|
||||
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
|
||||
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
|
|||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import AKGlobal from "../../../authentik.css";
|
||||
import { SpinnerSize } from "../../../elements/Spinner";
|
||||
import { PFSize } from "../../../elements/Spinner";
|
||||
import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
|
||||
import { BaseStage } from "../base";
|
||||
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
|
||||
|
@ -91,7 +91,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
|
|||
html`<div class="pf-c-empty-state__content">
|
||||
<div class="pf-l-bullseye">
|
||||
<div class="pf-l-bullseye__item">
|
||||
<ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
|
||||
<ak-spinner size="${PFSize.XLarge}"></ak-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</div>`:
|
||||
|
|
|
@ -8,7 +8,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
|
|||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import AKGlobal from "../../../authentik.css";
|
||||
import { SpinnerSize } from "../../../elements/Spinner";
|
||||
import { PFSize } from "../../../elements/Spinner";
|
||||
import { BaseStage } from "../base";
|
||||
import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
|
||||
|
||||
|
@ -100,7 +100,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
|
|||
html`<div class="pf-c-empty-state__content">
|
||||
<div class="pf-l-bullseye">
|
||||
<div class="pf-l-bullseye__item">
|
||||
<ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
|
||||
<ak-spinner size="${PFSize.XLarge}"></ak-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</div>`:
|
||||
|
|
|
@ -8,7 +8,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
|
|||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import AKGlobal from "../../../authentik.css";
|
||||
import { SpinnerSize } from "../../../elements/Spinner";
|
||||
import { PFSize } from "../../../elements/Spinner";
|
||||
import { BaseStage } from "../base";
|
||||
import "../../../elements/forms/FormElement";
|
||||
import "../../../elements/EmptyState";
|
||||
|
@ -83,7 +83,7 @@ export class CaptchaStage extends BaseStage {
|
|||
</div>
|
||||
</ak-form-static>
|
||||
<div class="ak-loading">
|
||||
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
|
||||
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@ import { html, TemplateResult } from "lit-html";
|
|||
import { until } from "lit-html/directives/until";
|
||||
import { EVENT_REFRESH } from "../../../constants";
|
||||
import { AggregateCard } from "../../../elements/cards/AggregateCard";
|
||||
import { SpinnerSize } from "../../../elements/Spinner";
|
||||
import { PFSize } from "../../../elements/Spinner";
|
||||
|
||||
export interface AdminStatus {
|
||||
icon: string;
|
||||
|
@ -38,7 +38,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
|
|||
<i class="${status.icon}"></i> ${this.renderValue()}
|
||||
</p>
|
||||
${status.message ? html`<p class="subtext">${status.message}</p>` : html``}`;
|
||||
}), html`<ak-spinner size="${SpinnerSize.Large}"></ak-spinner>`)}
|
||||
}), html`<ak-spinner size="${PFSize.Large}"></ak-spinner>`)}
|
||||
</p>`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@ import { until } from "lit-html/directives/until";
|
|||
import { FlowsApi } from "authentik-api";
|
||||
import "../../elements/Spinner";
|
||||
import "../../elements/Expand";
|
||||
import { SpinnerSize } from "../../elements/Spinner";
|
||||
import { PFSize } from "../../elements/Spinner";
|
||||
import { EventContext, EventWithContext } from "../../api/Events";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
|
||||
|
@ -91,7 +91,7 @@ export class EventInfo extends LitElement {
|
|||
|
||||
render(): TemplateResult {
|
||||
if (!this.event) {
|
||||
return html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`;
|
||||
return html`<ak-spinner size=${PFSize.Medium}></ak-spinner>`;
|
||||
}
|
||||
switch (this.event?.action) {
|
||||
case "model_created":
|
||||
|
@ -113,7 +113,7 @@ export class EventInfo extends LitElement {
|
|||
flowUuid: this.event.context.flow as string,
|
||||
}).then(resp => {
|
||||
return html`<a href="#/flow/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
|
||||
}), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}
|
||||
}), html`<ak-spinner size=${PFSize.Medium}></ak-spinner>`)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Reference in New Issue