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

enhance: scrollbar no longer limits to the main content 

also, a sticky right topbar
pull/1678/head
Tienson Qin 2021-04-17 23:12:54 +08:00
parent 252cc1bc80
commit 8f6505d04b
8 changed files with 66 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/css/common.css
View File

@ -68,7 +68,6 @@ html[data-theme='dark'] {
--ls-page-inline-code-color: var(--ls-primary-text-color);
--ls-page-inline-code-bg-color: #01222a;
--ls-scrollbar-foreground-color: rgba(255, 255, 255, 0.05);
--ls-scrollbar-background-color: rgba(30, 60, 67, 0.9);
--ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
--ls-head-text-color: var(--ls-link-text-color);
--ls-icon-color: var(--ls-link-text-color);

10
src/main/frontend/components/header.css
View File

@ -1,12 +1,18 @@
.cp__header {
@apply shadow z-10 h-12 pr-4;
@apply shadow z-10 h-12;
padding-right: 1rem;
display: flex;
align-items: center;
flex: 0 0 auto;
background-color: var(--ls-primary-background-color, #fff);
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
right: 0;
user-select: none;
transition: width 0.3s;
.it svg {
transform: scale(0.8);

2
src/main/frontend/components/journal.cljs
View File

@ -113,7 +113,7 @@
(rum/defc journals < rum/reactive
[latest-journals]
[:div#journals
(ui/infinite-list "main-content"
(ui/infinite-list "left-container"
(for [[journal-name format] latest-journals]
[:div.journal-item.content {:key journal-name}
(journal-cp [journal-name format])])

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

@ -27,8 +27,9 @@
(rum/defc toggle
[]
[:a.opacity-50.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
(svg/menu)])
(when-not (util/mobile?)
[:a.opacity-50.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
(svg/menu)]))
(rum/defc block-cp < rum/reactive
[repo idx block]
@ -239,10 +240,8 @@
:else right-el-ratio)
right-el (js/document.getElementById "right-sidebar")]
(when right-el
(.setProperty (.-style right-el)
"width"
(str (* right-el-ratio 100) "%")))))}}))
(let [width (str (* right-el-ratio 100) "%")]
(.setProperty (.-style right-el) "width" width)))))}}))
(.styleCursor false)
(.on "dragstart" #(.. js/document.documentElement -classList (add "is-resizing-buf")))
(.on "dragend" #(.. js/document.documentElement -classList (remove "is-resizing-buf")))))
@ -262,13 +261,13 @@
theme (state/sub :ui/theme)
t (i18n/use-tongue)]
(rum/with-context [[t] i18n/*tongue-context*]
[:div#right-sidebar.cp__right-sidebar.h-screen.overflow-x-hidden
[:div#right-sidebar.cp__right-sidebar.h-screen
{:class (if sidebar-open? "open" "closed")}
(if sidebar-open?
[:div.cp__right-sidebar-inner.flex.flex-col.h-full
(sidebar-resizer)
[:div.flex.flex-row.justify-between.items-center.px-4.h-12
[:div.cp__right-sidebar-topbar.flex.flex-row.justify-between.items-center.px-4.h-12
[:div.cp__right-sidebar-settings.hide-scrollbar {:key "right-sidebar-settings"}
[:div.ml-4.text-sm
[:a.cp__right-sidebar-settings-btn {:on-click (fn [e]
@ -296,8 +295,10 @@
(state/sidebar-add-block! repo "help" :help nil))}
(t :right-side-bar/help)]]]
(when sidebar-open? (toggle))]
[:.sidebar-item-list.overflow-y-auto.flex-1
(when sidebar-open?
[:div.mr-1 {:style {:z-index 999}}
(toggle)])]
[:.sidebar-item-list.flex-1
(for [[idx [repo db-id block-type block-data]] (medley/indexed blocks)]
(rum/with-key
(sidebar-item repo idx db-id block-type block-data t)

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

@ -107,7 +107,7 @@
(rum/defc main
[{:keys [route-match global-graph-pages? logged? home? route-name indexeddb-support? white? db-restoring? main-content]}]
(rum/with-context [[t] i18n/*tongue-context*]
[:div#main-content.cp__sidebar-main-layout.flex-1.overflow-y-auto.flex
[:div#main-content.cp__sidebar-main-layout.flex-1.flex
[:div#sidebar-nav-wrapper.flex-col.pt-4.hidden.sm:block
{:style {:flex (if (state/get-left-sidebar-open?)
"0 1 20%"
@ -333,28 +333,28 @@
:close-fn close-fn
:route-match route-match})
[:div.#app-container.h-screen.flex
[[:div.flex-1.h-full.flex.flex-col
[(header/header {:open-fn open-fn
:white? white?
:current-repo current-repo
:logged? logged?
:page? page?
:route-match route-match
:me me
:default-home default-home
:new-block-mode new-block-mode})
[:div.flex-1.h-full.flex.flex-col.overflow-y-auto#left-container.relative
[(header/header {:open-fn open-fn
:white? white?
:current-repo current-repo
:logged? logged?
:page? page?
:route-match route-match
:me me
:default-home default-home
:new-block-mode new-block-mode})
(main {:route-match route-match
:global-graph-pages? global-graph-pages?
:logged? logged?
:home? home?
:route-name route-name
:indexeddb-support? indexeddb-support?
:white? white?
:db-restoring? db-restoring?
:main-content main-content})]]
(right-sidebar/sidebar)]]
(main {:route-match route-match
:global-graph-pages? global-graph-pages?
:logged? logged?
:home? home?
:route-name route-name
:indexeddb-support? indexeddb-support?
:white? white?
:db-restoring? db-restoring?
:main-content main-content})]]
(right-sidebar/sidebar)]
(ui/notification)

22
src/main/frontend/components/sidebar.css
View File

@ -10,8 +10,15 @@
}
}
#app-container {
flex: 0 0 100%;
transition: all 200ms ease-in 0s;
}
#main-content-container {
font-size: 1em;
font-size: 1em;
margin-top: 2rem;
padding: 1rem;
}
#left-sidebar {
@ -115,6 +122,7 @@
padding-top: 0;
position: relative;
min-height: 100%;
overflow-y: scroll;
.resizer {
position: absolute;
@ -136,11 +144,21 @@
&-btn {
display: block;
padding: 10px 5px;
padding: 13px 5px;
white-space: nowrap;
}
}
&-topbar {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
right: 0;
background-color: var(--ls-secondary-background-color, #d8e1e8);
z-index: 999;
}
.page {
margin-top: 0;
}

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

@ -31,14 +31,6 @@ html {
height: 8px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:active {
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-corner {
background: transparent;
}

5
src/main/frontend/util.cljc
View File

@ -1176,6 +1176,11 @@
[]
(contains? (set (system-locales)) "zh-CN")))
#?(:cljs
(defn get-element-width
[id]
(when-let [element (gdom/getElement id)]
(gobj/get element "offsetWidth"))))
(comment
(= (get-relative-path "journals/2020_11_18.org" "pages/grant_ideas.org")
"../pages/grant_ideas.org")