feat(status): add modal status message option that can be closed back…

… to a normal status message
seung-lab · Jul 17, 2024 · dbbc243 · dbbc243
1 parent 4489919
commit dbbc243
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 4 deletions.
diff --git a/src/datasource/middleauth/credentials_provider.ts b/src/datasource/middleauth/credentials_provider.ts
@@ -60,7 +60,7 @@ async function waitForRemoteFlow(
   retryMessage: string,
   closedMessage: string,
 ): Promise<any> {
-  const status = new StatusMessage(/*delay=*/ false);
+  const status = new StatusMessage(/*delay=*/ false, /*modal=*/ true);
   const res: Promise<MiddleAuthToken> = new Promise((f) => {
     function writeStatus(message: string, buttonMessage: string) {
       status.element.textContent = message + " ";

diff --git a/src/status.css b/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;
+}
diff --git a/src/status.ts b/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";
@@ -39,6 +43,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) {
@@ -50,15 +66,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) {