From 2024dac39a9ecbf84b30b7a73ac5db6e38ec5420 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 21 Aug 2021 19:19:23 +0200
Subject: [PATCH] web: lock overflow when showing loading overlay on modals

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/buttons/ModalButton.ts | 14 +++++++++++++-
 web/src/elements/forms/ModalForm.ts     |  3 +++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 645538bfc..a8bd42f39 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -46,6 +46,9 @@ export class ModalButton extends LitElement {
     @property({ type: Boolean })
     open = false;
 
+    @property({ type: Boolean })
+    locked = false;
+
     handlerBound = false;
 
     static get styles(): CSSResult[] {
@@ -63,6 +66,11 @@ export class ModalButton extends LitElement {
             PFContent,
             AKGlobal,
             MODAL_BUTTON_STYLES,
+            css`
+                .locked {
+                    overflow-y: hidden !important;
+                }
+            `,
         ];
     }
 
@@ -108,7 +116,11 @@ export class ModalButton extends LitElement {
     renderModal(): TemplateResult {
         return html`<div class="pf-c-backdrop">
             <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
                         @click=${() => (this.open = false)}
                         class="pf-c-button pf-m-plain"
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index eb7891e3d..04e0621a9 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -30,6 +30,7 @@ export class ModalForm extends ModalButton {
                     form?.resetForm();
                 }
                 this.loading = false;
+                this.locked = false;
                 this.dispatchEvent(
                     new CustomEvent(EVENT_REFRESH, {
                         bubbles: true,
@@ -39,6 +40,7 @@ export class ModalForm extends ModalButton {
             })
             .catch((exc) => {
                 this.loading = false;
+                this.locked = false;
                 throw exc;
             });
     }
@@ -59,6 +61,7 @@ export class ModalForm extends ModalButton {
                 <ak-spinner-button
                     .callAction=${() => {
                         this.loading = true;
+                        this.locked = true;
                         return this.confirm();
                     }}
                     class="pf-m-primary"