mirror of https://github.com/logseq/logseq
fix(whiteboard): toolbar positioning in small screens
Peng Xiao
Tienson Qin
parent
2dfac3d774
commit
ebb18ca629
|
|
@ -8,7 +8,7 @@
|
|||
[frontend.handler.route :as route-handler]
|
||||
[frontend.handler.user :as user-handler]
|
||||
[frontend.handler.whiteboard :as whiteboard-handler]
|
||||
[frontend.rum :refer [use-bounding-client-rect use-click-outside]]
|
||||
[frontend.rum :refer [use-bounding-client-rect use-click-outside use-breakpoint]]
|
||||
[frontend.state :as state]
|
||||
[frontend.ui :as ui]
|
||||
[frontend.util :as util]
|
||||
|
|
@ -207,39 +207,44 @@
|
|||
:checked (boolean (checked-page-names whiteboard-name))
|
||||
:on-checked-change (fn [checked]
|
||||
(set-checked-page-names (if checked
|
||||
(conj checked-page-names whiteboard-name)
|
||||
(disj checked-page-names whiteboard-name))))})])
|
||||
(conj checked-page-names whiteboard-name)
|
||||
(disj checked-page-names whiteboard-name))))})])
|
||||
(for [n (range empty-cards)]
|
||||
[:div.dashboard-card.dashboard-bg-card {:key n}])]]])
|
||||
[:div "This feature is not publicly available yet."]))
|
||||
|
||||
(rum/defc whiteboard-page
|
||||
[name block-id]
|
||||
[:div.absolute.w-full.h-full.whiteboard-page
|
||||
[page-name block-id]
|
||||
(let [[ref bp] (use-breakpoint)]
|
||||
[:div.absolute.w-full.h-full.whiteboard-page
|
||||
|
||||
;; makes sure the whiteboard will not cover the borders
|
||||
{:key name
|
||||
:style {:padding "0.5px" :z-index 0
|
||||
:transform "translateZ(0)"
|
||||
:text-rendering "geometricPrecision"
|
||||
:-webkit-font-smoothing "subpixel-antialiased"}}
|
||||
;; makes sure the whiteboard will not cover the borders
|
||||
{:key page-name
|
||||
:ref ref
|
||||
:data-breakpoint (name bp)
|
||||
:style {:padding "0.5px" :z-index 0
|
||||
:transform "translateZ(0)"
|
||||
:text-rendering "geometricPrecision"
|
||||
:-webkit-font-smoothing "subpixel-antialiased"}}
|
||||
|
||||
[:div.whiteboard-page-title-root
|
||||
[:span.whiteboard-page-title
|
||||
{:style {:color "var(--ls-primary-text-color)"
|
||||
:user-select "none"}}
|
||||
(page/page-title name
|
||||
[:span.tie.tie-whiteboard
|
||||
{:style {:font-size "0.9em"}}]
|
||||
(get-page-display-name name)
|
||||
nil
|
||||
false)]
|
||||
[:div.whiteboard-page-title-root
|
||||
[:div.whiteboard-page-title
|
||||
{:style {:color "var(--ls-primary-text-color)"
|
||||
:user-select "none"}}
|
||||
(page/page-title page-name
|
||||
[:span.tie.tie-whiteboard
|
||||
{:style {:font-size "0.9em"}}]
|
||||
(get-page-display-name page-name)
|
||||
nil
|
||||
false)]
|
||||
|
||||
(page-refs-count name
|
||||
"text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
|
||||
(fn [open?] [:<> "References" (ui/icon (if open? "references-hide" "references-show")
|
||||
{:extension? true})]))]
|
||||
(tldraw-app name block-id)])
|
||||
[:div.whiteboard-page-refs
|
||||
(page-refs-count page-name
|
||||
"text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
|
||||
(fn [open?] [:span.whiteboard-page-refs-count-label
|
||||
"References" (ui/icon (if open? "references-hide" "references-show")
|
||||
{:extension? true})]))]]
|
||||
(tldraw-app page-name block-id)]))
|
||||
|
||||
(rum/defc whiteboard-route
|
||||
[route-match]
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@ input.tl-text-input {
|
|||
}
|
||||
|
||||
.whiteboard-page-refs-count {
|
||||
@apply whitespace-nowrap;
|
||||
border-radius: 8px;
|
||||
background: var(--ls-primary-background-color);
|
||||
}
|
||||
|
|
@ -137,7 +138,7 @@ input.tl-text-input {
|
|||
.whiteboard-page-title-root {
|
||||
@apply shadow-md flex items-center;
|
||||
position: absolute;
|
||||
left: 53px;
|
||||
left: 2.5rem;
|
||||
top: 0;
|
||||
background: var(--ls-primary-background-color);
|
||||
padding: 4px;
|
||||
|
|
@ -148,7 +149,7 @@ input.tl-text-input {
|
|||
}
|
||||
|
||||
.whiteboard-page-title {
|
||||
@apply inline-flex px-2 py-1 w-full;
|
||||
@apply flex px-2 py-1 flex-1 overflow-ellipsis overflow-hidden;
|
||||
|
||||
font-size: 20px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -161,7 +162,7 @@ input.tl-text-input {
|
|||
}
|
||||
|
||||
.page-title-sizer-wrapper {
|
||||
width: 98%;
|
||||
width: calc(100% - 24px);
|
||||
|
||||
> .title {
|
||||
@apply whitespace-nowrap min-w-[80px];
|
||||
|
|
@ -184,3 +185,30 @@ input.tl-text-input {
|
|||
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;
|
||||
}
|
||||
|
||||
.whiteboard-page-refs {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
|
||||
.whiteboard-page[data-breakpoint=sm] {
|
||||
.whiteboard-page-refs-count-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.whiteboard-page-title-root {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.tl-action-bar {
|
||||
left: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tl-primary-tools {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,28 @@
|
|||
[ref tick])
|
||||
[set-ref rect])))
|
||||
|
||||
(defn ->breakpoint
|
||||
"Converts a number to a breakpoint string
|
||||
Values come from https://tailwindcss.com/docs/responsive-design"
|
||||
[size]
|
||||
(cond
|
||||
(nil? size) :md
|
||||
(<= size 640) :sm
|
||||
(<= size 768) :md
|
||||
(<= size 1024) :lg
|
||||
(<= size 1280) :xl
|
||||
(<= size 1536) :xl
|
||||
:else :2xl))
|
||||
|
||||
(defn use-breakpoint
|
||||
"Returns the current breakpoint
|
||||
You can manually change the tick value, if you want to force refresh the value, you can manually change the tick value"
|
||||
([] (use-breakpoint nil))
|
||||
([tick]
|
||||
(let [[ref rect] (use-bounding-client-rect tick)
|
||||
bp (->breakpoint (when (some? rect) (.-width rect)))]
|
||||
[ref bp])))
|
||||
|
||||
(defn use-click-outside
|
||||
"Returns a function that can be used to register a callback
|
||||
that will be called when the user clicks outside the given dom node"
|
||||
|
|
|
|||
Loading…
Reference in New Issue