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

web: add sentry, add spinner button as base for action button

Browse Source
This commit is contained in:
Jens Langhammer
2020-11-29 18:10:12 +01:00
parent 2417d5a59e
commit a8dad2e393
13 changed files with 266 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/elements/ActionButton.ts
View File

@ -1,64 +1,13 @@
import { getCookie } from "../utils";
import { css, customElement, html, LitElement, property } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
import {
ColorStyles,
ERROR_CLASS,
PRIMARY_CLASS,
PROGRESS_CLASS,
SUCCESS_CLASS,
} from "../constants";
import { customElement, html, property } from "lit-element";
import { ERROR_CLASS, SUCCESS_CLASS } from "../constants";
import { SpinnerButton } from "./SpinnerButton";
@customElement("pb-action-button")
export class ActionButton extends LitElement {
export class ActionButton extends SpinnerButton {
@property()
url: string = "";
@property()
isRunning = false;
static get styles() {
return [
GlobalsStyle,
ButtonStyle,
SpinnerStyle,
ColorStyles,
css`
button {
/* Have to use !important here, as buttons with pf-m-progress have transition already */
transition: all var(--pf-c-button--m-progress--TransitionDuration) ease 0s !important;
}
`,
];
}
constructor() {
super();
this.classList.add(PRIMARY_CLASS);
}
setLoading() {
this.isRunning = true;
this.classList.add(PROGRESS_CLASS);
this.requestUpdate();
}
setDone(statusClass: string) {
this.isRunning = false;
this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass);
this.requestUpdate();
setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS);
this.requestUpdate();
}, 1000);
}
callAction() {
if (this.isRunning === true) {
return;
@ -80,26 +29,4 @@ export class ActionButton extends LitElement {
this.setDone(ERROR_CLASS);
});
}
render() {
return html`<button
class="pf-c-button pf-m-progress ${this.classList.toString()}"
@click=${() => this.callAction()}
>
${this.isRunning
? html` <span class="pf-c-button__progress">
<span
class="pf-c-spinner pf-m-md"
role="progressbar"
aria-valuetext="Loading..."
>
<span class="pf-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span>
<span class="pf-c-spinner__tail-ball"></span>
</span>
</span>`
: ""}
<slot></slot>
</button>`;
}
}

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

@ -11,6 +11,8 @@ import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
import fa from "@fortawesome/fontawesome-free/css/solid.css";
import { convertToSlug } from "../utils";
import { SpinnerButton } from "./SpinnerButton";
import { PRIMARY_CLASS } from "../constants";
@customElement("pb-modal-button")
export class ModalButton extends LitElement {
@ -119,6 +121,9 @@ export class ModalButton extends LitElement {
this.querySelector("[slot=modal]")!.innerHTML = t;
this.updateHandlers();
this.open = true;
this.querySelectorAll<SpinnerButton>("pb-spinner-button").forEach(sb => {
sb.setDone(PRIMARY_CLASS);
});
})
.catch((e) => {
console.error(e);

84
web/src/elements/SpinnerButton.ts Normal file
View File

@ -0,0 +1,84 @@
import { css, customElement, html, LitElement, property } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
import {
ColorStyles,
PRIMARY_CLASS,
PROGRESS_CLASS,
} from "../constants";
@customElement("pb-spinner-button")
export class SpinnerButton extends LitElement {
@property()
isRunning = false;
static get styles() {
return [
GlobalsStyle,
ButtonStyle,
SpinnerStyle,
ColorStyles,
css`
button {
/* Have to use !important here, as buttons with pf-m-progress have transition already */
transition: all var(--pf-c-button--m-progress--TransitionDuration) ease 0s !important;
}
`,
];
}
constructor() {
super();
this.classList.add(PRIMARY_CLASS);
}
setLoading() {
this.isRunning = true;
this.classList.add(PROGRESS_CLASS);
this.requestUpdate();
}
setDone(statusClass: string) {
this.isRunning = false;
this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass);
this.requestUpdate();
setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS);
this.requestUpdate();
}, 1000);
}
callAction() {
if (this.isRunning === true) {
return;
}
this.setLoading();
}
render() {
return html`<button
class="pf-c-button pf-m-progress ${this.classList.toString()}"
@click=${() => this.callAction()}
>
${this.isRunning
? html` <span class="pf-c-button__progress">
<span
class="pf-c-spinner pf-m-md"
role="progressbar"
aria-valuetext="Loading..."
>
<span class="pf-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span>
<span class="pf-c-spinner__tail-ball"></span>
</span>
</span>`
: ""}
<slot></slot>
</button>`;
}
}