mirror of https://github.com/logseq/logseq
enhance(ui): polish left sidebar ui & transition
parent
d16c7bee1f
commit
287b4e2118
|
@ -6,6 +6,7 @@
|
|||
--ls-font-family: 'Inter';
|
||||
--ls-main-content-max-width: 810px;
|
||||
--ls-main-content-max-width-wide: 100%;
|
||||
--ls-scrollbar-width: 6px;
|
||||
--ls-border-radius-low: 4px;
|
||||
--ls-border-radius-medium: 8px;
|
||||
--ls-left-sidebar-width: 240px;
|
||||
|
|
|
@ -178,66 +178,67 @@
|
|||
(when (and (util/electron?)
|
||||
(or (.. target -classList (contains "cp__header"))))
|
||||
(js/window.apis.toggleMaxOrMinActiveWindow))))}
|
||||
(left-menu-button {:on-click (fn []
|
||||
(open-fn)
|
||||
(state/set-left-sidebar-open!
|
||||
(not (:ui/left-sidebar-open? @state/state))))})
|
||||
[:div.l.flex
|
||||
(left-menu-button {:on-click (fn []
|
||||
(open-fn)
|
||||
(state/set-left-sidebar-open!
|
||||
(not (:ui/left-sidebar-open? @state/state))))})
|
||||
|
||||
(when current-repo
|
||||
(ui/tippy
|
||||
{:html [:div.text-sm.font-medium
|
||||
"Shortcut: "
|
||||
;; TODO: Pull from config so it displays custom shortcut, not just the default
|
||||
[:code (util/->platform-shortcut "Ctrl + k")]]
|
||||
:interactive true
|
||||
:delay [2000, 0]
|
||||
:arrow true}
|
||||
[:a.button#search-button
|
||||
{:on-click #(state/pub-event! [:go/search])}
|
||||
(ui/icon "search" {:style {:fontSize 20}})]))
|
||||
(when current-repo
|
||||
(ui/tippy
|
||||
{:html [:div.text-sm.font-medium
|
||||
"Shortcut: "
|
||||
;; TODO: Pull from config so it displays custom shortcut, not just the default
|
||||
[:code (util/->platform-shortcut "Ctrl + k")]]
|
||||
:interactive true
|
||||
:delay 2000
|
||||
:position "right"
|
||||
:arrow true}
|
||||
[:a.button#search-button
|
||||
{:on-click #(state/pub-event! [:go/search])}
|
||||
(ui/icon "search" {:style {:fontSize 20}})]))]
|
||||
|
||||
[:div.flex-1.flex] ;; Spacer in the middle ------------------------------
|
||||
[:div.r.flex
|
||||
(when (and
|
||||
(not (mobile-util/is-native-platform?))
|
||||
(not (util/electron?)))
|
||||
(login logged?))
|
||||
|
||||
(when (and
|
||||
(not (mobile-util/is-native-platform?))
|
||||
(not (util/electron?)))
|
||||
(login logged?))
|
||||
(when plugin-handler/lsp-enabled?
|
||||
(plugins/hook-ui-items :toolbar))
|
||||
|
||||
(when plugin-handler/lsp-enabled?
|
||||
(plugins/hook-ui-items :toolbar))
|
||||
(when (not= (state/get-current-route) :home)
|
||||
(home-button))
|
||||
|
||||
(when (not= (state/get-current-route) :home)
|
||||
(home-button))
|
||||
(when (util/electron?) (back-and-forward))
|
||||
|
||||
(when (util/electron?) (back-and-forward))
|
||||
(new-block-mode)
|
||||
|
||||
(new-block-mode)
|
||||
(when refreshing?
|
||||
[:div {:class "animate-spin-reverse"}
|
||||
svg/refresh])
|
||||
|
||||
(when refreshing?
|
||||
[:div {:class "animate-spin-reverse"}
|
||||
svg/refresh])
|
||||
(repo/sync-status current-repo)
|
||||
|
||||
(repo/sync-status current-repo)
|
||||
(when show-open-folder?
|
||||
[:a.text-sm.font-medium.button
|
||||
{:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}
|
||||
[:div.flex.flex-row.text-center.open-button__inner.items-center
|
||||
[:span.inline-block.open-button__icon-wrapper svg/folder-add]
|
||||
(when-not config/mobile?
|
||||
[:span.ml-1 {:style {:margin-top (if electron-mac? 0 2)}}
|
||||
(t :open)])]])
|
||||
|
||||
(when show-open-folder?
|
||||
[:a.text-sm.font-medium.button
|
||||
{:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}
|
||||
[:div.flex.flex-row.text-center.open-button__inner.items-center
|
||||
[:span.inline-block.open-button__icon-wrapper svg/folder-add]
|
||||
(when-not config/mobile?
|
||||
[:span.ml-1 {:style {:margin-top (if electron-mac? 0 2)}}
|
||||
(t :open)])]])
|
||||
(when config/publishing?
|
||||
[:a.text-sm.font-medium.button {:href (rfe/href :graph)}
|
||||
(t :graph)])
|
||||
|
||||
(when config/publishing?
|
||||
[:a.text-sm.font-medium.button {:href (rfe/href :graph)}
|
||||
(t :graph)])
|
||||
(dropdown-menu {:me me
|
||||
:t t
|
||||
:current-repo current-repo
|
||||
:default-home default-home})
|
||||
|
||||
(dropdown-menu {:me me
|
||||
:t t
|
||||
:current-repo current-repo
|
||||
:default-home default-home})
|
||||
(when (not (state/sub :ui/sidebar-open?))
|
||||
(sidebar/toggle))
|
||||
|
||||
(when (not (state/sub :ui/sidebar-open?))
|
||||
(sidebar/toggle))
|
||||
|
||||
(updater-tips-new-version t)])))
|
||||
(updater-tips-new-version t)]])))
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
padding-right: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 auto;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
|
@ -14,6 +15,12 @@
|
|||
user-select: none;
|
||||
line-height: 1;
|
||||
|
||||
> .l {
|
||||
width: var(--ls-left-sidebar-width);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.it svg {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
@ -72,9 +79,9 @@
|
|||
}
|
||||
|
||||
.is-electron.is-mac .cp__header {
|
||||
> .l {
|
||||
padding-left: 78px;
|
||||
transition: all 0.25s;
|
||||
-webkit-transition: all 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.cp__header .navigation svg {
|
||||
|
|
|
@ -11,13 +11,10 @@
|
|||
}
|
||||
|
||||
.is-electron.is-mac .cp__sidebar-left-layout {
|
||||
transition: all 0.25s;
|
||||
-webkit-transition: all 0.25s;
|
||||
}
|
||||
|
||||
#app-container {
|
||||
flex: 0 0 100%;
|
||||
transition: all 200ms ease-in 0s;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
|
@ -43,8 +40,6 @@
|
|||
position: absolute;
|
||||
z-index: 11;
|
||||
opacity: 0;
|
||||
transition: all 0.25s;
|
||||
-webkit-transition: all 0.25s;
|
||||
background-color: #002b36;
|
||||
|
||||
.enter {
|
||||
|
@ -74,7 +69,10 @@
|
|||
}
|
||||
|
||||
.left-sidebar-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
|
||||
> .wrap {
|
||||
padding-top: 60px;
|
||||
|
@ -203,6 +201,18 @@
|
|||
|
||||
transition: transform .25s;
|
||||
transform: translateX(-100%);
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
height: 3rem;
|
||||
width: calc(var(--ls-left-sidebar-width) - var(--ls-scrollbar-width));
|
||||
background-color: var(--ls-secondary-background-color);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
transform: translateX(0);
|
||||
|
|
|
@ -27,7 +27,7 @@ html {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: var(--ls-scrollbar-width);
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue