Skip to content

Commit

Permalink
enhance(ui): add ghost shui button for the toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@xyhp915
xyhp915 committed Dec 19, 2024
1 parent c75aad8 commit 96fb8da
Show file tree
Hide file tree
Showing 13 changed files with 147 additions and 137 deletions.
18 changes: 16 additions & 2 deletions deps/shui/src/logseq/shui/base/core.cljs
View file
Original file line number Diff line number Diff line change
@@ -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"))
Expand Down Expand Up @@ -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))
4 changes: 4 additions & 0 deletions deps/shui/src/logseq/shui/ui.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 8 additions & 0 deletions packages/ui/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion resources/css/shui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/main/frontend/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
18 changes: 2 additions & 16 deletions src/main/frontend/components/file_sync.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
99 changes: 47 additions & 52 deletions src/main/frontend/components/header.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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]
Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/components/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/main/frontend/components/plugins.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
8 changes: 4 additions & 4 deletions src/main/frontend/components/right_sidebar.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
17 changes: 8 additions & 9 deletions src/main/frontend/components/rtc/indicator.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}])})]]))
93 changes: 46 additions & 47 deletions src/main/frontend/components/server.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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!)}}))})]))
2 changes: 1 addition & 1 deletion src/main/frontend/handler/events.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 96fb8da

Please sign in to comment.