feat: support dragging the PDF viewer head to move the window, #7187 (#8305)

* feat: support dragging the PDF viewer head to move the window, #7187

* Update src/main/frontend/extensions/pdf/pdf.css

Co-authored-by: Konstantinos <[email protected]>

* Update src/main/frontend/extensions/pdf/pdf.css

Co-authored-by: Konstantinos <[email protected]>

* Update src/main/frontend/extensions/pdf/pdf.css

Co-authored-by: Konstantinos <[email protected]>

* Update src/main/frontend/extensions/pdf/pdf.css

fix: comment

Co-authored-by: Konstantinos <[email protected]>
Co-authored-by: Konstantinos <[email protected]>

src/main/frontend/extensions/pdf/pdf.css

@@ -56,15 +56,20 @@ input::-webkit-inner-spin-button {
     position: relative;
   }
 
-  &-toolbar {
+&-header {
+    display: flex;
+    justify-content: flex-end;
     position: absolute;
     top: 0;
-    right: 20px;
-    width: 90%;
-    height: 42px;
-    z-index: 5;
+    right: 10px; /* Allows clicking on the scrollbar */
+    width: calc(100% - 10px);
     padding: 8px 20px;
-    padding-right: 0;
+    z-index: 5;
+    -webkit-app-region: drag;
+  }
+
+  &-toolbar {
+    -webkit-app-region: no-drag;
 
     > .inner {
       display: flex;
@@ -101,7 +106,7 @@ input::-webkit-inner-spin-button {
 
         > .nu {
           padding-right: 4px;
-          
+
           input {
             user-select: inherit;
             width: 35px;
@@ -112,7 +117,7 @@ input::-webkit-inner-spin-button {
             border: none;
             background: transparent;
             font-size: 15px;
-            
+
             &.is-long {
               font-size: 12px;
             }

src/main/frontend/extensions/pdf/toolbar.cljs

@@ -20,7 +20,7 @@
 (def *area-dashed? (atom ((fnil identity false) (storage/get (str "ls-pdf-area-is-dashed")))))
 (def *area-mode? (atom false))
 (def *highlight-mode? (atom false))
-(rum/defcontext *highlights-ctx* )
+(rum/defcontext *highlights-ctx*)
 
 (rum/defc pdf-settings
   [^js viewer theme {:keys [hide-settings! select-theme! t]}]
@@ -85,8 +85,8 @@
 
         [:span.flex.items-center.justify-between.w-full
          (t :pdf/doc-metadata)
-         (svg/icon-info)]]]
-      ]]))
+         (svg/icon-info)]]]]]))
+
 
 (rum/defc docinfo-display
   [info close-fn!]
@@ -243,9 +243,9 @@
             (apply max (map :current [find-state matches])) " of "
             (:total find-state)
             (str " matches (\"" (:query find-state) "\")")]
-           [:div.px-3.py-3.text-xs.opacity-80.text-red-600 "Not found."])
-         )
-       ]]]))
+           [:div.px-3.py-3.text-xs.opacity-80.text-red-600 "Not found."]))]]]))
+
+
 
 (rum/defc pdf-outline-item
   [^js viewer
@@ -462,97 +462,98 @@
          (set! (. input -value) current-page-num)))
      [current-page-num])
 
-    [:div.extensions__pdf-toolbar
-     [:div.inner
-      [:div.r.flex.buttons
-
-       ;; appearance
-       [:a.button
-        {:title    "More settings"
-         :on-click #(set-settings-visible! (not settings-visible?))}
-        (svg/adjustments 18)]
-
-       ;; selection
-       [:a.button
-        {:title    (str "Area highlight (" (if util/mac? "⌘" "Shift") ")")
-         :class    (when area-mode? "is-active")
-         :on-click #(set-area-mode! (not area-mode?))}
-        (svg/icon-area 18)]
-
-       [:a.button
-        {:title    "Highlight mode"
-         :class    (when highlight-mode? "is-active")
-         :on-click #(set-highlight-mode! (not highlight-mode?))}
-        (svg/highlighter 16)]
-
-       ;; zoom
-       [:a.button
-        {:title    "Zoom out"
-         :on-click (partial pdf-utils/zoom-out-viewer viewer)}
-        (svg/zoom-out 18)]
-
-       [:a.button
-        {:title    "Zoom in"
-         :on-click (partial pdf-utils/zoom-in-viewer viewer)}
-        (svg/zoom-in 18)]
-
-       [:a.button
-        {:title    "Outline"
-         :on-click #(set-outline-visible! (not outline-visible?))}
-        (svg/view-list 16)]
-
-       ;; search
-       [:a.button
-        {:title    "Search"
-         :on-click #(set-finder-visible! (not finder-visible?))}
-        (svg/search2 19)]
-
-       ;; annotations
-       [:a.button
-        {:title    "Annotations page"
-         :on-click #(pdf-assets/goto-annotations-page! (:pdf/current @state/state))}
-        (svg/annotations 16)]
-
-       ;; pager
-       [:div.pager.flex.items-center.ml-1
-
-        [:span.nu.flex.items-center.opacity-70
-         [:input {:ref            *page-ref
-                  :type           "number"
-                  :min            1
-                  :max            total-page-num
-                  :class          (util/classnames [{:is-long (> (util/safe-parse-int current-page-num) 999)}])
-                  :default-value  current-page-num
-                  :on-mouse-enter #(.select ^js (.-target %))
-                  :on-key-up      (fn [^js e]
-                                    (let [^js input (.-target e)
-                                          value     (util/safe-parse-int (.-value input))]
-                                      (set-current-page-num! value)
-                                      (when (and (= (.-keyCode e) 13) value (> value 0))
-                                        (->> (if (> value total-page-num) total-page-num value)
-                                             (set! (. viewer -currentPageNumber))))))}]
-         [:small "/ " total-page-num]]
-
-        [:span.ct.flex.items-center
-         [:a.button {:on-click #(. viewer previousPage)} (svg/up-narrow)]
-         [:a.button {:on-click #(. viewer nextPage)} (svg/down-narrow)]]]
-
-       [:a.button
-        {:on-click #(state/set-state! :pdf/current nil)}
-        (t :close)]]]
-
-     ;; contents outline
-     (pdf-outline-&-highlights viewer outline-visible? set-outline-visible!)
-
-     ;; finder
-     (when finder-visible?
-       (pdf-finder viewer {:hide-finder! #(set-finder-visible! false)}))
-
-     ;; settings
-     (when settings-visible?
-       (pdf-settings
-        viewer
-        viewer-theme
-        {:t              t
-         :hide-settings! #(set-settings-visible! false)
-         :select-theme!  #(set-viewer-theme! %)}))]))
+    [:div.extensions__pdf-header
+      [:div.extensions__pdf-toolbar
+       [:div.inner
+        [:div.r.flex.buttons
+
+         ;; appearance
+         [:a.button
+          {:title    "More settings"
+           :on-click #(set-settings-visible! (not settings-visible?))}
+          (svg/adjustments 18)]
+
+         ;; selection
+         [:a.button
+          {:title    (str "Area highlight (" (if util/mac? "⌘" "Shift") ")")
+           :class    (when area-mode? "is-active")
+           :on-click #(set-area-mode! (not area-mode?))}
+          (svg/icon-area 18)]
+
+         [:a.button
+          {:title    "Highlight mode"
+           :class    (when highlight-mode? "is-active")
+           :on-click #(set-highlight-mode! (not highlight-mode?))}
+          (svg/highlighter 16)]
+
+         ;; zoom
+         [:a.button
+          {:title    "Zoom out"
+           :on-click (partial pdf-utils/zoom-out-viewer viewer)}
+          (svg/zoom-out 18)]
+
+         [:a.button
+          {:title    "Zoom in"
+           :on-click (partial pdf-utils/zoom-in-viewer viewer)}
+          (svg/zoom-in 18)]
+
+         [:a.button
+          {:title    "Outline"
+           :on-click #(set-outline-visible! (not outline-visible?))}
+          (svg/view-list 16)]
+
+         ;; search
+         [:a.button
+          {:title    "Search"
+           :on-click #(set-finder-visible! (not finder-visible?))}
+          (svg/search2 19)]
+
+         ;; annotations
+         [:a.button
+          {:title    "Annotations page"
+           :on-click #(pdf-assets/goto-annotations-page! (:pdf/current @state/state))}
+          (svg/annotations 16)]
+
+         ;; pager
+         [:div.pager.flex.items-center.ml-1
+
+          [:span.nu.flex.items-center.opacity-70
+           [:input {:ref            *page-ref
+                    :type           "number"
+                    :min            1
+                    :max            total-page-num
+                    :class          (util/classnames [{:is-long (> (util/safe-parse-int current-page-num) 999)}])
+                    :default-value  current-page-num
+                    :on-mouse-enter #(.select ^js (.-target %))
+                    :on-key-up      (fn [^js e]
+                                      (let [^js input (.-target e)
+                                            value     (util/safe-parse-int (.-value input))]
+                                        (set-current-page-num! value)
+                                        (when (and (= (.-keyCode e) 13) value (> value 0))
+                                          (->> (if (> value total-page-num) total-page-num value)
+                                               (set! (. viewer -currentPageNumber))))))}]
+           [:small "/ " total-page-num]]
+
+          [:span.ct.flex.items-center
+           [:a.button {:on-click #(. viewer previousPage)} (svg/up-narrow)]
+           [:a.button {:on-click #(. viewer nextPage)} (svg/down-narrow)]]]
+
+         [:a.button
+          {:on-click #(state/set-state! :pdf/current nil)}
+          (t :close)]]]
+
+       ;; contents outline
+       (pdf-outline-&-highlights viewer outline-visible? set-outline-visible!)
+
+       ;; finder
+       (when finder-visible?
+         (pdf-finder viewer {:hide-finder! #(set-finder-visible! false)}))
+
+       ;; settings
+       (when settings-visible?
+         (pdf-settings
+          viewer
+          viewer-theme
+          {:t              t
+           :hide-settings! #(set-settings-visible! false)
+           :select-theme!  #(set-viewer-theme! %)}))]]))