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

refactor: sidebar resizer

pull/6661/head
Konstantinos Kaloutas 2022-09-07 09:36:32 +03:00 committed by Tienson Qin
parent ccc96f2e04
commit af0bf00344
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/main/frontend/components/right_sidebar.cljs
View File

@ -157,7 +157,7 @@
(get-page match)))
(rum/defc sidebar-resizer
[]
[sidebar-open? sidebar-id handler-position]
(let [el-ref (rum/use-ref nil)]
(rum/use-effect!
(fn []
@ -169,32 +169,37 @@
{:move
(fn [^js/MouseEvent e]
(let [width js/document.documentElement.clientWidth
offset-left (.-pageX e)
right-el-ratio (- 1 (.toFixed (/ offset-left width) 6))
right-el (js/document.getElementById "right-sidebar")]
(if (= (.getAttribute right-el "data-open") "true")
offset (.-pageX e)
ratio (.toFixed (/ offset width) 6)
ratio (if (= handler-position :west) (- 1 ratio) ratio)
min-ration 0.1
max-ration 0.7
cursor-class (str "cursor-" (first (name handler-position)) "-resize")
sidebar-el (js/document.getElementById sidebar-id)]
(if (= (.getAttribute el "aria-expanded") "true")
(cond
(< right-el-ratio 0.1)
(< ratio (/ min-ration 2))
(state/hide-right-sidebar!)
(< right-el-ratio 0.2)
(.. js/document.documentElement -classList (add "is-resizing-threshold"))
(< ratio min-ration)
(.. js/document.documentElement -classList (add cursor-class))
(< right-el-ratio 0.7)
(when right-el
(let [width (str (* right-el-ratio 100) "%")]
(.. js/document.documentElement -classList (remove "is-resizing-threshold"))
(.setProperty (.-style right-el) "width" width)
(< ratio max-ration)
(when sidebar-el
(let [width (str (* ratio 100) "%")]
(.. js/document.documentElement -classList (remove cursor-class))
(.setProperty (.-style sidebar-el) "width" width)
(ui-handler/persist-right-sidebar-width!)))
:else
#(.. js/document.documentElement -classList (remove "is-resizing-threshold")))
(when (> right-el-ratio 0.1) (state/open-right-sidebar!)))))}}))
#(.. js/document.documentElement -classList (remove cursor-class)))
(when (> ratio 0.1) (state/open-right-sidebar!)))))}}))
(.styleCursor false)
(.on "dragstart" #(.. js/document.documentElement -classList (add "is-resizing-buf")))
(.on "dragend" #(.. js/document.documentElement -classList (remove "is-resizing-buf")))))
#())
[])
[:span.resizer {:ref el-ref}]))
[:span.resizer {:ref el-ref
:aria-expanded sidebar-open?}]))
(rum/defcs sidebar-inner <
(rum/local false ::anim-finished?)
@ -248,8 +253,7 @@
sidebar-open? (state/sub :ui/sidebar-open?)
repo (state/sub :git/current-repo)]
[:div#right-sidebar.cp__right-sidebar.h-screen
{:class (if sidebar-open? "open" "closed")
:data-open sidebar-open?}
(sidebar-resizer)
{:class (if sidebar-open? "open" "closed")}
(sidebar-resizer sidebar-open? "right-sidebar" :west)
(when sidebar-open?
(sidebar-inner repo t blocks))]))

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

@ -99,6 +99,8 @@ html.locked-scroll {
}
html.is-resizing-buf {
user-select: none;
#right-sidebar {
transition: none;
}
@ -107,7 +109,7 @@ html.is-resizing-buf {
cursor: col-resize !important;
}
&.is-resizing-threshold {
&.cursor-w-resize {
* {
cursor: w-resize !important;
}