enhance(ui): refactor the dropdown with the shui popup

resources/css/shui.css

@@ -218,7 +218,8 @@ html[data-theme=dark] {
 }
 
 .ui__dialog-overlay, .ui__alert-dialog-overlay,
-.ui__dialog-content, .ui__alert-dialog-content{
+.ui__dialog-content, .ui__alert-dialog-content,
+.ui__dropdown-menu-content {
   &.z-50 {
     @apply z-[999];
   }

src/main/frontend/components/plugins.cljs

@@ -32,6 +32,22 @@
   []
   (reset! *dirties-toggle-items {}))
 
+(defn render-classic-dropdown-items
+  [id items]
+  (for [{:keys [hr item title options icon]} items]
+    (let [on-click' (:on-click options)]
+      (if hr
+        (shui/dropdown-menu-separator)
+        (shui/dropdown-menu-item
+          (assoc options
+            :on-click (fn [^js e]
+                        (when on-click'
+                          (when-not (false? (on-click' e))
+                            (shui/popup-hide! id)))))
+          (or item
+            [:span.flex.items-center.gap-1.w-full
+             icon [:div title]]))))))
+
 (rum/defcs installed-themes
   <
   (rum/local [] ::themes)
@@ -513,109 +529,111 @@
       (panel-tab-search search-key *search-key *search-ref)
 
       ;; sorter & filter
-      (let [aim-icon #(if (= filter-by %) "check" "circle")]
-        (ui/dropdown-with-links
-         (fn [{:keys [toggle-fn]}]
-           (ui/button
-            (ui/icon "filter")
-            :class (str (when-not (contains? #{:default} filter-by) "picked ") "sort-or-filter-by")
-            :on-click toggle-fn
-            :variant :ghost))
-
-         (if market?
-           [{:title   (t :plugin/all)
-             :options {:on-click #(reset! *filter-by :default)}
-             :icon    (ui/icon (aim-icon :default))}
-
-            {:title   (t :plugin/installed)
-             :options {:on-click #(reset! *filter-by :installed)}
-             :icon    (ui/icon (aim-icon :installed))}
-
-            {:title   (t :plugin/not-installed)
-             :options {:on-click #(reset! *filter-by :not-installed)}
-             :icon    (ui/icon (aim-icon :not-installed))}]
-
-           [{:title   (t :plugin/all)
-             :options {:on-click #(reset! *filter-by :default)}
-             :icon    (ui/icon (aim-icon :default))}
-
-            {:title   (t :plugin/enabled)
-             :options {:on-click #(reset! *filter-by :enabled)}
-             :icon    (ui/icon (aim-icon :enabled))}
-
-            {:title   (t :plugin/disabled)
-             :options {:on-click #(reset! *filter-by :disabled)}
-             :icon    (ui/icon (aim-icon :disabled))}
-
-            {:title   (t :plugin/unpacked)
-             :options {:on-click #(reset! *filter-by :unpacked)}
-             :icon    (ui/icon (aim-icon :unpacked))}
-
-            {:title   (t :plugin/update-available)
-             :options {:on-click #(reset! *filter-by :update-available)}
-             :icon    (ui/icon (aim-icon :update-available))}])
-         nil))
+      (let [aim-icon #(if (= filter-by %) "check" "circle")
+            items (if market?
+                    [{:title   (t :plugin/all)
+                      :options {:on-click #(reset! *filter-by :default)}
+                      :icon    (ui/icon (aim-icon :default))}
+
+                     {:title   (t :plugin/installed)
+                      :options {:on-click #(reset! *filter-by :installed)}
+                      :icon    (ui/icon (aim-icon :installed))}
+
+                     {:title   (t :plugin/not-installed)
+                      :options {:on-click #(reset! *filter-by :not-installed)}
+                      :icon    (ui/icon (aim-icon :not-installed))}]
+
+                    [{:title   (t :plugin/all)
+                      :options {:on-click #(reset! *filter-by :default)}
+                      :icon    (ui/icon (aim-icon :default))}
+
+                     {:title   (t :plugin/enabled)
+                      :options {:on-click #(reset! *filter-by :enabled)}
+                      :icon    (ui/icon (aim-icon :enabled))}
+
+                     {:title   (t :plugin/disabled)
+                      :options {:on-click #(reset! *filter-by :disabled)}
+                      :icon    (ui/icon (aim-icon :disabled))}
+
+                     {:title   (t :plugin/unpacked)
+                      :options {:on-click #(reset! *filter-by :unpacked)}
+                      :icon    (ui/icon (aim-icon :unpacked))}
+
+                     {:title   (t :plugin/update-available)
+                      :options {:on-click #(reset! *filter-by :update-available)}
+                      :icon    (ui/icon (aim-icon :update-available))}])]
+        (ui/button
+          (ui/icon "filter")
+          :class (str (when-not (contains? #{:default} filter-by) "picked ") "sort-or-filter-by")
+          :on-click #(shui/popup-show! (.-target %)
+                       (fn [{:keys [id]}]
+                         (render-classic-dropdown-items id items))
+                       {:as-dropdown? true})
+          :variant :ghost))
 
       (when market?
-        (ui/dropdown-with-links
-         (fn [{:keys [toggle-fn]}]
-           (ui/button
+        (let [aim-icon #(if (= sort-by %) "check" "circle")
+              items [{:title (t :plugin/downloads)
+                      :options {:on-click #(reset! *sort-by :downloads)}
+                      :icon (ui/icon (aim-icon :downloads))}
+
+                     {:title (t :plugin/stars)
+                      :options {:on-click #(reset! *sort-by :stars)}
+                      :icon (ui/icon (aim-icon :stars))}
+
+                     {:title (t :plugin/title "A - Z")
+                      :options {:on-click #(reset! *sort-by :letters)}
+                      :icon (ui/icon (aim-icon :letters))}]]
+
+          (ui/button
             (ui/icon "arrows-sort")
             :class (str (when-not (contains? #{:default :downloads} sort-by) "picked ") "sort-or-filter-by")
-            :on-click toggle-fn
-            :variant :ghost))
-         (let [aim-icon #(if (= sort-by %) "check" "circle")]
-           [{:title   (t :plugin/downloads)
-             :options {:on-click #(reset! *sort-by :downloads)}
-             :icon    (ui/icon (aim-icon :downloads))}
-
-            {:title   (t :plugin/stars)
-             :options {:on-click #(reset! *sort-by :stars)}
-             :icon    (ui/icon (aim-icon :stars))}
-
-            {:title   (t :plugin/title "A - Z")
-             :options {:on-click #(reset! *sort-by :letters)}
-             :icon    (ui/icon (aim-icon :letters))}])
-         {}))
+            :on-click #(shui/popup-show! (.-target %)
+                         (fn [{:keys [id]}]
+                           (render-classic-dropdown-items id items))
+                         {:as-dropdown? true})
+            :variant :ghost)))
 
       ;; more - updater
-      (ui/dropdown-with-links
-       (fn [{:keys [toggle-fn]}]
-         (ui/button
+      (let [items (concat (if market?
+                            [{:title [:span.flex.items-center.gap-1 (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
+                              :options {:on-click #(reload-market-fn)}}]
+                            [{:title [:span.flex.items-center.gap-1 (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
+                              :options {:on-click #(plugin-handler/user-check-enabled-for-updates! (not= :plugins category))}}])
+
+                    [{:title [:span.flex.items-center.gap-1 (ui/icon "world") (t :settings-page/network-proxy)]
+                      :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
+
+                    [{:title [:span.flex.items-center.gap-1 (ui/icon "arrow-down-circle") (t :plugin.install-from-file/menu-title)]
+                      :options {:on-click plugin-config-handler/open-replace-plugins-modal}}]
+
+                    (when (state/developer-mode?)
+                      [{:hr true}
+                       {:title [:span.flex.items-center.gap-1 (ui/icon "file-code") (t :plugin/open-preferences)]
+                        :options {:on-click
+                                  #(p/let [root (plugin-handler/get-ls-dotdir-root)]
+                                     (js/apis.openPath (str root "/preferences.json")))}}
+                       {:title [:span.flex.items-center.whitespace-nowrap.gap-1
+                                (ui/icon "bug") (t :plugin/open-logseq-dir) [:code "~/.logseq"]]
+                        :options {:on-click
+                                  #(p/let [root (plugin-handler/get-ls-dotdir-root)]
+                                     (js/apis.openPath root))}}])
+
+                    [{:hr true :key "dropdown-more"}
+                     {:title (auto-check-for-updates-control)
+                      :options {:no-padding? true}}])]
+
+        (ui/button
           (ui/icon "dots-vertical")
           :class "more-do"
-          :on-click toggle-fn
+          :on-click #(shui/popup-show! (.-target %)
+                       (fn [{:keys [id]}]
+                         (render-classic-dropdown-items id items))
+                       {:as-dropdown? true
+                        :align "center"
+                        :content-props {:side-offset 10}})
           :variant :ghost))
 
-       (concat (if market?
-                 [{:title   [:span.flex.items-center.gap-1 (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
-                   :options {:on-click #(reload-market-fn)}}]
-                 [{:title   [:span.flex.items-center.gap-1 (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
-                   :options {:on-click #(plugin-handler/user-check-enabled-for-updates! (not= :plugins category))}}])
-
-               [{:title   [:span.flex.items-center.gap-1 (ui/icon "world") (t :settings-page/network-proxy)]
-                 :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
-
-               [{:title   [:span.flex.items-center.gap-1 (ui/icon "arrow-down-circle") (t :plugin.install-from-file/menu-title)]
-                 :options {:on-click plugin-config-handler/open-replace-plugins-modal}}]
-
-               (when (state/developer-mode?)
-                 [{:hr true}
-                  {:title   [:span.flex.items-center.gap-1 (ui/icon "file-code") (t :plugin/open-preferences)]
-                   :options {:on-click
-                             #(p/let [root (plugin-handler/get-ls-dotdir-root)]
-                                (js/apis.openPath (str root "/preferences.json")))}}
-                  {:title   [:span.flex.items-center.whitespace-nowrap.gap-1
-                             (ui/icon "bug") (t :plugin/open-logseq-dir) [:code "~/.logseq"]]
-                   :options {:on-click
-                             #(p/let [root (plugin-handler/get-ls-dotdir-root)]
-                                (js/apis.openPath root))}}])
-
-               [{:hr true :key "dropdown-more"}
-                {:title   (auto-check-for-updates-control)
-                 :options {:no-padding? true}}])
-       {})
-
       ;; developer
       (panel-tab-developer)]]))
 
@@ -1072,27 +1090,14 @@
       (fn [^js e]
         (shui/popup-show! (.-target e)
           (fn [{:keys [id]}]
-            (for [{:keys [hr item title options icon]} (items)]
-              (let [on-click' (:on-click options)]
-                (if hr
-                  (shui/dropdown-menu-separator)
-                  (shui/dropdown-menu-item
-                    (assoc options
-                           :on-click (fn [^js e]
-                                       (when on-click'
-                                         (when-not (false? (on-click' e))
-                                           (shui/popup-hide! id)))))
-                    (or item
-                      [:span.flex.items-center.gap-1.w-full
-                       icon [:div title]]))))))
+            (render-classic-dropdown-items id (items)))
           {:as-dropdown? true
            :content-props {:class "toolbar-plugins-manager-content"}}))}
 
      [:a.button.relative.toolbar-plugins-manager-trigger
       (ui/icon "puzzle" {:size 20})
       (when badge-updates?
-        (ui/point "bg-red-600.top-1.right-1.absolute" 4 {:style {:margin-right 2 :margin-top 2}}))]]
-    ))
+        (ui/point "bg-red-600.top-1.right-1.absolute" 4 {:style {:margin-right 2 :margin-top 2}}))]]))
 
 (rum/defc header-ui-items-list-wrap
   [children]

src/main/frontend/components/settings.cljs

@@ -154,7 +154,7 @@
    {:class (if center? "sm:items-center" "sm:items-start")}
    ;; left column
    [:div.flex.flex-col
-    [:label.block.text-sm.font-medium.leading-5.opacity-70
+    [:label.block.text-sm.font-medium.leading-5.opacity-70.pt-2
      {:for -for}
      left-label]
     (when description