feat(status): add modal status message option that can be closed back to a normal status message

src/datasource/middleauth/credentials_provider.ts

@@ -52,7 +52,7 @@ function openPopupCenter(url: string, width: number, height: number) {
 }
 
 async function waitForLogin(serverUrl: string): Promise<MiddleAuthToken> {
-  const status = new StatusMessage(/*delay=*/ false);
+  const status = new StatusMessage(/*delay=*/ false, /*modal=*/ true);
 
   const res: Promise<MiddleAuthToken> = new Promise((f) => {
     function writeLoginStatus(message: string, buttonMessage: string) {

src/status.css

@@ -38,3 +38,41 @@
   background-color: #333;
   padding: 2px;
 }
+
+#statusContainerModal {
+  pointer-events: none;
+  position: absolute;
+  z-index: 100;
+  color: white;
+  margin: 0px;
+  padding: 0px;
+  font: 10pt sans-serif;
+
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  height: 100vh;
+  width: 80vw;
+  left: 10vw;
+  grid-row-gap: 10px;
+}
+
+#statusContainerModal > div {
+  pointer-events: initial;
+  position: relative;
+  background-color: #808080;
+  padding: 20px;
+  padding-top: 30px;
+}
+
+#statusContainerModal > div > div:first-child {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  margin: 0;
+  padding: 0;
+}
+
+#statusContainerModal li {
+  display: block;
+}

src/status.ts

@@ -16,16 +16,20 @@
 
 import "#src/status.css";
 
+import { makeCloseButton } from "#src/widget/close_button.js";
+
 let statusContainer: HTMLElement | null = null;
+let modalStatusContainer: HTMLElement | null = null;
 
 export const DEFAULT_STATUS_DELAY = 200;
 
 export type Delay = boolean | number;
 
 export class StatusMessage {
   element: HTMLElement;
+  modalElementWrapper: HTMLElement | undefined;
   private timer: number | null;
-  constructor(delay: Delay = false) {
+  constructor(delay: Delay = false, modal = false) {
     if (statusContainer === null) {
       statusContainer = document.createElement("ul");
       statusContainer.id = "statusContainer";
@@ -38,6 +42,18 @@ export class StatusMessage {
         document.body.appendChild(statusContainer);
       }
     }
+    if (modal && modalStatusContainer === null) {
+      modalStatusContainer = document.createElement("ul");
+      modalStatusContainer.id = "statusContainerModal";
+      const el: HTMLElement | null = document.getElementById(
+        "neuroglancer-container",
+      );
+      if (el) {
+        el.appendChild(modalStatusContainer);
+      } else {
+        document.body.appendChild(modalStatusContainer);
+      }
+    }
     const element = document.createElement("li");
     this.element = element;
     if (delay === true) {
@@ -49,15 +65,42 @@ export class StatusMessage {
     } else {
       this.timer = null;
     }
-    statusContainer.appendChild(element);
+    if (modal) {
+      const modalElementWrapper = document.createElement("div");
+      const dismissModalElement = makeCloseButton({
+        title: "Dismiss",
+        onClick: () => {
+          this.dismissModal();
+        },
+      });
+      dismissModalElement.classList.add("dismiss-modal");
+      dismissModalElement.addEventListener("click", () => this.dismissModal());
+      modalElementWrapper.appendChild(dismissModalElement);
+      modalElementWrapper.appendChild(element);
+      this.modalElementWrapper = modalElementWrapper;
+      modalStatusContainer!.appendChild(modalElementWrapper);
+    } else {
+      statusContainer.appendChild(element);
+    }
   }
   dispose() {
-    statusContainer!.removeChild(this.element);
+    if (this.modalElementWrapper) {
+      modalStatusContainer!.removeChild(this.modalElementWrapper);
+    } else {
+      statusContainer!.removeChild(this.element);
+    }
     this.element = <any>undefined;
     if (this.timer !== null) {
       clearTimeout(this.timer);
     }
   }
+  dismissModal() {
+    if (this.modalElementWrapper) {
+      modalStatusContainer!.removeChild(this.modalElementWrapper);
+      this.modalElementWrapper = undefined;
+      statusContainer!.appendChild(this.element);
+    }
+  }
   setText(text: string, makeVisible?: boolean) {
     this.element.textContent = text;
     if (makeVisible) {