From 96fb8da599fbffac289b4183aec4f47dd426e828 Mon Sep 17 00:00:00 2001 From: charlie Date: Thu, 19 Dec 2024 17:51:33 +0800 Subject: [PATCH] enhance(ui): add ghost shui button for the toolbar --- deps/shui/src/logseq/shui/base/core.cljs | 18 +++- deps/shui/src/logseq/shui/ui.cljs | 4 + packages/ui/src/index.css | 8 ++ resources/css/shui.css | 3 +- src/main/frontend/common.css | 4 + src/main/frontend/components/file_sync.css | 18 +--- src/main/frontend/components/header.cljs | 99 +++++++++---------- src/main/frontend/components/header.css | 2 +- src/main/frontend/components/plugins.cljs | 8 +- .../frontend/components/right_sidebar.cljs | 8 +- .../frontend/components/rtc/indicator.cljs | 17 ++-- src/main/frontend/components/server.cljs | 93 +++++++++-------- src/main/frontend/handler/events.cljs | 2 +- 13 files changed, 147 insertions(+), 137 deletions(-) diff --git a/deps/shui/src/logseq/shui/base/core.cljs b/deps/shui/src/logseq/shui/base/core.cljs index 73251be1df3..2f052758acc 100644 --- a/deps/shui/src/logseq/shui/base/core.cljs +++ b/deps/shui/src/logseq/shui/base/core.cljs @@ -1,7 +1,7 @@ (ns logseq.shui.base.core (:require [logseq.shui.util :as util] - [cljs-bean.core :as bean] - [rum.core :as rum])) + [logseq.shui.icon.v2 :as tabler-icon] + [cljs-bean.core :as bean])) (def button-base (util/lsui-wrap "Button" {:static? false})) (def link (util/lsui-wrap "Link")) @@ -48,3 +48,17 @@ (when (= "Enter" (.-key e)) (some-> (.-target e) (.click)))))] (apply button-base props children))) + +(defn button-icon + [variant icon-name {:keys [icon-props size] :as props} child] + + (button (merge (dissoc props :icon-props :size) + {:variant variant + :data-button :icon + :style (when size {:width size :height size})}) + [:<> + (tabler-icon/root (name icon-name) (merge {:size 20} icon-props)) child])) + +(def button-ghost-icon (partial button-icon :ghost)) +(def button-outline-icon (partial button-icon :outline)) +(def button-secondary-icon (partial button-icon :secondary)) diff --git a/deps/shui/src/logseq/shui/ui.cljs b/deps/shui/src/logseq/shui/ui.cljs index 3ef4c22e812..70eb46e29ae 100644 --- a/deps/shui/src/logseq/shui/ui.cljs +++ b/deps/shui/src/logseq/shui/ui.cljs @@ -12,6 +12,10 @@ [logseq.shui.table.core :as table-core])) (def button base-core/button) +(def button-icon base-core/button-icon) +(def button-ghost-icon base-core/button-ghost-icon) +(def button-outline-icon base-core/button-outline-icon) +(def button-secondary-icon base-core/button-secondary-icon) (def link base-core/link) (def trigger-as base-core/trigger-as) (def trigger-child-wrap base-core/trigger-child-wrap) diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 47f9802c0d8..dca2816cca1 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -114,6 +114,14 @@ --accent: var(--rx-gray-02-hsl); --accent-foreground: var(--rx-gray-12-hsl); } + + &[data-button="icon"] { + @apply box-content p-1 overflow-hidden h-6 w-6; + + &.as-ghost:hover { + background: var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03))); + } + } } .ui__toaster { diff --git a/resources/css/shui.css b/resources/css/shui.css index cb99309cef1..d490799e9d1 100644 --- a/resources/css/shui.css +++ b/resources/css/shui.css @@ -205,7 +205,8 @@ html[data-theme=dark] { } .cp__header { - > .r > div:not(.ui__dropdown-trigger) a.button, button.button { + > .r > div:not(.ui__dropdown-trigger) a.button, button.button, + .ui__button.as-ghost { @apply opacity-60 hover:opacity-90; } } diff --git a/src/main/frontend/common.css b/src/main/frontend/common.css index dcccbdf66af..961ea86f9d5 100644 --- a/src/main/frontend/common.css +++ b/src/main/frontend/common.css @@ -555,6 +555,10 @@ a.fade-link:hover { height: 20px; } +#head div[data-tooltipped] { + display: flex !important; +} + .svg-small svg { transform: scale(0.6); display: inline; diff --git a/src/main/frontend/components/file_sync.css b/src/main/frontend/components/file_sync.css index 4a9c03904bf..68e32878308 100644 --- a/src/main/frontend/components/file_sync.css +++ b/src/main/frontend/components/file_sync.css @@ -6,22 +6,8 @@ .cp__file-sync, .cp__rtc-sync { &-indicator { - a.cloud { - position: relative; - opacity: 1 !important; - cursor: pointer; - - &:active { - opacity: .5 !important; - } - - .ti { - opacity: .5; - } - - &:hover .ti { - opacity: .9; - } + .ui__button.cloud { + @apply relative; &.on { &:after { diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs index 78c70b58e6b..0547479ccf2 100644 --- a/src/main/frontend/components/header.cljs +++ b/src/main/frontend/components/header.cljs @@ -39,14 +39,12 @@ (rum/defc home-button < {:key-fn #(identity "home-button")} [] - (ui/with-shortcut :go/home "left" - [:button.button.icon.inline.mx-1 - {:title (t :home) - :on-click #(do - (when (mobile-util/native-iphone?) - (state/set-left-sidebar-open! false)) - (route-handler/redirect-to-home!))} - (ui/icon "home" {:size ui/icon-size})])) + (shui/button-ghost-icon :home + {:title (t :home) + :on-click #(do + (when (mobile-util/native-iphone?) + (state/set-left-sidebar-open! false)) + (route-handler/redirect-to-home!))})) (rum/defcs rtc-collaborators < rum/reactive @@ -68,16 +66,13 @@ online-users @(::online-users state)] (when rtc-graph-id [:div.rtc-collaborators.flex.gap-1.text-sm.py-2.bg-gray-01.items-center - (shui/button - {:variant :ghost - :size :sm - :class "px-2 opacity-50 hover:opacity-100" - :on-click #(shui/dialog-open! + (shui/button-ghost-icon :user-plus + {:on-click #(shui/dialog-open! (fn [] [:div.p-2.-mb-8 [:h1.text-3xl.-mt-2.-ml-2 "Collaborators:"] - (settings/settings-collaboration)]))} - (shui/tabler-icon "user-plus")) + (settings/settings-collaboration)]))}) + (when (seq online-users) (for [{user-email :user/email user-name :user/name @@ -190,51 +185,51 @@ :class "w-full"}})] (concat page-menu-and-hr) (remove nil?)))] - [:button#dots-menu.button.icon.toolbar-dots-btn - {:title (t :header/more) - :on-pointer-down (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) - href (:href 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 - (if href - [:a.flex.items-center.w-full - {:href href :on-click #(shui/popup-hide! id) - :style {:color "inherit"}} - [:span.flex.items-center.gap-1.w-full - icon [:div title]]] - [:span.flex.items-center.gap-1.w-full - icon [:div title]]))))))) - {:align "end" - :as-dropdown? true - :content-props {:class "w-64" - :align-offset -32}}))} - (ui/icon "dots" {:size ui/icon-size})])) + + (shui/button-ghost-icon :dots + {:title (t :header/more) + :class "toolbar-dots-btn" + :on-pointer-down (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) + href (:href 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 + (if href + [:a.flex.items-center.w-full + {:href href :on-click #(shui/popup-hide! id) + :style {:color "inherit"}} + [:span.flex.items-center.gap-1.w-full + icon [:div title]]] + [:span.flex.items-center.gap-1.w-full + icon [:div title]]))))))) + {:align "end" + :as-dropdown? true + :content-props {:class "w-64" + :align-offset -32}}))}))) (rum/defc back-and-forward < {:key-fn #(identity "nav-history-buttons")} [] [:div.flex.flex-row - (ui/with-shortcut :go/backward "bottom" - [:button.it.navigation.nav-left.button.icon - {:title (t :header/go-back) :on-click #(js/window.history.back)} - (ui/icon "arrow-left" {:size ui/icon-size})]) + (shui/button-ghost-icon :arrow-left + {:title (t :header/go-back) :on-click #(js/window.history.back) + :class "it navigation nav-left"})) (ui/with-shortcut :go/forward "bottom" - [:button.it.navigation.nav-right.button.icon - {:title (t :header/go-forward) :on-click #(js/window.history.forward)} - (ui/icon "arrow-right" {:size ui/icon-size})])]) + (shui/button-ghost-icon :arrow-right + {:title (t :header/go-forward) :on-click #(js/window.history.forward) + :class "it navigation nav-right"}))]) (rum/defc updater-tips-new-version [t] diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css index eb1f315ea0f..895c9020184 100644 --- a/src/main/frontend/components/header.css +++ b/src/main/frontend/components/header.css @@ -177,7 +177,7 @@ &:hover { @screen md { - background: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04))); + background: var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03))); } } } diff --git a/src/main/frontend/components/plugins.cljs b/src/main/frontend/components/plugins.cljs index f7571ad5e24..9541fcc709b 100644 --- a/src/main/frontend/components/plugins.cljs +++ b/src/main/frontend/components/plugins.cljs @@ -1101,10 +1101,10 @@ {: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}}))]])) + (shui/button-ghost-icon :puzzle + {:class "flex relative toolbar-plugins-manager-trigger"} + (when badge-updates? + (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] diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs index cfead54879e..43ccce73c56 100644 --- a/src/main/frontend/components/right_sidebar.cljs +++ b/src/main/frontend/components/right_sidebar.cljs @@ -28,10 +28,10 @@ [] (when-not (util/sm-breakpoint?) (ui/with-shortcut :ui/toggle-right-sidebar "left" - [:button.button.icon.toggle-right-sidebar - {:title (t :right-side-bar/toggle-right-sidebar) - :on-click ui-handler/toggle-right-sidebar!} - (ui/icon "layout-sidebar-right" {:size 20})]))) + (shui/button-ghost-icon :layout-sidebar-right + {:title (t :right-side-bar/toggle-right-sidebar) + :class "toggle-right-sidebar" + :on-click ui-handler/toggle-right-sidebar!})))) (rum/defc block-cp < rum/reactive [repo idx block] diff --git a/src/main/frontend/components/rtc/indicator.cljs b/src/main/frontend/components/rtc/indicator.cljs index 317d7f62697..7825cfc4daf 100644 --- a/src/main/frontend/components/rtc/indicator.cljs +++ b/src/main/frontend/components/rtc/indicator.cljs @@ -169,12 +169,11 @@ :variant :ghost :size :sm} "Uploading...")) - [:a.button.cloud - {:on-click #(shui/popup-show! (.-target %) - (details online?) - {:align "end"}) - :class (util/classnames [{:on (and online? (= :open rtc-state)) - :idle (and online? (= :open rtc-state) (zero? unpushed-block-update-count)) - :queuing (pos? unpushed-block-update-count)}])} - [:span.flex.items-center - (ui/icon "cloud" {:size ui/icon-size})]]]])) + (shui/button-ghost-icon :cloud + {:on-click #(shui/popup-show! (.-target %) + (details online?) + {:align "end"}) + :class (util/classnames [{:cloud true + :on (and online? (= :open rtc-state)) + :idle (and online? (= :open rtc-state) (zero? unpushed-block-update-count)) + :queuing (pos? unpushed-block-update-count)}])})]])) diff --git a/src/main/frontend/components/server.cljs b/src/main/frontend/components/server.cljs index bbe149b7526..6cbe2f0a6d1 100644 --- a/src/main/frontend/components/server.cljs +++ b/src/main/frontend/components/server.cljs @@ -144,50 +144,49 @@ [error]) [:div.cp__server-indicator - [:button.button.icon - {:on-click (fn [^js e] - (shui/popup-show! - (.-target e) - (fn [{:keys [_close]}] - (let [items [{:hr? true} - - (cond - running? - {:title "Stop server" - :options {:on-click #(ipc/ipc :server/do :stop)} - :icon [:span.text-red-500.flex.items-center (ui/icon "player-stop")]} - - :else - {:title "Start server" - :options {:on-click #(ipc/ipc :server/do :restart)} - :icon [:span.text-green-500.flex.items-center (ui/icon "player-play")]}) - - {:title "Authorization tokens" - :options {:on-click #(shui/dialog-open! - (fn [] - (panel-of-tokens shui/dialog-close!)))} - :icon (ui/icon "key")} - - {:title "Server configurations" - :options {:on-click #(shui/dialog-open! - (fn [] - (panel-of-configs shui/dialog-close!)))} - :icon (ui/icon "server-cog")}]] - - (cons - [:div.links-header.flex.justify-center.py-2 - [:span.ml-1.text-sm.opacity-70 - (if-not running? - (string/upper-case (or (:status server-state) "stopped")) - [:a.hover:underline {:href href} href])]] - (for [{:keys [hr? title options icon]} items] - (cond - hr? - (shui/dropdown-menu-separator) - - :else - (shui/dropdown-menu-item options - [:span.flex.items-center icon [:span.pl-1 title]])))))) - {:as-dropdown? true - :content-props {:onClick #(shui/popup-hide!)}}))} - (ui/icon (if running? "api" "api-off") {:size 22})]])) + (shui/button-ghost-icon (if running? "api" "api-off") + {:on-click (fn [^js e] + (shui/popup-show! + (.-target e) + (fn [{:keys [_close]}] + (let [items [{:hr? true} + + (cond + running? + {:title "Stop server" + :options {:on-click #(ipc/ipc :server/do :stop)} + :icon [:span.text-red-500.flex.items-center (ui/icon "player-stop")]} + + :else + {:title "Start server" + :options {:on-click #(ipc/ipc :server/do :restart)} + :icon [:span.text-green-500.flex.items-center (ui/icon "player-play")]}) + + {:title "Authorization tokens" + :options {:on-click #(shui/dialog-open! + (fn [] + (panel-of-tokens shui/dialog-close!)))} + :icon (ui/icon "key")} + + {:title "Server configurations" + :options {:on-click #(shui/dialog-open! + (fn [] + (panel-of-configs shui/dialog-close!)))} + :icon (ui/icon "server-cog")}]] + + (cons + [:div.links-header.flex.justify-center.py-2 + [:span.ml-1.text-sm.opacity-70 + (if-not running? + (string/upper-case (or (:status server-state) "stopped")) + [:a.hover:underline {:href href} href])]] + (for [{:keys [hr? title options icon]} items] + (cond + hr? + (shui/dropdown-menu-separator) + + :else + (shui/dropdown-menu-item options + [:span.flex.items-center icon [:span.pl-1 title]])))))) + {:as-dropdown? true + :content-props {:onClick #(shui/popup-hide!)}}))})])) diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs index 5aae3cbc4ae..8e020045a27 100644 --- a/src/main/frontend/handler/events.cljs +++ b/src/main/frontend/handler/events.cljs @@ -314,7 +314,7 @@ (if (gdom/getElement popup-id) (shui/popup-hide! popup-id) (shui/popup-show! - (gdom/getElement "dots-menu") + (js/document.querySelector ".toolbar-dots-btn") (fn [] (settings/appearance)) {:id popup-id