enhance(ui): add ghost shui button for the toolbar

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

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)

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 {

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;
       }
     }

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;

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 {

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]

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)));
     }
   }
 }

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]

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]

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

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!)}}))})]))

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