mirror of https://github.com/logseq/logseq
fix: use the new popover instead of custom dropdown for whiteboards
parent
662679fae7
commit
8626710a2f
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 <
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue