mirror of
https://github.com/logseq/logseq.git
synced 2026-05-03 18:36:43 +00:00
enhance(ui): refactor the dropdown with the shui popup
This commit is contained in:
charlie
@@ -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,108 +529,110 @@
|
||||
(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))
|
||||
(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))}
|
||||
|
||||
(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/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/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/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/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/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/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))
|
||||
|
||||
(when market?
|
||||
(ui/dropdown-with-links
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
(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))}])
|
||||
{}))
|
||||
|
||||
;; more - updater
|
||||
(ui/dropdown-with-links
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
(ui/button
|
||||
(ui/icon "dots-vertical")
|
||||
:class "more-do"
|
||||
:on-click toggle-fn
|
||||
{: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))
|
||||
|
||||
(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))}}])
|
||||
(when market?
|
||||
(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 [: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 (t :plugin/stars)
|
||||
:options {:on-click #(reset! *sort-by :stars)}
|
||||
:icon (ui/icon (aim-icon :stars))}
|
||||
|
||||
[{: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}}]
|
||||
{:title (t :plugin/title "A - Z")
|
||||
:options {:on-click #(reset! *sort-by :letters)}
|
||||
:icon (ui/icon (aim-icon :letters))}]]
|
||||
|
||||
(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))}}])
|
||||
(ui/button
|
||||
(ui/icon "arrows-sort")
|
||||
:class (str (when-not (contains? #{:default :downloads} sort-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)))
|
||||
|
||||
[{:hr true :key "dropdown-more"}
|
||||
{:title (auto-check-for-updates-control)
|
||||
:options {:no-padding? true}}])
|
||||
{})
|
||||
;; more - updater
|
||||
(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 #(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))
|
||||
|
||||
;; 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]
|
||||
|
||||
Reference in New Issue
Block a user