From 8626710a2f2305e9c87ca05e11f6fa44822a921d Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 3 Jun 2024 16:59:33 +0800 Subject: [PATCH] fix: use the new popover instead of custom dropdown for whiteboards --- src/main/frontend/components/page.cljs | 5 +- src/main/frontend/components/page.css | 4 + src/main/frontend/components/whiteboard.cljs | 110 ++++--------------- src/main/frontend/components/whiteboard.css | 11 +- src/main/frontend/ui.css | 4 +- 5 files changed, 32 insertions(+), 102 deletions(-) diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index aa1057121..f2bb5cc50 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -287,12 +287,11 @@ (page-handler/rename! (:block/uuid page) @*title-value) (js/setTimeout #(reset! *edit? false) 100))) (util/stop e))] - [:input.edit-input.p-0.focus:outline-none.ring-none + [:input.edit-input.p-0.outline-none.focus:outline-none.no-ring {:type "text" :ref input-ref :auto-focus true - :style {:outline "none" - :width "100%" + :style {:width "100%" :font-weight "inherit"} :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here :value (rum/react *input-value) diff --git a/src/main/frontend/components/page.css b/src/main/frontend/components/page.css index fc734ad98..f1223372c 100644 --- a/src/main/frontend/components/page.css +++ b/src/main/frontend/components/page.css @@ -421,3 +421,7 @@ html.is-native-ios { .info-title a.tag:hover, .multi-values a.tag:hover { text-decoration: none; } + +.no-ring { + @apply focus:ring-0 focus:ring-offset-0; +} diff --git a/src/main/frontend/components/whiteboard.cljs b/src/main/frontend/components/whiteboard.cljs index c544a2798..afb2ce7b8 100644 --- a/src/main/frontend/components/whiteboard.cljs +++ b/src/main/frontend/components/whiteboard.cljs @@ -10,8 +10,7 @@ [frontend.handler.route :as route-handler] [frontend.handler.whiteboard :as whiteboard-handler] [frontend.modules.shortcut.core :as shortcut] - [frontend.rum :refer [use-bounding-client-rect use-breakpoint - use-click-outside]] + [frontend.rum :refer [use-bounding-client-rect use-breakpoint]] [frontend.state :as state] [frontend.ui :as ui] [frontend.util :as util] @@ -21,7 +20,8 @@ [frontend.config :as config] [frontend.db.async :as db-async] [logseq.common.util :as common-util] - [frontend.db :as db])) + [frontend.db :as db] + [logseq.shui.ui :as shui])) (defonce tldraw-loaded? (atom false)) (rum/defc tldraw-app < rum/reactive @@ -52,90 +52,33 @@ (when (and generate-preview (not (state/sub-async-query-loading page-uuid))) (generate-preview tldr))))) -;; TODO: use frontend.ui instead of making a new one -(rum/defc dropdown - [label children show? outside-click-handler portal?] - (let [[anchor-ref anchor-rect] (use-bounding-client-rect show?) - [content-ref content-rect] (use-bounding-client-rect show?) - offset-x (when (and anchor-rect content-rect) - (if portal? - (let [offset-x (+ (* 0.5 (- (.-width anchor-rect) (.-width content-rect))) - (.-x anchor-rect)) - vp-w (.-innerWidth js/window) - right (+ offset-x (.-width content-rect) 16) - offset-x (if (> right vp-w) (- offset-x (- right vp-w)) offset-x)] - offset-x) - (* 0.5 (- (.-width anchor-rect) (.-width content-rect))))) - offset-y (when (and anchor-rect content-rect) - (+ (.-y anchor-rect) (.-height anchor-rect) 8)) - click-outside-ref (use-click-outside outside-click-handler) - [d-open set-d-open] (rum/use-state false) - _ (rum/use-effect! (fn [] (js/setTimeout #(set-d-open show?) 100)) - [show?])] - [:div.inline-block.dropdown-anchor {:ref anchor-ref} - label - (if portal? - ;; FIXME: refactor the following code ... - (ui/portal - [:div.fixed.shadow-lg.color-level.px-2.rounded-lg.transition.md:w-64.lg:w-128.overflow-auto - {:ref (juxt content-ref click-outside-ref) - :style {:opacity (if d-open 1 0) - :pointer-events (if d-open "auto" "none") - :transform (str "translateY(" (if d-open 0 10) "px)") - :min-height "40px" - :max-height "420px" - :left offset-x - :top offset-y}} - (when d-open children)]) - [:div.absolute.shadow-lg.color-level.px-2.rounded-lg.transition.md:w-64.lg:w-128.overflow-auto - {:ref (juxt content-ref click-outside-ref) - :style {:opacity (if d-open 1 0) - :pointer-events (if d-open "auto" "none") - :transform (str "translateY(" (if d-open 0 10) "px)") - :min-height "40px" - :max-height "420px" - :left offset-x}} - (when d-open children)])])) - -(rum/defc dropdown-menu - [{:keys [label children classname hover? portal?]}] - (let [[open-flag set-open-flag] (rum/use-state 0) - open? (> open-flag (if hover? 0 1)) - d-open-flag (rum/use-memo #(util/debounce 200 set-open-flag) [])] - (dropdown - [:div {:class (str classname (when open? " open")) - :on-mouse-enter (fn [] (d-open-flag #(if (= % 0) 1 %))) - :on-mouse-leave (fn [] (d-open-flag #(if (= % 2) % 0))) - :on-click (fn [e] - (util/stop e) - (d-open-flag (fn [o] (if (not= o 2) 2 0))))} - (if (fn? label) (label open?) label)] - children open? #(set-open-flag 0) portal?))) - ;; TODO: move to frontend.components.reference -(rum/defc references-count < rum/reactive db-mixins/query +(rum/defcs references-count < rum/reactive db-mixins/query + (rum/local false ::open?) "Shows a references count for any block or page. When clicked, a dropdown menu will show the reference details" - ([page-name-or-uuid classname] + ([state page-name-or-uuid classname] (references-count page-name-or-uuid classname nil)) - ([page-name-or-uuid classname {:keys [render-fn - hover? - portal?] - :or {portal? true}}] + ([state page-name-or-uuid classname _opts] (when page-name-or-uuid - (let [page-entity (model/get-page page-name-or-uuid) + (let [*open? (::open? state) + page-entity (model/get-page page-name-or-uuid) page (model/sub-block (:db/id page-entity)) block-uuid (:block/uuid page-entity) refs-count (count (:block/_refs page))] (when (> refs-count 0) - (dropdown-menu {:classname classname - :label (fn [open?] - [:div.inline-flex.items-center.gap-2 - [:div.open-page-ref-link refs-count] - (when render-fn (render-fn open? refs-count))]) - :hover? hover? - :portal? portal? - :children (reference/block-linked-references block-uuid)})))))) + (shui/popover + {:open @*open? + :on-open-change (fn [o] (reset! *open? o))} + (shui/popover-trigger + {} + (shui/button {:variant :ghost :size :sm + :class "opacity-75 hover:opacity-100"} + refs-count)) + (shui/popover-content + {:on-open-auto-focus #(.preventDefault %)} + [:div {:class classname} + (reference/block-linked-references block-uuid)]))))))) ;; This is not accurate yet (defn- get-page-human-update-time @@ -171,7 +114,7 @@ [:div.flex.w-full.opacity-50 [:div (get-page-human-update-time whiteboard)] [:div.flex-1] - (references-count (:block/uuid whiteboard) nil {:hover? true})]] + (references-count (:block/uuid whiteboard) nil {})]] (ui/lazy-visible (fn [] [:div.p-4.h-64.flex.justify-center (tldraw-preview (:block/uuid whiteboard))]))]) @@ -262,14 +205,7 @@ :user-select "none"}} (page/page-title page {:*hover? (atom false)})] - [:div.whiteboard-page-refs - (references-count (:block/uuid page) - "text-md px-3 py-2 cursor-default whiteboard-page-refs-count" - {:hover? true - :render-fn (fn [open? refs-count] [:span.whiteboard-page-refs-count-label - (t :whiteboard/reference-count refs-count) - (ui/icon (if open? "references-hide" "references-show") - {:extension? true})])})]] + (references-count (:block/uuid page) "text-md cursor-pointer" {})] (tldraw-app page-uuid block-id)])) (rum/defc whiteboard-route < diff --git a/src/main/frontend/components/whiteboard.css b/src/main/frontend/components/whiteboard.css index face932ea..4669d7628 100644 --- a/src/main/frontend/components/whiteboard.css +++ b/src/main/frontend/components/whiteboard.css @@ -144,14 +144,12 @@ input.tl-text-input { } .whiteboard-page-title-root { - @apply shadow-md flex items-center; + @apply shadow-md flex items-center gap-1; position: absolute; left: 2.5rem; top: 0; - padding: 4px; border-radius: 0 0 12px 12px; z-index: 2000; - gap: 4px; line-height: 1.4; background: var(--lx-gray-01, var(--ls-primary-background-color, hsl(var(--background)))); } @@ -175,7 +173,7 @@ input.tl-text-input { .ls-page-title { @apply p-0 m-0; - + .page-title { font-size: 16px; } @@ -190,11 +188,6 @@ input.tl-text-input { background-color: var(--ls-tertiary-background-color); } -.whiteboard-page-title:focus-within { - border: 1px solid var(--ls-border-color); - box-shadow: 0 0 0 4px var(--ls-focus-ring-color); -} - .whiteboard-page-refs-count-label { @apply flex gap-1 items-center; } diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css index 5b0282f88..74bf37166 100644 --- a/src/main/frontend/ui.css +++ b/src/main/frontend/ui.css @@ -314,8 +314,6 @@ html.is-mobile { .form-input { @apply block w-full mt-1 pl-2 sm:text-sm sm:leading-5 rounded bg-background border border-gray-07; - @apply focus:border-input focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-offset-2; - @apply focus-visible:ring-2 ring-offset-background; &.is-small { @apply py-1.5 sm:leading-4 sm:text-xs; @@ -374,4 +372,4 @@ html.is-mobile { input[type='range'] { accent-color: var(--lx-accent-10, var(--rx-blue-10)); -} \ No newline at end of file +}