✨ Add new zoom options in workspace and viewer mode

frontend/src/app/main/ui/viewer/header.cljs

@@ -6,29 +6,65 @@
 
 (ns app.main.ui.viewer.header
   (:require
+   [app.common.math :as mth]
    [app.main.data.modal :as modal]
    [app.main.data.viewer :as dv]
    [app.main.data.viewer.shortcuts :as sc]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.fullscreen :as fs]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.comments :refer [comments-menu]]
    [app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]]
-   [app.main.ui.workspace.header :refer [zoom-widget]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
+(mf/defc zoom-widget
+  {::mf/wrap [mf/memo]}
+  [{:keys [zoom
+           on-increase
+           on-decrease
+           on-zoom-reset
+           on-fullscreen
+           on-zoom-fit
+           on-zoom-fill]
+    :as props}]
+  (let [show-dropdown? (mf/use-state false)]
+    [:div.zoom-widget {:on-click #(reset! show-dropdown? true)}
+     [:span.label {} (str (mth/round (* 100 zoom)) "%")]
+     [:span.icon i/arrow-down]
+     [:& dropdown {:show @show-dropdown?
+                   :on-close #(reset! show-dropdown? false)}
+      [:ul.dropdown
+       [:li.basic-zoom-bar
+        [:span.zoom-btns
+         [:button {:on-click (fn [event]
+                               (dom/stop-propagation event)
+                               (dom/prevent-default event)
+                               (on-decrease))} "-"]
+         [:p.zoom-size {} (str (mth/round (* 100 zoom)) "%")]
+         [:button {:on-click (fn [event]
+                               (dom/stop-propagation event)
+                               (dom/prevent-default event)
+                               (on-increase))} "+"]]
+        [:button.reset-btn {:on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]]
+       [:li.separator]
+       [:li {:on-click on-zoom-fit}
+        (tr "workspace.header.zoom-fit") [:span (sc/get-tooltip :toggle-zoom-style)]]
+       [:li {:on-click on-zoom-fill}
+        (tr "workspace.header.zoom-fill") [:span (sc/get-tooltip :toggle-zoom-style)]]
+       [:li {:on-click on-fullscreen}
+        (tr "workspace.header.zoom-full-screen") [:span (sc/get-tooltip :toogle-fullscreen)]]]]]))
+
+
 (mf/defc header-options
   [{:keys [section zoom page file index permissions]}]
-  (let [fullscreen (mf/use-ctx fs/fullscreen-context)
+  (let [fullscreen? (mf/deref refs/fullscreen?)
 
         toggle-fullscreen
         (mf/use-callback
-         (mf/deps fullscreen)
-         (fn []
-           (if @fullscreen (fullscreen false) (fullscreen true))))
+         (fn [] (st/emit! dv/toggle-fullscreen)))
 
         go-to-workspace
         (mf/use-callback
@@ -56,15 +92,15 @@
       {:zoom zoom
        :on-increase (st/emitf dv/increase-zoom)
        :on-decrease (st/emitf dv/decrease-zoom)
-       :on-zoom-to-50 (st/emitf dv/zoom-to-50)
-       :on-zoom-to-100 (st/emitf dv/reset-zoom)
-       :on-zoom-to-200 (st/emitf dv/zoom-to-200)
+       :on-zoom-reset (st/emitf dv/reset-zoom)
+       :on-zoom-fill (st/emitf dv/zoom-to-fill)
+       :on-zoom-fit (st/emitf dv/zoom-to-fit)
        :on-fullscreen toggle-fullscreen}]
 
      [:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
       {:alt (tr "viewer.header.fullscreen")
        :on-click toggle-fullscreen}
-      (if @fullscreen
+      (if fullscreen?
         i/full-screen-off
         i/full-screen)]
 
@@ -104,31 +140,31 @@
            (st/emit! (dv/go-to-page page-id))
            (reset! show-dropdown? false)))]
 
-     [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")}
-      [:div.breadcrumb
-       {:on-click open-dropdown}
-       [:span.project-name project-name]
-       [:span "/"]
-       [:span.file-name file-name]
-       [:span "/"]
+    [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")}
+     [:div.breadcrumb
+      {:on-click open-dropdown}
+      [:span.project-name project-name]
+      [:span "/"]
+      [:span.file-name file-name]
+      [:span "/"]
 
-       [:span.page-name page-name]
-       [:span.icon i/arrow-down]
+      [:span.page-name page-name]
+      [:span.icon i/arrow-down]
 
-       [:& dropdown {:show @show-dropdown?
-                     :on-close close-dropdown}
-        [:ul.dropdown
-         (for [id (get-in file [:data :pages])]
-           [:li {:id (str id)
-                 :on-click (partial navigate-to id)}
-            (get-in file [:data :pages-index id :name])])]]]
+      [:& dropdown {:show @show-dropdown?
+                    :on-close close-dropdown}
+       [:ul.dropdown
+        (for [id (get-in file [:data :pages])]
+          [:li {:id (str id)
+                :on-click (partial navigate-to id)}
+           (get-in file [:data :pages-index id :name])])]]]
 
-      [:div.current-frame
-       {:on-click toggle-thumbnails}
-       [:span.label "/"]
-       [:span.label frame-name]
-       [:span.icon i/arrow-down]
-       [:span.counters (str (inc index) " / " total)]]]))
+     [:div.current-frame
+      {:on-click toggle-thumbnails}
+      [:span.label "/"]
+      [:span.label frame-name]
+      [:span.icon i/arrow-down]
+      [:span.counters (str (inc index) " / " total)]]]))
 
 
 (mf/defc header