web: lock overflow when showing loading overlay on modals

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-21 19:19:23 +02:00
parent 33d5cd2973
commit 2024dac39a
2 changed files with 16 additions and 1 deletions

View file

@ -46,6 +46,9 @@ export class ModalButton extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
open = false; open = false;
@property({ type: Boolean })
locked = false;
handlerBound = false; handlerBound = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
@ -63,6 +66,11 @@ export class ModalButton extends LitElement {
PFContent, PFContent,
AKGlobal, AKGlobal,
MODAL_BUTTON_STYLES, MODAL_BUTTON_STYLES,
css`
.locked {
overflow-y: hidden !important;
}
`,
]; ];
} }
@ -108,7 +116,11 @@ export class ModalButton extends LitElement {
renderModal(): TemplateResult { renderModal(): TemplateResult {
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 class="pf-c-modal-box ${this.size}" role="dialog" aria-modal="true"> <div
class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
role="dialog"
aria-modal="true"
>
<button <button
@click=${() => (this.open = false)} @click=${() => (this.open = false)}
class="pf-c-button pf-m-plain" class="pf-c-button pf-m-plain"

View file

@ -30,6 +30,7 @@ export class ModalForm extends ModalButton {
form?.resetForm(); form?.resetForm();
} }
this.loading = false; this.loading = false;
this.locked = false;
this.dispatchEvent( this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, { new CustomEvent(EVENT_REFRESH, {
bubbles: true, bubbles: true,
@ -39,6 +40,7 @@ export class ModalForm extends ModalButton {
}) })
.catch((exc) => { .catch((exc) => {
this.loading = false; this.loading = false;
this.locked = false;
throw exc; throw exc;
}); });
} }
@ -59,6 +61,7 @@ export class ModalForm extends ModalButton {
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
this.loading = true; this.loading = true;
this.locked = true;
return this.confirm(); return this.confirm();
}} }}
class="pf-m-primary" class="pf-m-primary"