greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: use the new popover instead of custom dropdown for whiteboards

experiment/tanstack-table
Tienson Qin 2024-06-03 16:59:33 +08:00
parent 662679fae7
commit 8626710a2f
5 changed files with 32 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/frontend/components/page.cljs
View File

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

4
src/main/frontend/components/page.css
View File

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

110
src/main/frontend/components/whiteboard.cljs
View File

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

11
src/main/frontend/components/whiteboard.css
View File

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

4
src/main/frontend/ui.css
View File

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