Skip to content

Commit

Permalink
enhance(ux): filter of marketplace plugins list
Browse files Browse the repository at this point in the history
  • Loading branch information
@xyhp915 @tiensonqin
xyhp915 authored and tiensonqin committed Apr 2, 2022
1 parent 06465e6 commit 8b8967e
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 28 deletions.
90 changes: 62 additions & 28 deletions src/main/frontend/components/plugins.cljs
View file
Expand Up @@ -336,8 +336,8 @@

(rum/defc panel-control-tabs < rum/static
[search-key *search-key category *category
sort-or-filter-by *sort-or-filter-by selected-unpacked-pkg
market? develop-mode? reload-market-fn]
sort-by *sort-by filter-by *filter-by
selected-unpacked-pkg market? develop-mode? reload-market-fn]

(let [*search-ref (rum/create-ref)]
[:div.mb-2.flex.justify-between.control-tabs.relative
Expand All @@ -361,47 +361,70 @@
(panel-tab-search search-key *search-key *search-ref)

;; sorter & filter
(ui/dropdown-with-links
(fn [{:keys [toggle-fn]}]
(ui/button
[:span (ui/icon (if market? "arrows-sort" "filter"))]
:class (str (when-not (contains? #{:default :downloads} sort-or-filter-by) "picked ") "sort-or-filter-by")
:on-click toggle-fn
:intent "link"))
(let [aim-icon #(if (= sort-or-filter-by %) "check" "circle")]
(let [aim-icon #(if (= filter-by %) "check" "circle")]
(ui/dropdown-with-links
(fn [{:keys [toggle-fn]}]
(ui/button
[:span (ui/icon "filter")]
:class (str (when-not (contains? #{:default} filter-by) "picked ") "sort-or-filter-by")
:on-click toggle-fn
:intent "link"))

(if market?
[{:title (t :plugin/downloads)
:options {:on-click #(reset! *sort-or-filter-by :downloads)}
:icon (ui/icon (aim-icon :downloads))}
[{:title (t :plugin/all)
:options {:on-click #(reset! *filter-by :default)}
:icon (ui/icon (aim-icon :default))}

{:title (t :plugin/stars)
:options {:on-click #(reset! *sort-or-filter-by :stars)}
:icon (ui/icon (aim-icon :stars))}
{:title (t :plugin/installed)
:options {:on-click #(reset! *filter-by :installed)}
:icon (ui/icon (aim-icon :installed))}

{:title (str (t :plugin/title) " (A - Z)")
:options {:on-click #(reset! *sort-or-filter-by :letters)}
:icon (ui/icon (aim-icon :letters))}]
{: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! *sort-or-filter-by :default)}
:options {:on-click #(reset! *filter-by :default)}
:icon (ui/icon (aim-icon :default))}

{:title (t :plugin/enabled)
:options {:on-click #(reset! *sort-or-filter-by :enabled)}
:options {:on-click #(reset! *filter-by :enabled)}
:icon (ui/icon (aim-icon :enabled))}

{:title (t :plugin/disabled)
:options {:on-click #(reset! *sort-or-filter-by :disabled)}
:options {:on-click #(reset! *filter-by :disabled)}
:icon (ui/icon (aim-icon :disabled))}

{:title (t :plugin/unpacked)
:options {:on-click #(reset! *sort-or-filter-by :unpacked)}
:options {:on-click #(reset! *filter-by :unpacked)}
:icon (ui/icon (aim-icon :unpacked))}

{:title (t :plugin/update-available)
:options {:on-click #(reset! *sort-or-filter-by :update-available)}
:icon (ui/icon (aim-icon :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
[:span (ui/icon "arrows-sort")]
:class (str (when-not (contains? #{:default :downloads} sort-by) "picked ") "sort-or-filter-by")
:on-click toggle-fn
:intent "link"))
(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 (str (t :plugin/title) " (A - Z)")
:options {:on-click #(reset! *sort-by :letters)}
:icon (ui/icon (aim-icon :letters))}])
{}))

;; more - updater
(ui/dropdown-with-links
Expand Down Expand Up @@ -438,6 +461,7 @@
(rum/local "" ::search-key)
(rum/local :plugins ::category)
(rum/local :downloads ::sort-by) ;; downloads / stars / letters / updates
(rum/local :default ::filter-by)
(rum/local nil ::error)
{:did-mount (fn [s]
(let [reload-fn (fn [force-refresh?]
Expand All @@ -460,12 +484,19 @@
*search-key (::search-key state)
*category (::category state)
*sort-by (::sort-by state)
*filter-by (::filter-by state)
*fetching (::fetching state)
*error (::error state)
filtered-pkgs (when (seq pkgs)
(if (= @*category :themes)
(filter #(:theme %) pkgs)
(filter #(not (:theme %)) pkgs)))
filtered-pkgs (if (and (seq filtered-pkgs) (not= :default @*filter-by))
(filter #(apply
(if (= :installed @*filter-by) identity not)
[(contains? installed-plugins (keyword (:id %)))])
filtered-pkgs)
filtered-pkgs)
filtered-pkgs (if-not (string/blank? @*search-key)
(if-let [author (and (string/starts-with? @*search-key "@")
(subs @*search-key 1))]
Expand Down Expand Up @@ -494,8 +525,8 @@
(panel-control-tabs
@*search-key *search-key
@*category *category
@*sort-by *sort-by nil true
develop-mode? (::reload state))
@*sort-by *sort-by @*filter-by *filter-by
nil true develop-mode? (::reload state))

(cond
(not online?)
Expand Down Expand Up @@ -528,6 +559,7 @@
< rum/static rum/reactive
(rum/local "" ::search-key)
(rum/local :default ::filter-by) ;; default / enabled / disabled / unpacked / update-available
(rum/local :default ::sort-by)
(rum/local :plugins ::category)
[state]
(let [installed-plugins (state/sub [:plugin/installed-plugins])
Expand All @@ -537,6 +569,7 @@
selected-unpacked-pkg (state/sub :plugin/selected-unpacked-pkg)
coming-updates (state/sub :plugin/updates-coming)
*filter-by (::filter-by state)
*sort-by (::sort-by state)
*search-key (::search-key state)
*category (::category state)
default-filter-by? (= :default @*filter-by)
Expand Down Expand Up @@ -575,6 +608,7 @@
(panel-control-tabs
@*search-key *search-key
@*category *category
@*sort-by *sort-by
@*filter-by *filter-by
selected-unpacked-pkg
false develop-mode? nil)
Expand Down
8 changes: 8 additions & 0 deletions src/main/frontend/components/plugins.css
View file
Expand Up @@ -421,6 +421,14 @@
opacity: 1;
}
}

&.market.installed {
opacity: .5;

&:hover {
opacity: 1;
}
}
}

&-details {
Expand Down
2 changes: 2 additions & 0 deletions src/main/frontend/dicts.cljc
View file
Expand Up @@ -364,6 +364,7 @@
:help/shortcut-page-title "Keyboard shortcuts"

:plugin/installed "Installed"
:plugin/not-installed "Not installed"
:plugin/installing "Installing"
:plugin/install "Install"
:plugin/reload "Reload"
Expand Down Expand Up @@ -1255,6 +1256,7 @@
:user/delete-account-notice "你在 logseq.com 发布的页面（假如有的话）也会被删除。"

:plugin/installed "已安装"
:plugin/not-installed "未安装"
:plugin/installing "安装中"
:plugin/install "安装"
:plugin/reload "重载"
Expand Down

0 comments on commit 8b8967e

Please sign in to comment.