static: fix ActionButton not working

This commit is contained in:
Jens Langhammer 2020-11-22 13:43:24 +01:00
parent 372e51ee07
commit eb9df38e92
2 changed files with 21 additions and 10 deletions

View File

@ -25,5 +25,8 @@ export default [
minifyHTML(), minifyHTML(),
terser(), terser(),
], ],
watch: {
clearScreen: false,
},
}, },
]; ];

View File

@ -1,39 +1,47 @@
import { getCookie } from "../utils"; import { getCookie } from "../utils";
import { updateMessages } from "./Messages"; import { updateMessages } from "./Messages";
import { customElement, html, LitElement, property } from "lit-element"; import { 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";
const PRIMARY_CLASS = "pf-m-primary"; const PRIMARY_CLASS = "pf-m-primary";
const SUCCESS_CLASS = "pf-m-success"; const SUCCESS_CLASS = "pf-m-success";
const ERROR_CLASS = "pf-m-danger"; const ERROR_CLASS = "pf-m-danger";
const PROGRESS_CLASSES = ["pf-m-progress", "pf-m-in-progress"]; const PROGRESS_CLASS ="pf-m-in-progress";
@customElement("pb-action-button") @customElement("pb-action-button")
export class ActionButton extends LitElement { export class ActionButton extends LitElement {
constructor() {
super();
this.querySelector("button")?.addEventListener("click", (e) =>
this.callAction()
);
}
@property() @property()
url: string = ""; url: string = "";
@property()
isRunning = false; isRunning = false;
static get styles() {
return [GlobalsStyle, ButtonStyle, SpinnerStyle]
}
setLoading() { setLoading() {
this.isRunning = true; this.isRunning = true;
this.classList.add(...PROGRESS_CLASSES); this.classList.add(PROGRESS_CLASS);
this.requestUpdate();
} }
setDone(statusClass: string) { setDone(statusClass: string) {
this.isRunning = false; this.isRunning = false;
this.classList.remove(...PROGRESS_CLASSES); this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass); this.classList.replace(PRIMARY_CLASS, statusClass);
this.requestUpdate();
// Trigger messages to update // Trigger messages to update
updateMessages(); updateMessages();
setTimeout(() => { setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS); this.classList.replace(statusClass, PRIMARY_CLASS);
this.requestUpdate();
}, 1000); }, 1000);
} }
@ -60,7 +68,7 @@ export class ActionButton extends LitElement {
} }
render() { render() {
return html`<button class="pf-c-button pf-m-primary"> return html`<button class="pf-c-button pf-m-progress ${this.classList}" @click=${() => this.callAction()}>
${this.isRunning ${this.isRunning
? html` <span class="pf-c-button__progress"> ? html` <span class="pf-c-button__progress">
<span <span