enhance: replace ui/button with shui/button

logseq · Nov 8, 2023 · f52e6bf · f52e6bf
1 parent 018835b
commit f52e6bf
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 271 deletions.
diff --git a/deps/shui/src/logseq/shui/button/v2.cljs b/deps/shui/src/logseq/shui/button/v2.cljs
@@ -9,11 +9,12 @@
   {:init (fn [state]
            (assoc state ::theme (atom
                                  (or (:theme (first (:rum/args state))) :color))))}
-  [state {:keys [theme hover-theme color text depth size icon interactive shortcut tiled on-click muted class href comp-opts]
+  [state {:keys [theme hover-theme color text depth size icon interactive shortcut tiled on-click muted disabled? class href button-props icon-props]
           :or {theme :color depth 1 size :md interactive true muted false class ""}} context]
   (let [*theme (::theme state)
         color-string (or (some-> color name) (some-> context :state rum/react :ui/radix-color name) "custom")
-        theme-class (str "shui__button-theme-" (name (rum/react *theme)))
+        theme (rum/react *theme)
+        theme-class (str "shui__button-theme-" (if (keyword? theme) (name theme) "color"))
         depth-class (when-not (= :text theme) (str "shui__button-depth-" depth))
         color-class (str "shui__button-color-" color-string)
         muted-class (when muted "shui__button-muted")
@@ -22,14 +23,16 @@
         on-click (fn [e]
                    (when href (set! (.-href js/window.location) href))
                    (when on-click (on-click e)))]
-    [:button.shui__button (merge
-                           comp-opts
-                           (cond->
-                            {:class (str theme-class " " depth-class " " color-class " " size-class " " tiled-class " " muted-class " " class)
-                             :on-mouse-over #(when hover-theme (reset! *theme hover-theme))
-                             :on-mouse-out #(reset! *theme theme)}
-                             on-click
-                             (assoc :on-click on-click)))
+    [:button.ui__button.shui__button
+     (merge
+      button-props
+      (cond->
+       {:class (str theme-class " " depth-class " " color-class " " size-class " " tiled-class " " muted-class " " class)
+        :disabled (boolean disabled?)
+        :on-mouse-over #(when hover-theme (reset! *theme hover-theme))
+        :on-mouse-out #(reset! *theme theme)}
+        on-click
+        (assoc :on-click on-click)))
      (if-not tiled text
              (for [[index tile] (map-indexed vector (rest (string/split text #"")))]
                [:<>
@@ -38,7 +41,7 @@
                 [:div.shui__button__tile {:class ""} tile]]))
 
      (when icon
-       (icon/root icon))
+       (icon/root icon icon-props))
      (when (not-empty shortcut)
        (for [key shortcut]
          [:div.shui__button-shortcut-key

diff --git a/src/main/frontend/components/plugins.cljs b/src/main/frontend/components/plugins.cljs
@@ -149,14 +149,14 @@
      [:span.flex.items-center
       (ui/icon "puzzle")
       (t :plugins) (when (vector? total-nums) (str " (" (first total-nums) ")"))]
-     :intent "logseq"
+     :intent "link"
      :on-click #(on-action :plugins)
      :class (if (= category :plugins) "active" ""))
    (ui/button
      [:span.flex.items-center
       (ui/icon "palette")
       (t :themes) (when (vector? total-nums) (str " (" (last total-nums) ")"))]
-     :intent "logseq"
+     :intent "link"
      :on-click #(on-action :themes)
      :class (if (= category :themes) "active" ""))])
 
@@ -382,7 +382,7 @@
     (t :plugin/contribute)
     :href "https://github.com/logseq/marketplace"
     :class "contribute"
-    :intent "logseq"
+    :intent "link"
     :target "_blank"))
 
 (rum/defc user-proxy-settings-panel
@@ -492,129 +492,129 @@
          (ui/tippy {:html  [:div (t :plugin/unpacked-tips)]
                     :arrow true}
                    (ui/button
-                     [:span.flex.items-center
-                      (ui/icon "upload") (t :plugin/load-unpacked)]
-                     :intent "logseq"
+                    (t :plugin/load-unpacked)
+                    {:icon "upload"
+                     :intent "link"
                      :class "load-unpacked"
-                     :on-click plugin-handler/load-unpacked-plugin))
+                     :on-click plugin-handler/load-unpacked-plugin}))
 
          (unpacked-plugin-loader selected-unpacked-pkg)])]
 
      [:div.flex.items-center.r
       ;; extra info
       (when-let [proxy-val (state/http-proxy-enabled-or-val?)]
         (ui/button
-          [:span.flex.items-center.text-indigo-500
-           (ui/icon "world-download") proxy-val]
-          :small? true
-          :intent "link"
-          :on-click #(state/pub-event! [:go/proxy-settings agent-opts])))
+         [:span.flex.items-center.text-indigo-500
+          (ui/icon "world-download") proxy-val]
+         :small? true
+         :intent "link"
+         :on-click #(state/pub-event! [:go/proxy-settings agent-opts])))
 
       ;; search
       (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
-              :intent "link"))
-
-          (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))
+         (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
+            :intent "link"))
+
+         (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))
 
       (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
-              :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   (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"
+         (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
             :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))}
 
-        (concat (if market?
-                  [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
-                    :options {:on-click #(reload-market-fn)}}]
-                  [{:title   [:span.flex.items-center (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 (ui/icon "world") (t :settings-page/network-proxy)]
-                  :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
-
-                [{:title   [:span.flex.items-center (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 (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.space-x-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}}])
-        {})
+            {: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
+          :intent "link"))
+
+       (concat (if market?
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
+                   :options {:on-click #(reload-market-fn)}}]
+                 [{:title   [:span.flex.items-center (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 (ui/icon "world") (t :settings-page/network-proxy)]
+                 :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
+
+               [{:title   [:span.flex.items-center (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 (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.space-x-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)]]))

diff --git a/src/main/frontend/components/reference.cljs b/src/main/frontend/components/reference.cljs
@@ -23,7 +23,7 @@
 
 (defn filtered-refs
   [page-name filters filters-atom filtered-references]
-  [:div.flex.gap-1.flex-wrap
+  [:div.flex.gap-2.flex-wrap
    (for [[ref-name ref-count] filtered-references]
      (when ref-name
        (let [lc-reference (string/lower-case ref-name)]