From dd9a837e9e9f9fa9a8781419bf421f880c41a4f3 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Tue, 19 Sep 2023 12:16:20 +0200
Subject: [PATCH] popup: big option

---
 frontend/components/NotifyWhenDone.js |  2 +-
 frontend/components/Popup.js          | 13 +++++++++----
 frontend/editor.css                   |  4 ++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/components/NotifyWhenDone.js b/frontend/components/NotifyWhenDone.js
index b05b25fe07..f31bedb12d 100644
--- a/frontend/components/NotifyWhenDone.js
+++ b/frontend/components/NotifyWhenDone.js
@@ -60,7 +60,7 @@ export let NotifyWhenDone = ({ status }) => {
     const visible = useDelayedTruth(!all_done, 2500) || enabled
 
     return html`
-        <div class=${cl({ visible, "notify-when-done": true })}>
+        <div class=${cl({ visible, "notify-when-done": true })} inert=${!visible}>
             <label
                 >${"Notify when done"}
                 <input
diff --git a/frontend/components/Popup.js b/frontend/components/Popup.js
index 16d3491ac2..27013725a9 100644
--- a/frontend/components/Popup.js
+++ b/frontend/components/Popup.js
@@ -19,7 +19,8 @@ export const help_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/
 /**
  * @typedef PkgPopupDetails
  * @property {"nbpkg"} type
- * @property {HTMLElement?} source_element
+ * @property {HTMLElement} [source_element]
+ * @property {Boolean} [big]
  * @property {string} package_name
  * @property {boolean} is_disable_pkg
  */
@@ -28,7 +29,8 @@ export const help_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/
  * @typedef MiscPopupDetails
  * @property {"info" | "warn"} type
  * @property {import("../imports/Preact.js").ReactElement} body
- * @property {HTMLElement?} source_element
+ * @property {HTMLElement} [source_element]
+ * @property {Boolean} [big]
  */
 
 export const open_pluto_popup = (/** @type{PkgPopupDetails | MiscPopupDetails} */ detail) => {
@@ -41,6 +43,8 @@ export const open_pluto_popup = (/** @type{PkgPopupDetails | MiscPopupDetails} *
 
 export const Popup = ({ notebook, disable_input }) => {
     const [recent_event, set_recent_event] = useState(/** @type{(PkgPopupDetails | MiscPopupDetails)?} */ (null))
+    const recent_event_ref = useRef(/** @type{(PkgPopupDetails | MiscPopupDetails)?} */ (null))
+    recent_event_ref.current = recent_event
     const recent_source_element_ref = useRef(/** @type{HTMLElement?} */ (null))
     const pos_ref = useRef("")
 
@@ -66,10 +70,10 @@ export const Popup = ({ notebook, disable_input }) => {
 
     useEffect(() => {
         const onpointerdown = (e) => {
+            if (recent_event_ref.current == null) return
             if (e.target == null) return
             if (e.target.closest("pluto-popup") != null) return
-            if (recent_source_element_ref.current == null) return
-            if (recent_source_element_ref.current.contains(e.target)) return
+            if (recent_source_element_ref.current != null && recent_source_element_ref.current.contains(e.target)) return
 
             close()
         }
@@ -96,6 +100,7 @@ export const Popup = ({ notebook, disable_input }) => {
         class=${cl({
             visible: recent_event != null,
             [type ?? ""]: type != null,
+            big: recent_event?.big === true,
         })}
         style="${pos_ref.current}"
     >
diff --git a/frontend/editor.css b/frontend/editor.css
index d16dea71c2..b72ff39df1 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -1808,6 +1808,10 @@ pluto-popup.visible {
     pointer-events: initial;
 }
 
+pluto-popup.big {
+    --max-size: 25em;
+}
+
 pluto-popup > * {
     display: block;
     background: var(--overlay-button-bg);