web: add topMost attribute to ak-loading-overlay to force it over codemirror

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-21 19:26:06 +02:00
parent 2024dac39a
commit 6533f48912
2 changed files with 18 additions and 2 deletions

View File

@ -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 PFBase from "@patternfly/patternfly/patternfly-base.css";
import { PFSize } from "./Spinner"; import { PFSize } from "./Spinner";
@customElement("ak-loading-overlay") @customElement("ak-loading-overlay")
export class LoadingOverlay extends LitElement { export class LoadingOverlay extends LitElement {
@property({ type: Boolean })
topMost = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
PFBase, PFBase,
@ -18,6 +29,9 @@ export class LoadingOverlay extends LitElement {
background-color: var(--pf-global--BackgroundColor--dark-transparent-100); background-color: var(--pf-global--BackgroundColor--dark-transparent-100);
z-index: 1; z-index: 1;
} }
:host([topMost]) {
z-index: 999;
}
`, `,
]; ];
} }

View File

@ -46,7 +46,9 @@ export class ModalForm extends ModalButton {
} }
renderModalInner(): TemplateResult { 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"> <section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-c-title pf-m-2xl">