trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: lock overflow when showing loading overlay on modals

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/elements/buttons/ModalButton.ts
View file

@ -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"

3
web/src/elements/forms/ModalForm.ts
View file

@ -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"