trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests 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
Show stats 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 PFTitle from "@patternfly/patternfly/components/Title/title.css";
import AKGlobal from "../authentik.css"; import AKGlobal from "../authentik.css";
import { SpinnerSize } from "./Spinner"; import { PFSize } from "./Spinner";
@customElement("ak-empty-state") @customElement("ak-empty-state")
export class EmptyState extends LitElement { export class EmptyState extends LitElement {
@ -30,7 +30,7 @@ export class EmptyState extends LitElement {
<div class="pf-c-empty-state__content"> <div class="pf-c-empty-state__content">
${this.loading ? ${this.loading ?
html`<div class="pf-c-empty-state__icon"> html`<div class="pf-c-empty-state__icon">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner> <ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>`: </div>`:
html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`} 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"> <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 { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css"; import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
export enum SpinnerSize { export enum PFSize {
Small = "pf-m-sm", Small = "pf-m-sm",
Medium = "pf-m-md", Medium = "pf-m-md",
Large = "pf-m-lg", Large = "pf-m-lg",
@ -12,7 +12,7 @@ export enum SpinnerSize {
@customElement("ak-spinner") @customElement("ak-spinner")
export class Spinner extends LitElement { export class Spinner extends LitElement {
@property() @property()
size: SpinnerSize = SpinnerSize.Medium; size: PFSize = PFSize.Medium;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFSpinner]; 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 PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css"; import AKGlobal from "../../authentik.css";
import { PFSize } from "../Spinner";
@customElement("ak-modal-button") @customElement("ak-modal-button")
export class ModalButton extends LitElement { export class ModalButton extends LitElement {
@property() @property()
href?: string; size: PFSize = PFSize.Large;
@property({type: Boolean}) @property({type: Boolean})
open = false; open = false;
@ -78,7 +79,7 @@ export class ModalButton extends LitElement {
return html`<div class="pf-c-backdrop"> return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye"> <div class="pf-l-bullseye">
<div <div
class="pf-c-modal-box pf-m-lg" class="pf-c-modal-box ${this.size}"
role="dialog" role="dialog"
aria-modal="true" 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 PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css"; import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
import AKGlobal from "../../authentik.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"; import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
@customElement("ak-spinner-button") @customElement("ak-spinner-button")
@ -69,7 +69,7 @@ export class SpinnerButton extends LitElement {
}}> }}>
${this.isRunning ${this.isRunning
? html` <span class="pf-c-button__progress"> ? html` <span class="pf-c-button__progress">
<ak-spinner size=${SpinnerSize.Medium}></ak-spinner> <ak-spinner size=${PFSize.Medium}></ak-spinner>
</span>` </span>`
: ""} : ""}
<slot></slot> <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 { until } from "lit-html/directives/until";
import { AggregateCard } from "./AggregateCard"; import { AggregateCard } from "./AggregateCard";
import "../Spinner"; import "../Spinner";
import { SpinnerSize } from "../Spinner"; import { PFSize } from "../Spinner";
@customElement("ak-aggregate-card-promise") @customElement("ak-aggregate-card-promise")
export class AggregatePromiseCard extends AggregateCard { export class AggregatePromiseCard extends AggregateCard {
@ -20,7 +20,7 @@ export class AggregatePromiseCard extends AggregateCard {
renderInner(): TemplateResult { renderInner(): TemplateResult {
return html`<p class="center-value"> 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>`; </p>`;
} }

4
web/src/flows/FlowExecutor.ts
View file

@ -40,7 +40,7 @@ import { DEFAULT_CONFIG } from "../api/Config";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { AccessDeniedChallenge } from "./access_denied/FlowAccessDenied"; import { AccessDeniedChallenge } from "./access_denied/FlowAccessDenied";
import { SpinnerSize } from "../elements/Spinner"; import { PFSize } from "../elements/Spinner";
import { TITLE_SUFFIX } from "../constants"; import { TITLE_SUFFIX } from "../constants";
@customElement("ak-flow-executor") @customElement("ak-flow-executor")
@ -164,7 +164,7 @@ export class FlowExecutor extends LitElement implements StageHost {
renderLoading(): TemplateResult { renderLoading(): TemplateResult {
return html`<div class="ak-loading"> return html`<div class="ak-loading">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner> <ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>`; </div>`;
} }

4
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
View file

@ -7,7 +7,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css"; import AKGlobal from "../../../authentik.css";
import { SpinnerSize } from "../../../elements/Spinner"; import { PFSize } from "../../../elements/Spinner";
import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils"; import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage"; import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
@ -91,7 +91,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
html`<div class="pf-c-empty-state__content"> html`<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye"> <div class="pf-l-bullseye">
<div class="pf-l-bullseye__item"> <div class="pf-l-bullseye__item">
<ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner> <ak-spinner size="${PFSize.XLarge}"></ak-spinner>
</div> </div>
</div> </div>
</div>`: </div>`:

4
web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
View file

@ -8,7 +8,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css"; import AKGlobal from "../../../authentik.css";
import { SpinnerSize } from "../../../elements/Spinner"; import { PFSize } from "../../../elements/Spinner";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils"; import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
@ -100,7 +100,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
html`<div class="pf-c-empty-state__content"> html`<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye"> <div class="pf-l-bullseye">
<div class="pf-l-bullseye__item"> <div class="pf-l-bullseye__item">
<ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner> <ak-spinner size="${PFSize.XLarge}"></ak-spinner>
</div> </div>
</div> </div>
</div>`: </div>`:

4
web/src/flows/stages/captcha/CaptchaStage.ts
View file

@ -8,7 +8,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css"; import AKGlobal from "../../../authentik.css";
import { SpinnerSize } from "../../../elements/Spinner"; import { PFSize } from "../../../elements/Spinner";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
@ -83,7 +83,7 @@ export class CaptchaStage extends BaseStage {
</div> </div>
</ak-form-static> </ak-form-static>
<div class="ak-loading"> <div class="ak-loading">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner> <ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div> </div>
</form> </form>
</div> </div>

4
web/src/pages/admin-overview/cards/AdminStatusCard.ts
View file

@ -2,7 +2,7 @@ import { html, TemplateResult } from "lit-html";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { EVENT_REFRESH } from "../../../constants"; import { EVENT_REFRESH } from "../../../constants";
import { AggregateCard } from "../../../elements/cards/AggregateCard"; import { AggregateCard } from "../../../elements/cards/AggregateCard";
import { SpinnerSize } from "../../../elements/Spinner"; import { PFSize } from "../../../elements/Spinner";
export interface AdminStatus { export interface AdminStatus {
icon: string; icon: string;
@ -38,7 +38,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
<i class="${status.icon}"></i>&nbsp;${this.renderValue()} <i class="${status.icon}"></i>&nbsp;${this.renderValue()}
</p> </p>
${status.message ? html`<p class="subtext">${status.message}</p>` : html``}`; ${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>`; </p>`;
} }
} }

6
web/src/pages/events/EventInfo.ts
View file

@ -4,7 +4,7 @@ import { until } from "lit-html/directives/until";
import { FlowsApi } from "authentik-api"; import { FlowsApi } from "authentik-api";
import "../../elements/Spinner"; import "../../elements/Spinner";
import "../../elements/Expand"; import "../../elements/Expand";
import { SpinnerSize } from "../../elements/Spinner"; import { PFSize } from "../../elements/Spinner";
import { EventContext, EventWithContext } from "../../api/Events"; import { EventContext, EventWithContext } from "../../api/Events";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
@ -91,7 +91,7 @@ export class EventInfo extends LitElement {
render(): TemplateResult { render(): TemplateResult {
if (!this.event) { 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) { switch (this.event?.action) {
case "model_created": case "model_created":
@ -113,7 +113,7 @@ export class EventInfo extends LitElement {
flowUuid: this.event.context.flow as string, flowUuid: this.event.context.flow as string,
}).then(resp => { }).then(resp => {
return html`<a href="#/flow/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`; 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> </span>
</div> </div>
</div> </div>