enhance(ui): refactor classic modal with the shui dialog

src/main/frontend/components/file_sync.cljs

@@ -24,6 +24,7 @@
             [frontend.util :as util]
             [frontend.util.fs :as fs-util]
             [frontend.storage :as storage]
+            [logseq.shui.ui :as shui]
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
             [rum.core :as rum]
@@ -359,10 +360,10 @@
                                          (js/decodeURI (util/node-path.basename current-repo))
 
                                          confirm-fn
-                                         (fn [close-fn]
-                                           (create-remote-graph-panel current-repo graph-name close-fn))]
+                                         (fn [{:keys [close]}]
+                                           (create-remote-graph-panel current-repo graph-name close))]
 
-                                     (state/set-modal! confirm-fn {:center? true :close-btn? false})))
+                                     (shui/dialog-open! confirm-fn {:center? true :close-btn? false})))
         turn-on                 (->
                                  (fn []
                                    (when-not (file-sync-handler/current-graph-sync-on?)

src/main/frontend/extensions/pdf/core.cljs

@@ -15,6 +15,7 @@
             [frontend.rum :refer [use-atom]]
             [frontend.state :as state]
             [frontend.util :as util]
+            [logseq.shui.ui :as shui]
             [medley.core :as medley]
             [promesa.core :as p]
             [rum.core :as rum]
@@ -965,12 +966,13 @@
            "PasswordException"
            (do
              (set-loader-state! {:error nil})
-             (state/set-modal! (fn [close-fn]
-                                 (let [on-password-fn
-                                       (fn [password]
-                                         (close-fn)
-                                         (set-doc-password! password))]
-                                   (pdf-password-input on-password-fn)))))
+             (shui/dialog-open!
+               (fn [{:keys [close]}]
+                 (let [on-password-fn
+                       (fn [password]
+                         (close)
+                         (set-doc-password! password))]
+                   (pdf-password-input on-password-fn)))))
 
            (do
              (notification/show!

src/main/frontend/extensions/srs.cljs

@@ -29,6 +29,7 @@
             [frontend.util.persist-var :as persist-var]
             [logseq.graph-parser.property :as gp-property]
             [logseq.common.util.page-ref :as page-ref]
+            [logseq.shui.ui :as shui]
             [medley.core :as medley]
             [rum.core :as rum]))
 
@@ -530,7 +531,7 @@
 
 (defn preview
   [block-id]
-  (state/set-modal! #(preview-cp block-id) {:id :srs}))
+  (shui/dialog-open! #(preview-cp block-id) {:id :srs}))
 
 ;;; ================================================================
 ;;; register some external vars & related UI
@@ -694,8 +695,9 @@
          [:div.px-1
           (when (and (not modal?) (not @*preview-mode?))
             {:on-click (fn []
-                         (state/set-modal! #(cards (assoc config :modal? true) {:query-string query-string})
-                                           {:id :srs}))})
+                         (shui/dialog-open!
+                           #(cards (assoc config :modal? true) {:query-string query-string})
+                           {:id :srs}))})
           (let [view-fn (if modal? view-modal view)
                 blocks (if @*preview-mode? query-result review-cards)
                 blocks (if @*random-mode? (shuffle blocks) blocks)]

src/main/frontend/ui.css

@@ -160,7 +160,7 @@
   }
 
   &[label="ls-modal-align-center"],
-  &.as-center{
+  &.as-center {
     top: 0;
 
     .ui__modal-panel {
@@ -178,15 +178,12 @@
       }
     }
   }
+}
 
-  &[label="instruction__cp"] {
-
-    .ui__modal-panel {
-      height: 90%;
-    }
-
-    .panel-content {
-      height: 100%;
+.ui__dialog-content {
+  &[label=flashcards__cp] {
+    .ui__dialog-main-content {
+      @apply max-h-[85vh] overflow-auto;
     }
   }
 }