mirror of https://github.com/logseq/logseq
enhance: right sidebar handler
parent
c9b4d69871
commit
6e9dae8549
|
@ -169,17 +169,26 @@
|
|||
{:move
|
||||
(fn [^js/MouseEvent e]
|
||||
(let [width js/document.documentElement.clientWidth
|
||||
offset (.-left (.-rect e))
|
||||
right-el-ratio (- 1 (.toFixed (/ offset width) 6))
|
||||
right-el-ratio (cond
|
||||
(< right-el-ratio 0.2) 0.2
|
||||
(> right-el-ratio 0.7) 0.7
|
||||
:else right-el-ratio)
|
||||
offset-left (.-pageX e)
|
||||
right-el-ratio (- 1 (.toFixed (/ offset-left width) 6))
|
||||
right-el (js/document.getElementById "right-sidebar")]
|
||||
(when right-el
|
||||
(let [width (str (* right-el-ratio 100) "%")]
|
||||
(.setProperty (.-style right-el) "width" width)
|
||||
(ui-handler/persist-right-sidebar-width!)))))}}))
|
||||
(if (= (.getAttribute right-el "data-open") "true")
|
||||
(cond
|
||||
(< right-el-ratio 0.1)
|
||||
(state/hide-right-sidebar!)
|
||||
|
||||
(< right-el-ratio 0.2)
|
||||
(.. js/document.documentElement -classList (add "is-resizing-threshold"))
|
||||
|
||||
(< 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)
|
||||
(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!)))))}}))
|
||||
(.styleCursor false)
|
||||
(.on "dragstart" #(.. js/document.documentElement -classList (add "is-resizing-buf")))
|
||||
(.on "dragend" #(.. js/document.documentElement -classList (remove "is-resizing-buf")))))
|
||||
|
@ -196,7 +205,6 @@
|
|||
(let [*anim-finished? (get state ::anim-finished?)]
|
||||
[:div.cp__right-sidebar-inner.flex.flex-col.h-full#right-sidebar-container
|
||||
|
||||
(sidebar-resizer)
|
||||
[:div.cp__right-sidebar-scrollable
|
||||
[:div.cp__right-sidebar-topbar.flex.flex-row.justify-between.items-center.px-2.h-12
|
||||
[:div.cp__right-sidebar-settings.hide-scrollbar.gap-1 {:key "right-sidebar-settings"}
|
||||
|
@ -240,6 +248,8 @@
|
|||
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")}
|
||||
{:class (if sidebar-open? "open" "closed")
|
||||
:data-open sidebar-open?}
|
||||
(sidebar-resizer)
|
||||
(when sidebar-open?
|
||||
(sidebar-inner repo t blocks))]))
|
||||
|
|
|
@ -438,9 +438,30 @@ html[data-theme='dark'] {
|
|||
z-index: var(--ls-z-index-level-1);
|
||||
transition: width 0.3s;
|
||||
background-color: var(--ls-secondary-background-color, #d8e1e8);
|
||||
position: relative;
|
||||
|
||||
.resizer {
|
||||
@apply absolute top-0 bottom-0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
user-select: none;
|
||||
cursor: col-resize !important;
|
||||
transition: background-color 300ms;
|
||||
transition-delay: 300ms;
|
||||
z-index: 1000;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--ls-active-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
width: 0 !important;
|
||||
|
||||
.resizer {
|
||||
left: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
|
@ -455,17 +476,6 @@ html[data-theme='dark'] {
|
|||
|
||||
&-inner {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
|
||||
.resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
user-select: none;
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-settings {
|
||||
|
|
|
@ -102,4 +102,14 @@ html.is-resizing-buf {
|
|||
#right-sidebar {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
* {
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
|
||||
&.is-resizing-threshold {
|
||||
* {
|
||||
cursor: w-resize !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue