web: improve display of action buttons with non-primary classes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-09-19 15:57:12 +02:00
parent ed6f5b98df
commit 3f42067a8f
7 changed files with 11 additions and 14 deletions

View File

@ -12,7 +12,7 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
import AKGlobal from "../../authentik.css";
import { PFSize } from "../Spinner";
import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
@customElement("ak-spinner-button")
export class SpinnerButton extends LitElement {
@ -39,7 +39,6 @@ export class SpinnerButton extends LitElement {
constructor() {
super();
this.classList.add(PRIMARY_CLASS);
}
setLoading(): void {
@ -51,10 +50,10 @@ export class SpinnerButton extends LitElement {
setDone(statusClass: string): void {
this.isRunning = false;
this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass);
this.classList.add(statusClass);
this.requestUpdate();
setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS);
this.classList.remove(statusClass);
this.requestUpdate();
}, 1000);
}

View File

@ -1,6 +1,6 @@
import { customElement, property } from "lit-element";
import { CoreApi } from "@goauthentik/api";
import { PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
import { SECONDARY_CLASS, SUCCESS_CLASS } from "../../constants";
import { DEFAULT_CONFIG } from "../../api/Config";
import { ActionButton } from "./ActionButton";
@ -10,7 +10,7 @@ export class TokenCopyButton extends ActionButton {
identifier?: string;
@property()
buttonClass: string = PRIMARY_CLASS;
buttonClass: string = SECONDARY_CLASS;
apiRequest: () => Promise<unknown> = () => {
this.setLoading();
@ -28,7 +28,7 @@ export class TokenCopyButton extends ActionButton {
return navigator.clipboard.writeText(token.key).then(() => {
this.buttonClass = SUCCESS_CLASS;
setTimeout(() => {
this.buttonClass = PRIMARY_CLASS;
this.buttonClass = SECONDARY_CLASS;
}, 1500);
});
})