From 6533f48912223b140dc6a8c5fc63f51c4ca0fbfc Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 21 Aug 2021 19:26:06 +0200
Subject: [PATCH] web: add topMost attribute to ak-loading-overlay to force it
 over codemirror

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/LoadingOverlay.ts  | 16 +++++++++++++++-
 web/src/elements/forms/ModalForm.ts |  4 +++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/src/elements/LoadingOverlay.ts b/web/src/elements/LoadingOverlay.ts
index fcd6bdbf9..b757e8ca7 100644
--- a/web/src/elements/LoadingOverlay.ts
+++ b/web/src/elements/LoadingOverlay.ts
@@ -1,9 +1,20 @@
-import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import {
+    css,
+    CSSResult,
+    customElement,
+    html,
+    LitElement,
+    property,
+    TemplateResult,
+} from "lit-element";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import { PFSize } from "./Spinner";
 
 @customElement("ak-loading-overlay")
 export class LoadingOverlay extends LitElement {
+    @property({ type: Boolean })
+    topMost = false;
+
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -18,6 +29,9 @@ export class LoadingOverlay extends LitElement {
                     background-color: var(--pf-global--BackgroundColor--dark-transparent-100);
                     z-index: 1;
                 }
+                :host([topMost]) {
+                    z-index: 999;
+                }
             `,
         ];
     }
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index 04e0621a9..9809287e4 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -46,7 +46,9 @@ export class ModalForm extends ModalButton {
     }
 
     renderModalInner(): TemplateResult {
-        return html`${this.loading ? html`<ak-loading-overlay></ak-loading-overlay>` : html``}
+        return html`${this.loading
+                ? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
+                : html``}
             <section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">