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

deps/shui/src/logseq/shui/dialog/core.cljs

@@ -72,13 +72,16 @@
     (swap! *modals #(->> % (medley/remove-nth index) (vec)))))
 
 ;; apis
+(declare close!)
+
 (defn open!
   [content-or-config & config']
   (let [config (if (map? content-or-config)
                  content-or-config
                  {:content content-or-config})
         content (:content config)
-        config (merge {:id (gen-id) :open? true} config (first config'))
+        id (gen-id)
+        config (merge {:id id :open? true :close #(close! id)} config (first config'))
         config (cond-> config
                  (fn? content)
                  (assoc :content (content config)))]

src/main/frontend/components/file_sync.css

@@ -554,12 +554,6 @@
   }
 }
 
-div[label=modal-page-histories] {
-  .panel-content {
-    overflow: hidden;
-  }
-}
-
 html[data-theme='light'] {
   .cp__file-sync {
     &-welcome-logseq-sync {

src/main/frontend/components/server.cljs

@@ -1,14 +1,15 @@
 (ns frontend.components.server
   (:require
-    [clojure.string :as string]
-    [rum.core :as rum]
-    [electron.ipc :as ipc]
-    [medley.core :as medley]
-    [promesa.core :as p]
-    [frontend.state :as state]
-    [frontend.util :as util]
-    [frontend.handler.notification :as notification]
-    [frontend.ui :as ui]))
+   [clojure.string :as string]
+   [logseq.shui.ui :as shui]
+   [rum.core :as rum]
+   [electron.ipc :as ipc]
+   [medley.core :as medley]
+   [promesa.core :as p]
+   [frontend.state :as state]
+   [frontend.util :as util]
+   [frontend.handler.notification :as notification]
+   [frontend.ui :as ui]))
 
 (rum/defcs panel-of-tokens
   < rum/reactive
@@ -22,7 +23,7 @@
   (let [server-state (state/sub :electron/server)
         *tokens      (::tokens _state)
         changed?     (not= @*tokens (:tokens server-state))]
-    [:div.cp__server-tokens-panel.-mx-2
+    [:div.cp__server-tokens-panel.pt-6
      [:h2.text-3xl.-translate-y-4 "Authorization tokens"]
      ;; items
      (let [update-value! (fn [idx k v] (swap! *tokens assoc-in [idx k] v))]
@@ -48,7 +49,7 @@
      [:p.flex.justify-end.pt-6.space-x-3
       (ui/button "+ Add new token"
                  :on-click #(swap! *tokens conj {})
-                 :intent "logseq")
+                 :variant :outline)
       (ui/button "Save"
                  :on-click (fn [] (-> (ipc/ipc :server/set-config {:tokens @*tokens})
                                       (p/then #(notification/show! "Update tokens successfully!" :success))
@@ -75,7 +76,7 @@
                                           (mapv #(cond-> % (nil? %) not))
                                           (apply not=)))]
 
-    [:div.cp__server-configs-panel.-mx-2
+    [:div.cp__server-configs-panel.pt-5
      [:h2.text-3xl.-translate-y-4 "Server configurations"]
 
      [:div.item.flex.items-center.space-x-3
@@ -107,7 +108,7 @@
        [:strong.select-none "Auto start server with the app launched"]]]
 
      [:p.flex.justify-end.pt-6.space-x-3
-      (ui/button "Reset" :intent "logseq"
+      (ui/button "Reset" :variant :outline
                  :on-click #(reset! *configs (select-keys server-state [:host :port :autostart])))
       (ui/button "Save & Apply"
                  :disabled (not changed?)
@@ -165,18 +166,16 @@
                 :icon    [:span.text-green-500.flex.items-center (ui/icon "player-play")]})
 
              {:title   "Authorization tokens"
-              :options {:on-click #(state/set-modal!
-                                     (fn [close]
-                                       (panel-of-tokens close))
-                                     {:center? true})}
-              :icon    (ui/icon "key")}
-
-             {:title   "Server configurations"
-              :options {:on-click #(state/set-modal!
-                                     (fn [close]
-                                       (panel-of-configs close))
-                                     {:center? true})}
-              :icon    (ui/icon "server-cog")}])
+              :options {:on-click #(shui/dialog-open!
+                                     (fn []
+                                       (panel-of-tokens shui/dialog-close!)))}
+              :icon (ui/icon "key")}
+
+             {:title "Server configurations"
+              :options {:on-click #(shui/dialog-open!
+                                     (fn []
+                                       (panel-of-configs shui/dialog-close!)))}
+              :icon (ui/icon "server-cog")}])
        {:links-header
         [:div.links-header.flex.justify-center.py-2
          [:span.ml-1.text-sm

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

@@ -13,6 +13,7 @@
             [frontend.storage :as storage]
             [frontend.ui :as ui]
             [frontend.util :as util]
+            [logseq.shui.ui :as shui]
             [promesa.core :as p]
             [rum.core :as rum]))
 
@@ -100,8 +101,10 @@
       [:div.extensions__pdf-settings-item.toggle-input
        [:a.is-info.w-full.text-gray-500
         {:title    (t :pdf/doc-metadata)
-         :on-click #(p/let [ret (pdf-utils/get-meta-data$ viewer)]
-                      (state/set-modal! (make-docinfo-in-modal ret)))}
+         :on-click (fn []
+                     (p/let [ret (pdf-utils/get-meta-data$ viewer)]
+                       (hide-settings!)
+                       (shui/dialog-open! (make-docinfo-in-modal ret))))}
 
         [:span.flex.items-center.justify-between.w-full
          (t :pdf/doc-metadata)

src/main/frontend/handler/events.cljs

@@ -250,12 +250,11 @@
                 (p/catch (fn [^js e]
                            (notification/show! (str e) :error)
                            (js/console.error e)))))))))
-    (state/set-modal!
-      (file-sync/pick-dest-to-sync-panel graph)
-      {:center? true})))
+    (shui/dialog-open!
+      (file-sync/pick-dest-to-sync-panel graph))))
 
 (defmethod handle :graph/pick-page-histories [[_ graph-uuid page-name]]
-  (state/set-modal!
+  (shui/dialog-open!
     (file-sync/pick-page-histories-panel graph-uuid page-name)
     {:id :page-histories :label "modal-page-histories"}))
 
@@ -292,7 +291,7 @@
 
 (defmethod handle :modal/nfs-ask-permission []
   (when-let [repo (get-local-repo)]
-    (state/set-modal! (ask-permission repo))))
+    (shui/dialog-open! (ask-permission repo))))
 
 (defonce *query-properties (atom {}))
 (rum/defc query-properties-settings-inner < rum/reactive
@@ -350,12 +349,16 @@
       {})))
 
 (defmethod handle :modal/show-cards [_]
-  (state/set-modal! srs/global-cards {:id :srs
-                                      :label "flashcards__cp"}))
+  (shui/dialog-open!
+    srs/global-cards
+    {:id :srs
+     :label "flashcards__cp"}))
 
 (defmethod handle :modal/show-instruction [_]
-  (state/set-modal! capacitor-fs/instruction {:id :instruction
-                                              :label "instruction__cp"}))
+  (shui/dialog-open!
+    capacitor-fs/instruction
+    {:id :instruction
+     :label "instruction__cp"}))
 
 (defmethod handle :modal/show-themes-modal [[_ classic?]]
   (if classic?
@@ -371,15 +374,8 @@
         {:id      label
          :label   label}))))
 
-(rum/defc modal-output
-  [content]
-  content)
-
-(defmethod handle :modal/show [[_ content]]
-  (state/set-modal! #(modal-output content)))
-
 (defmethod handle :modal/set-git-username-and-email [[_ _content]]
-  (state/set-modal! git-component/set-git-username-and-email))
+  (shui/dialog-open! git-component/set-git-username-and-email))
 
 (defmethod handle :page/create [[_ page-name opts]]
   (if (= page-name (date/today))
@@ -404,7 +400,8 @@
 
 
 (defmethod handle :modal/display-file-version-selector  [[_ versions path  get-content]]
-  (state/set-modal! #(git-component/file-version-selector versions path get-content)))
+  (shui/dialog-open!
+    #(git-component/file-version-selector versions path get-content)))
 
 (defmethod handle :graph/sync-context []
   (let [context {:dev? config/dev?
@@ -673,17 +670,16 @@
   (file-sync-restart!))
 
 (defmethod handle :graph/ask-for-re-fresh [_]
-  (handle
-    [:modal/show
-     [:div {:style {:max-width 700}}
-      [:p (t :sync-from-local-changes-detected)]
-      (ui/button
-        (t :yes)
-        :autoFocus "on"
-        :class "ui__modal-enter"
-        :on-click (fn []
-                    (state/close-modal!)
-                    (nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]]))
+  (shui/dialog-open!
+    [:div {:style {:max-width 700}}
+     [:p (t :sync-from-local-changes-detected)]
+     (ui/button
+       (t :yes)
+       :autoFocus "on"
+       :class "ui__modal-enter"
+       :on-click (fn []
+                   (state/close-modal!)
+                   (nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]))
 
 (defmethod handle :sync/create-remote-graph [[_ current-repo]]
   (let [graph-name (js/decodeURI (util/node-path.basename current-repo))]
@@ -704,7 +700,7 @@
                             (state/get-repos)))))))
 
 (defmethod handle :modal/remote-encryption-input-pw-dialog [[_ repo-url remote-graph-info type opts]]
-  (state/set-modal!
+  (shui/dialog-open!
     (encryption/input-password
       repo-url nil (merge
                      (assoc remote-graph-info
@@ -744,15 +740,15 @@
                                     :path-params {:name (:block/name page-entity)}}))))))
 
 (defmethod handle :whiteboard/onboarding [[_ opts]]
-  (state/set-modal!
-    (fn [close-fn] (whiteboard/onboarding-welcome close-fn))
+  (shui/dialog-open!
+    (fn [{:keys [close]}] (whiteboard/onboarding-welcome close))
     (merge {:close-btn?      false
             :center?         true
             :close-backdrop? false} opts)))
 
 (defmethod handle :file-sync/onboarding-tip [[_ type opts]]
   (let [type (keyword type)]
-    (state/set-modal!
+    (shui/dialog-open!
       (file-sync/make-onboarding-panel type)
       (merge {:close-btn?      false
               :center?         true
@@ -827,7 +823,7 @@
                       :native-icloud? (not (string/blank? (state/get-icloud-container-root-url)))
                       :logged?        (user-handler/logged-in?)} opts)]
     (if (mobile-util/native-ios?)
-      (state/set-modal!
+      (shui/dialog-open!
         #(graph-picker/graph-picker-cp opts')
         {:label "graph-setup"})
       (page-handler/ls-dir-files! st/refresh! opts'))))
@@ -1035,7 +1031,7 @@
 
 (defmethod handle :show/multiple-tabs-error-dialog [_]
   (state/set-state! :error/multiple-tabs-access-opfs? true)
-  (state/set-modal! multi-tabs-dialog {:container-overflow-visible? true}))
+  (shui/dialog-open! multi-tabs-dialog))
 
 (defmethod handle :rtc/sync-state [[_ state]]
   (state/update-state! :rtc/state (fn [old] (merge old state))))

src/main/frontend/handler/file_based/events.cljs

@@ -10,29 +10,29 @@
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
-            [frontend.config :as config]))
+            [frontend.config :as config]
+            [logseq.shui.ui :as shui]))
 
 (defmethod events/handle :graph/ask-for-re-index [[_ *multiple-windows? ui]]
   ;; *multiple-windows? - if the graph is opened in multiple windows, boolean atom
   ;; ui - custom message to show on asking for re-index
   (if (and (util/atom? *multiple-windows?) @*multiple-windows?)
-    (events/handle
-     [:modal/show
+    (shui/dialog-open!
       [:div
        (when (not (nil? ui)) ui)
-       [:p (t :re-index-multiple-windows-warning)]]])
-    (events/handle
-     [:modal/show
+       [:p (t :re-index-multiple-windows-warning)]])
+
+    (shui/dialog-open!
       [:div {:style {:max-width 700}}
        (when (not (nil? ui)) ui)
        [:p (t :re-index-discard-unsaved-changes-warning)]
        (ui/button
-        (t :yes)
-        :autoFocus "on"
-        :class "ui__modal-enter"
-        :on-click (fn []
-                    (state/close-modal!)
-                    (state/pub-event! [:graph/re-index])))]])))
+         (t :yes)
+         :autoFocus "on"
+         :class "ui__modal-enter"
+         :on-click (fn []
+                     (shui/dialog-close!)
+                     (state/pub-event! [:graph/re-index])))])))
 
 (defmethod events/handle :graph/re-index [[_]]
   ;; Ensure the graph only has ONE window instance

src/main/frontend/ui.css

@@ -179,16 +179,6 @@
     }
   }
 
-  &[label="flashcards__cp"] {
-    .panel-content {
-      padding: 2rem 0;
-
-      @screen sm {
-        padding: 2rem 2rem;
-      }
-    }
-  }
-
   &[label="instruction__cp"] {
 
     .ui__modal-panel {
@@ -222,25 +212,6 @@ html.is-native-iphone-without-notch {
   .ls-card {
     min-height: 65vh;
   }
-
-  .ui__modal {
-    &[label="flashcards__cp"] {
-      .panel-content {
-        padding: 2rem 1rem 1rem;
-        width: 90vw;
-
-        .cards-review {
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-
-        .blocks-container {
-          transform: translateX(-7px);
-          width: 103%;
-        }
-      }
-    }
-  }
 }
 
 html.is-mobile {