mirror of
https://github.com/logseq/logseq.git
synced 2026-04-24 14:14:55 +00:00
enhance(ui): add ghost shui button for the toolbar
This commit is contained in:
charlie
18
deps/shui/src/logseq/shui/base/core.cljs
vendored
18
deps/shui/src/logseq/shui/base/core.cljs
vendored
@@ -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))
|
||||
|
||||
4
deps/shui/src/logseq/shui/ui.cljs
vendored
4
deps/shui/src/logseq/shui/ui.cljs
vendored
@@ -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)
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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)}])})]]))
|
||||
|
||||
@@ -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}
|
||||
(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")]}
|
||||
(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")]})
|
||||
: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 "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")}]]
|
||||
{: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)
|
||||
(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})]]))
|
||||
:else
|
||||
(shui/dropdown-menu-item options
|
||||
[:span.flex.items-center icon [:span.pl-1 title]]))))))
|
||||
{:as-dropdown? true
|
||||
:content-props {:onClick #(shui/popup-hide!)}}))})]))
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user