fix: can't drag the desktop app when scrolling down a bit

close #2432

package.json

@@ -44,7 +44,7 @@
         "gulp:build": "cross-env NODE_ENV=production gulp build",
         "css:build": "postcss tailwind.all.css -o static/css/style.css --verbose --env production",
         "css:watch": "postcss tailwind.all.css -o static/css/style.css --verbose --watch",
-        "cljs:watch": "clojure -M:cljs watch app publishing electron cards",
+        "cljs:watch": "clojure -M:cljs watch app electron",
         "cljs:electron-watch": "clojure -M:cljs watch app electron",
         "cljs:release": "clojure -M:cljs release app publishing electron",
         "cljs:electron-release": "clojure -M:cljs release app publishing electron --config-merge '{:asset-path \"./js\"}'",

src/main/frontend/components/header.cljs

@@ -28,7 +28,8 @@
 (rum/defc logo < rum/reactive
   [{:keys [white? electron-mac?]}]
   [:a.cp__header-logo
-   {:href     (rfe/href :home)
+   {:class (when electron-mac? "button")
+    :href     (rfe/href :home)
     :on-click (fn []
                 (util/scroll-to-top)
                 (state/set-journals-length! 2))}
@@ -82,7 +83,7 @@
         logged? (state/logged?)]
     (ui/dropdown-with-links
      (fn [{:keys [toggle-fn]}]
-       [:a.cp__right-menu-button.block.p-2
+       [:a.cp__right-menu-button.button
         {:on-click toggle-fn}
         (svg/horizontal-dots nil)])
      (->>
@@ -157,10 +158,10 @@
 (rum/defc back-and-forward
   [electron-mac?]
   [:div.flex.flex-row
-   [:a.opacity-60.hover:opacity-100.it.navigation.nav-left.block.p-2
+   [:a.it.navigation.nav-left.button
     {:title "Go Back" :on-click #(js/window.history.back)}
     svg/arrow-narrow-left]
-   [:a.opacity-60.hover:opacity-100.it.navigation.nav-right.block.p-2
+   [:a.it.navigation.nav-right.button
     {:title "Go Forward" :on-click #(js/window.history.forward)}
     svg/arrow-narrow-right]])
 
@@ -213,7 +214,7 @@
 
        (when (and (nfs/supported?) (empty? repos)
                   (not config/publishing?))
-         [:a.text-sm.font-medium.opacity-70.hover:opacity-100.block.p-2
+         [:a.text-sm.font-medium.button
           {:on-click (fn []
                        (page-handler/ls-dir-files!))}
           [:div.flex.flex-row.text-center.open-button__inner
@@ -223,11 +224,12 @@
               (t :open)])]])
 
        (if config/publishing?
-         [:a.text-sm.font-medium.block.p-2 {:href (rfe/href :graph)}
+         [: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})
+
        (when (not (state/sub :ui/sidebar-open?)) (sidebar/toggle))])))

src/main/frontend/components/header.css

@@ -66,16 +66,11 @@
   @apply p-2;
 }
 
-.cp__right-menu-button {
-  opacity: 0.3;
-}
-
 .cp__header-logo {
   display: none;
 }
 
-.cp__header-logo:hover,
-.cp__right-menu-button:hover {
+.cp__header-logo:hover {
   opacity: 1;
 }
 
@@ -112,3 +107,15 @@
   max-width: 7ch;
   color: var(--ls-icon-color, #045591);
 }
+
+a.button {
+    padding: 0.5rem;
+    opacity: 0.6;
+    display: block;
+    border-radius: 4px;
+}
+
+a.button:hover {
+    opacity: 1;
+    background: var(--ls-tertiary-background-color);
+}

src/main/frontend/components/repo.cljs

@@ -100,7 +100,7 @@
         (if (and nfs-repo? (nfs-handler/supported?))
           (let [syncing? (state/sub :graph/syncing?)]
             [:div.opacity-60.refresh.hover:opacity-100 {:class (if syncing? "loader-reverse" "initial")}
-             [:a.block.p-2
+             [:a.button
               {:on-click #(nfs-handler/refresh! repo refresh-cb)
                :title (str "Import files from the local directory: " (config/get-local-dir repo) ".\nVersion: "
                            version/version)}

src/main/frontend/components/right_sidebar.cljs

@@ -27,7 +27,7 @@
 (rum/defc toggle
   []
   (when-not (util/mobile?)
-    [:a.opacity-60.hover:opacity-100.block.p-2 {:on-click state/toggle-sidebar-open?!}
+    [:a.button {:on-click state/toggle-sidebar-open?!}
     (svg/menu)]))
 
 (rum/defc block-cp < rum/reactive
@@ -237,7 +237,7 @@
         theme (state/sub :ui/theme)
         t (i18n/use-tongue)]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#right-sidebar.cp__right-sidebar.h-screen.scrollbar-spacing
+      [: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#right-sidebar-container
@@ -278,7 +278,7 @@
                                              :margin-right 2}}
               (toggle)])]
 
-           [:.sidebar-item-list.flex-1
+           [:.sidebar-item-list.flex-1.scrollbar-spacing {:style {:height "100vh"}}
             (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)

src/main/frontend/components/sidebar.cljs

@@ -342,17 +342,17 @@
         [:div.#app-container.h-screen.flex
          [:div.flex-1.h-full.flex.flex-col#left-container.relative
           {:class (if (state/sub :ui/sidebar-open?) "overflow-hidden" "w-full")}
-          [:div.scrollbar-spacing#main-container
-           (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})
+          (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#main-container.scrollbar-spacing
            (main {:route-match         route-match
                   :global-graph-pages? global-graph-pages?
                   :logged?             logged?
@@ -361,9 +361,9 @@
                   :indexeddb-support?  indexeddb-support?
                   :white?              white?
                   :db-restoring?       db-restoring?
-                  :main-content        main-content})
+                  :main-content        main-content})]
 
-           (footer)]]
+          (footer)]
          (right-sidebar/sidebar)]
 
         (ui/notification)
@@ -374,11 +374,4 @@
         (when
          (and (not config/mobile?)
               (not config/publishing?))
-          (help-button)
-         ;; [:div.font-bold.absolute.bottom-4.bg-base-2.rounded-full.h-8.w-8.flex.items-center.justify-center.font-bold.cursor.opacity-70.hover:opacity-100
-         ;;  {:style {:left 24}
-         ;;   :title "Click to show/hide sidebar"
-         ;;   :on-click (fn []
-         ;;               (state/set-left-sidebar-open! (not (state/get-left-sidebar-open?))))}
-         ;;  (if (state/sub :ui/left-sidebar-open?) "<" ">")]
-          )]))))
+          (help-button))]))))