soft popup

Author: pepijndevos

public/css/style.css

@@ -74,7 +74,9 @@ input, textarea {
 }
 
 
-#mosaic_libman button, #mosaic_libman .buttongroup {
+#mosaic_libman button,
+#mosaic_libman input[type=submit],
+#mosaic_libman .buttongroup {
     background: #f8f8f8 0% 0% no-repeat padding-box;
     box-shadow: 0px 1px 4px #00000033;
     border-radius: 7px;
@@ -86,6 +88,7 @@ input, textarea {
     box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.2);
 }
 #mosaic_libman button.primary,
+#mosaic_libman input[type=submit],
 #mosaic_libman .buttongroup.primary {
     background-color: #0E1A32;
     color: white;
@@ -246,6 +249,29 @@ input, textarea {
     grid-template-columns: 1fr 2fr 2fr;
 }
 
+#mosaic_libman .modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    box-shadow: 0px 0px 10px #00000033;
+    border-radius: 7px;
+    border: 1px solid lightgray;
+    padding: 20px 20px;
+
+}
+#mosaic_libman .modal.hidden {
+    display: none;
+}
+#mosaic_libman .modal input[type=text] {
+    display: block;
+    margin: 1em 0;
+}
+#mosaic_libman .modal input[type=submit] {
+    margin-left:1em;
+}
+
 /* editor */
 #mosaic_editor * {
   margin: 0;

src/main/nyancad/mosaic/libman.cljs

@@ -23,6 +23,27 @@
 
 (def schdbmeta {:name "schematics" :url cm/default-sync})
 
+(defonce modal-content (r/atom nil))
+
+(defn modal []
+  [:div.modal
+   {:class (if @modal-content "visible" "hidden")}
+   @modal-content])
+
+(defn prompt [text cb]
+  (reset! modal-content
+          [:form {:on-submit (fn [^js e]
+                               (js/console.log e)
+                               (.preventDefault e)
+                               (let [name (.. e -target -elements -valuefield -value)]
+                                 (when (seq name)
+                                   (cb name)))
+                               (reset! modal-content nil))}
+           [:div text]
+           [:input {:name "valuefield" :type "text"}]
+           [:button {:on-click #(reset! modal-content nil)} "Cancel"]
+           [:input {:type "submit" :value "Ok"}]]))
+
 (defn get-dbatom [dbid]
   (if-let [pa (get @dbcache dbid)]
     pa
@@ -173,12 +194,12 @@
 
 (defn cell-view []
   (let [db (get-dbatom (or @seldb :schematics))
-        add-cell #(when-let [name (and @seldb (js/prompt "Enter the name of the new cell"))]
-                    (swap! db assoc (str "models" sep name) {:name name}))
-        add-schem #(when-let [name (and @seldb @selcell (js/prompt "Enter the name of the new schematic"))]
-                     (swap! db assoc-in [@selcell :models (keyword name)] {:name name, :type "schematic"}))
-        add-spice #(when-let [name (and @seldb @selcell (js/prompt "Enter the name of the new SPICE model"))]
-                     (swap! db assoc-in [@selcell :models (keyword name)] {:name name :type "spice"}))]
+        add-cell #(prompt "Enter the name of the new cell"
+                          (fn [name] (swap! db assoc (str "models" sep name) {:name name})))
+        add-schem #(prompt "Enter the name of the new schematic"
+                          (fn [name] (swap! db assoc-in [@selcell :models (keyword name)] {:name name, :type "schematic"})))
+        add-spice #(prompt "Enter the name of the new SPICE model"
+                           (fn [name] (swap! db assoc-in [@selcell :models (keyword name)] {:name name :type "spice"})))]
     [:<>
      [:div.schsel
       [:div.addbuttons
@@ -206,13 +227,13 @@
     [:div.libhead
      [:h1 "Library"]
      [:button.plus {:on-click
-                    #(let [name (js/prompt "Enter the name of the new database")]
-                       (when (seq name)
-                         (swap! databases assoc (str "databases" sep name) {:name name})))}
+                    #(prompt "Enter the name of the new database"
+                             (fn [name] (swap! databases assoc (str "databases" sep name) {:name name})))}
       "+"]]
     [database-selector]
     [db-properties]]
-   [cell-view]])
+   [cell-view]
+   [modal]])
 
 (def shortcuts {})