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