greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance: replace ui/button with shui/button

pull/10493/head
Tienson Qin 2023-11-09 00:36:50 +08:00
parent 018835b700
commit f52e6bf127
11 changed files with 201 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
deps/shui/src/logseq/shui/button/v2.cljs vendored
View File

@ -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

208
src/main/frontend/components/plugins.cljs
View File

@ -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,11 +492,11 @@
(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)])]
@ -504,11 +504,11 @@
;; 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)
@ -516,105 +516,105 @@
;; 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))
(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 "filter")
:class (str (when-not (contains? #{:default} filter-by) "picked ") "sort-or-filter-by")
: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))}}])
(if market?
[{:title (t :plugin/all)
:options {:on-click #(reset! *filter-by :default)}
:icon (ui/icon (aim-icon :default))}
[{: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 (t :plugin/installed)
:options {:on-click #(reset! *filter-by :installed)}
:icon (ui/icon (aim-icon :installed))}
[{: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}}]
{:title (t :plugin/not-installed)
:options {:on-click #(reset! *filter-by :not-installed)}
:icon (ui/icon (aim-icon :not-installed))}]
(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))}}])
[{:title (t :plugin/all)
:options {:on-click #(reset! *filter-by :default)}
:icon (ui/icon (aim-icon :default))}
[{:hr true :key "dropdown-more"}
{:title (auto-check-for-updates-control)
:options {:no-padding? true}}])
{})
{: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"
: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)]]))

2
src/main/frontend/components/reference.cljs
View File

@ -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)]

53
src/main/frontend/components/settings.cljs
View File

@ -41,7 +41,7 @@
(defn toggle
[label-for name state on-toggle & [detail-text]]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for label-for}
name]
@ -151,9 +151,10 @@
:height 500}]]])
(defn row-with-button-action
[{:keys [left-label description action button-label href on-click desc -for stretch]}]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[{:keys [left-label description action button-label href on-click desc -for stretch center?]
:or {center? true}}]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4
{: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
@ -207,7 +208,7 @@
:-for "export_css"}))
(defn show-brackets-row [t show-brackets?]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for "show_brackets"}
(t :settings-page/show-brackets)]
@ -223,7 +224,7 @@
(rum/defcs switch-spell-check-row < rum/reactive
[state t]
(let [enabled? (state/sub [:electron/user-cfgs :spell-check])]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
(t :settings-page/spell-checker)]
[:div
@ -240,7 +241,7 @@
(rum/defcs switch-git-auto-commit-row < rum/reactive
[state t]
(let [enabled? (state/get-git-auto-commit-enabled?)]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
(t :settings-page/git-switcher-label)]
[:div
@ -255,7 +256,7 @@
(rum/defcs git-auto-commit-seconds < rum/reactive
[state t]
(let [secs (or (state/sub [:electron/user-cfgs :git/auto-commit-seconds]) 60)]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
(t :settings-page/git-commit-delay)]
[:div.mt-1.sm:mt-0.sm:col-span-2
@ -347,7 +348,7 @@
:action pick-theme})]))
(defn file-format-row [t preferred-format]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for "preferred_format"}
(t :settings-page/preferred-file-format)]
@ -364,7 +365,7 @@
[:option {:key format :value format} (string/capitalize format)])]]]])
(defn date-format-row [t preferred-date-format]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for "custom_date_format"}
(t :settings-page/custom-date-format)
@ -390,7 +391,7 @@
[:option {:key format} format])]]]])
(defn workflow-row [t preferred-workflow]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for "preferred_workflow"}
(t :settings-page/preferred-workflow)]
@ -512,7 +513,7 @@
;; (config-handler/set-config! :feature/enable-block-timestamps? value)))))
(defn zotero-settings-row []
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for "zotero_settings"}
"Zotero"]
@ -571,15 +572,12 @@
on-toggle #(let [v (not on?)]
(set-on? v)
(storage/set ::storage-spec/lsp-core-enabled v))]
[:div.flex.items-center
[:div.flex.items-center.gap-2
(ui/toggle on? on-toggle true)
(when (not= (boolean value) on?)
[:div.relative.opacity-70
[:span.absolute.whitespace-nowrap
{:style {:top -18 :left 10}}
(ui/button (t :plugin/restart)
:on-click #(js/logseq.api.relaunch)
:small? true :intent "logseq")]])]))
(ui/button (t :plugin/restart)
:on-click #(js/logseq.api.relaunch)
:small? true :intent "logseq"))]))
(rum/defc http-server-enabled-switcher
[t]
@ -588,15 +586,12 @@
on-toggle #(let [v (not on?)]
(set-on? v)
(storage/set ::storage-spec/http-server-enabled v))]
[:div.flex.items-center
[:div.flex.items-center.gap-2
(ui/toggle on? on-toggle true)
(when (not= (boolean value) on?)
[:div.relative.opacity-70
[:span.absolute.whitespace-nowrap
{:style {:top -18 :left 10}}
(ui/button (t :plugin/restart)
:on-click #(js/logseq.api.relaunch)
:small? true :intent "logseq")]])]))
(ui/button (t :plugin/restart)
:on-click #(js/logseq.api.relaunch)
:small? true :intent "logseq"))]))
(rum/defc flashcards-enabled-switcher
[enable-flashcards?]
@ -1018,7 +1013,7 @@
[:div.panel-wrap.is-features.mb-8
(journal-row enable-journals?)
(when (not enable-journals?)
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.block.text-sm.font-medium.leading-5.opacity-70
{:for "default page"}
(t :settings-page/home-default-page)]
@ -1056,7 +1051,7 @@
(when-not web-platform?
[:<>
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
[:label.flex.font-medium.leading-5.self-start.mt-1
(ui/icon (if logged-in? "lock-open" "lock") {:class "mr-1"}) (t :settings-page/beta-features)]]
[:div.flex.flex-col.gap-4
@ -1074,7 +1069,7 @@
;; (when-not web-platform?
;; [:<>
;; [:hr]
;; [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
;; [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
;; [:label.flex.font-medium.leading-5.self-start.mt-1 (ui/icon (if logged-in? "lock-open" "lock") {:class "mr-1"}) (t :settings-page/alpha-features)]]
;; [:div.flex.flex-col.gap-4
;; {:class (when-not user-handler/alpha-user? "opacity-50 pointer-events-none cursor-not-allowed")}

1
src/main/frontend/components/settings.css
View File

@ -106,7 +106,6 @@
margin-bottom: 0;
padding-bottom: 12px;
align-items: start;
label {
min-height: 28px;

13
src/main/frontend/components/whiteboard.cljs
View File

@ -217,19 +217,16 @@
(str " · " total-whiteboards)]]
[:div.flex-1]
(when has-checked?
[:button.ui__button.m-0.py-1.inline-flex.items-center.bg-red-800
{:on-click
(ui/button
(count checked-page-names)
{:icon "trash"
:on-click
(fn []
(state/set-modal! (page/batch-delete-dialog
(map (fn [name]
(some (fn [w] (when (= (:block/name w) name) w)) whiteboards))
checked-page-names)
false route-handler/redirect-to-whiteboard-dashboard!)))}
[:span.flex.gap-2.items-center
[:span.opacity-50 (ui/icon "trash" {:style {:font-size 15}})]
(t :delete)
[:span.opacity-50
(str " · " (count checked-page-names))]]])]
false route-handler/redirect-to-whiteboard-dashboard!)))}))]
[:div
{:ref ref}
[:div.gap-8.grid.grid-rows-auto

2
src/main/frontend/extensions/pdf/pdf.css
View File

@ -375,8 +375,6 @@ input::-webkit-inner-spin-button {
.ui__button {
margin-top: unset;
border-radius: 4px;
color: black;
padding: 4px;
.ti {

30
src/main/frontend/extensions/pdf/toolbar.cljs
View File

@ -244,14 +244,30 @@
:dune))}]
(when entered-active0?
(ui/button (ui/icon "arrow-back") :title "Enter to search" :class "icon-enter" :intent "true" :small? true))]
(ui/button {:icon "arrow-back"
:intent "link"
:title "Enter to search"
:class "icon-enter"
:small? true}))]
(ui/button (ui/icon "letter-case")
:class (string/join " " (util/classnames [{:active case-sensitive?}]))
:intent "true" :small? true :on-click #(set-case-sensitive? (not case-sensitive?)))
(ui/button (ui/icon "chevron-up") :intent "true" :small? true :on-click #(do (do-find! {:type :again :prev? true}) (util/stop %)))
(ui/button (ui/icon "chevron-down") :intent "true" :small? true :on-click #(do (do-find! {:type :again}) (util/stop %)))
(ui/button (ui/icon "x") :intent "true" :small? true :on-click close-finder!)]
(ui/button {:icon "letter-case"
:intent "link"
:class (string/join " " (util/classnames [{:active case-sensitive?}]))
:small? true :on-click #(set-case-sensitive? (not case-sensitive?))})
(ui/button {:icon "chevron-up"
:intent "link"
:small? true :on-click #(do (do-find! {:type :again :prev? true}) (util/stop %))})
(ui/button
{:icon "chevron-down"
:intent "link"
:small? true :on-click #(do (do-find! {:type :again}) (util/stop %))})
(ui/button
{:icon "x"
:intent "link"
:small? true :on-click close-finder!})]
[:div.result-inner
(when-let [status (and entered-active?

4
src/main/frontend/handler/events.cljs
View File

@ -626,8 +626,7 @@
(t :yes)
:autoFocus "on"
:class "ui__modal-enter"
:large? true
:on-click (fn []
:on-click (fn []
(state/close-modal!)
(nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]]))
@ -676,7 +675,6 @@
(t :yes)
:autoFocus "on"
:class "ui__modal-enter"
:large? true
:on-click (fn []
(state/close-modal!)
(state/pub-event! [:graph/re-index])))]])))

74
src/main/frontend/ui.cljs
View File

@ -34,7 +34,9 @@
[lambdaisland.glogi :as log]
[medley.core :as medley]
[promesa.core :as p]
[rum.core :as rum]))
[rum.core :as rum]
[logseq.shui.core :as shui]
[frontend.shui :refer [make-shui-context]]))
(declare icon)
@ -1010,56 +1012,38 @@
:options {:theme (when (= (state/sub :ui/theme) "dark") "dark")}
:on-tweet-load-success #(reset! *loading? false)})]]))
(def get-adapt-icon-class
(memoize (fn [klass] (r/adapt-class klass))))
(defn tabler-icon
[name]
(gobj/get js/tablerIcons (str "Icon" (csk/->PascalCase name))))
(rum/defc icon
([name] (icon name nil))
([name {:keys [extension? font? class] :as opts}]
(when-not (string/blank? name)
(let [^js jsTablerIcons (gobj/get js/window "tablerIcons")]
(if (or extension? font? (not jsTablerIcons))
[:span.ui__icon (merge {:class
(util/format
(str "%s-" name
(when (:class opts)
(str " " (string/trim (:class opts)))))
(if extension? "tie tie" "ti ti"))}
(dissoc opts :class :extension? :font?))]
(def icon shui/icon)
;; tabler svg react
(when-let [klass (tabler-icon name)]
(let [f (get-adapt-icon-class klass)]
[:span.ui__icon.ti
{:class (str "ls-icon-" name " " class)}
(f (merge {:size 18} (r/map-keys->camel-case (dissoc opts :class))))])))))))
(rum/defc button-inner
[text & {:keys [background href class intent on-click small? title icon icon-props disabled?]
:or {small? false}}]
(let [opts {:text text
:theme (when (contains? #{"link" "border-link"} intent) :text)
:href href
:on-click on-click
:size (if small? :sm :md)
:icon icon
:icon-props icon-props
:button-props (when title {:title title})
:class (if (= intent "border-link") (str class " border") class)
:muted disabled?
:disabled? disabled?}]
(shui/button (cond->
opts
background
(assoc :color background))
(make-shui-context))))
(rum/defc button
[text & {:keys [background href class intent on-click small? large? title icon icon-props disabled?]
:or {small? false large? false}
:as option}]
(let [klass (if-not intent ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700.text-center" intent)
klass (if background (string/replace klass "indigo" background) klass)
klass (if small? (str klass ".is-small") klass)
klass (if large? (str klass ".text-base") klass)
klass (if disabled? (str klass "disabled:opacity-75") klass)]
[:button.ui__button
(merge
{:type "button"
:title title
:disabled disabled?
:class (str (util/hiccup->class klass) " " class)}
(dissoc option :background :class :small? :large? :disabled?)
(when href
{:on-click (fn []
(util/open-url href)
(when (fn? on-click) (on-click)))}))
(when icon (frontend.ui/icon icon (merge icon-props {:class (when-not (empty? text) "mr-1")})))
text]))
(defn button
[text & {:keys []
:as opts}]
(if (map? text)
(button-inner nil text)
(button-inner text opts)))
(rum/defc point
([] (point "bg-red-600" 5 nil))

56
src/main/frontend/ui.css
View File

@ -275,62 +275,6 @@ html.is-mobile {
}
}
.ui__button {
@apply inline-flex items-center px-3 py-2 border border-transparent
text-sm leading-4 font-medium rounded-[6px] text-white
focus:outline-none transition ease-in-out duration-150;
/* background-color: or(--lx-accent-04, --color-indigo-600); */
/* color: or(--lx-accent-11, white); */
background-color: or(--logseq-og-button-background-color, --lx-accent-07, --color-indigo-600);
color: or(--logseq-og-button-text-color, --lx-accent-12, white);
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:hover:not([disabled]) {
/* opacity: or(--lx-accent-01, 0.8); */
opacity: 1;
background-color: or(--logseq-og-button-background-color-hover, --lx-accent-06, --color-indigo-700);
}
&.is-link {
@apply text-white;
}
&[intent='logseq'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: or(--logseq-og-notification-clear-button-text, --lx-gray-12, --ls-primary-text-color);
background: or(--logseq-og-notification-clear-button-background, --lx-gray-04, --ls-secondary-background-color);
&:hover {
color: or(--logseq-og-notification-clear-button-text-hover, --lx-accent-11, --ls-link-text-color);
}
}
&[intent='link'], &[intent='border-link'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: or(--logseq-og-link-text-color, --lx-gray-12, --ls-primary-text-color);
background: transparent;
&:hover {
color: or(--logseq-og-link-text-color-hover, --lx-accent-11, --ls-link-text-color);
}
}
&[intent='border-link'] {
border: 1px solid;
}
&.is-small {
@apply px-2.5 py-1;
}
}
.dropdown-wrapper {
background-color: or(--logseq-og-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
border: 1px solid or(--logseq-og-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);