diff --git a/resources/css/common.css b/resources/css/common.css index 0f9d100ead..756139213a 100644 --- a/resources/css/common.css +++ b/resources/css/common.css @@ -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; diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs index 8a85fe7c90..0ebdc65d3e 100644 --- a/src/main/frontend/components/header.cljs +++ b/src/main/frontend/components/header.cljs @@ -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)]]))) diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css index e0721d8500..ceb0d68f73 100644 --- a/src/main/frontend/components/header.css +++ b/src/main/frontend/components/header.css @@ -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 { diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css index d8b5a463e0..b88bbee29f 100644 --- a/src/main/frontend/components/sidebar.css +++ b/src/main/frontend/components/sidebar.css @@ -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); diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index c0cf25b494..db78c4283c 100644 --- a/src/main/frontend/components/theme.css +++ b/src/main/frontend/components/theme.css @@ -27,7 +27,7 @@ html { } ::-webkit-scrollbar { - width: 8px; + width: var(--ls-scrollbar-width); height: 8px; }