✨ Add new zoom options in workspace and viewer mode

CHANGES.md

@@ -3,8 +3,10 @@
 ## :rocket: Next
 
 ### :boom: Breaking changes
+
 ### :sparkles: New features
 
+- Add new options for zoom widget in workspace and viewer mode [Taiga #896](https://tree.taiga.io/project/penpot/us/896).
 - Allow decimals on stroke width and positions [Taiga #2035](https://tree.taiga.io/project/penpot/issue/2035).
 - Ability to ignore background when exporting an artboard [Taiga #1395](https://tree.taiga.io/project/penpot/us/1395).
 - Show color hex or name on hover [Taiga #2413](https://tree.taiga.io/project/penpot/us/2413).
@@ -72,7 +74,6 @@
 - Explain folders in components (by @candideu) [Penpot-docs #42](https://github.com/penpot/penpot-docs/pull/42).
 - Readability improvements of user guide (by @PaulSchulz) [Penpot-docs #50](https://github.com/penpot/penpot-docs/pull/50).
 
-
 # 1.10.4-beta
 
 ### :sparkles: Enhacements
@@ -85,7 +86,6 @@
 - Minor fix on how file changes log is persisted.
 - Fix many issues on error reporting.
 
-
 # 1.10.3-beta
 
 ### :sparkles: Enhacements
@@ -120,14 +120,12 @@
 
 - Update log4j2 dependency.
 
-
 # 1.10.1-beta
 
 ### :bug: Bugs fixed
 
 - Fix problems with team management [#1353](https://github.com/penpot/penpot/issues/1353)
 
-
 ## 1.10.0-beta
 
 ### :boom: Breaking changes
@@ -232,8 +230,6 @@
 - To the translation community for the hard work on making penpot
   available on so many languages.
 
-
-
 ## 1.8.4-alpha
 
 ### :bug: Bugs fixed
@@ -261,7 +257,6 @@
 - Set proper environment variable on docker images for chrome executable.
 - Fix internal metrics on websocket connections.
 
-
 ## 1.8.0-alpha
 
 ### :boom: Breaking changes
@@ -303,12 +298,13 @@
 - Fix problem while moving imported SVG's [#1199](https://github.com/penpot/penpot/issues/1199)
 
 ### :arrow_up: Deps updates
+
 ### :boom: Breaking changes
+
 ### :heart: Community contributions by (Thank you!)
 
 - eduayme [#1129](https://github.com/penpot/penpot/pull/1129).
 
-
 ## 1.7.4-alpha
 
 ### :bug: Bugs fixed
@@ -316,14 +312,12 @@
 - Fix demo user creation (self-hosted only)
 - Add better ldap response validation and reporting (self-hosted only)
 
-
 ## 1.7.3-alpha
 
 ### :bug: Bugs fixed
 
 - Fix font uploading issue on Windows.
 
-
 ## 1.7.2-alpha
 
 ### :sparkles: New features
@@ -347,7 +341,6 @@
 
 - soultipsy [#1100](https://github.com/penpot/penpot/pull/1100)
 
-
 ## 1.7.1-alpha
 
 ### :bug: Bugs fixed
@@ -357,7 +350,6 @@
 - Fix issue on undo page deletion.
 - Fix some issues related to constraints.
 
-
 ## 1.7.0-alpha
 
 ### :sparkles: New features
@@ -392,7 +384,6 @@
 - Fix header partially visible on fullscreen viewer mode [Taiga #1875](https://tree.taiga.io/project/penpot/issue/1875)
 - Fix dynamic alignment enabled with hidden objects [#1063](https://github.com/penpot/penpot/issues/1063)
 
-
 ## 1.6.5-alpha
 
 ### :bug: Bugs fixed
@@ -417,7 +408,6 @@
 - Properly handle nil values on `update-shapes` function.
 - Replace frame term usage by artboard on viewer app.
 
-
 ## 1.6.3-alpha
 
 ### :bug: Bugs fixed
@@ -444,7 +434,6 @@
 - Minor fix on previous commit.
 - Minor improvements on svg uploading on libraries.
 
-
 ## 1.6.1-alpha
 
 ### :bug: Bugs fixed
@@ -460,7 +449,6 @@
 - Improve editor lifecycle management.
 - Make the navigation async by default.
 
-
 ## 1.6.0-alpha
 
 ### :sparkles: New features
@@ -475,7 +463,6 @@
 - Use shift instead of ctrl/cmd to keep aspect ratio [Taiga 1697](https://tree.taiga.io/project/penpot/issue/1697).
 - New translations: Portuguese (Brazil) and Romanias.
 
-
 ### :bug: Bugs fixed
 
 - Remove interactions when the destination artboard is deleted [Taiga #1656](https://tree.taiga.io/project/penpot/issue/1656).
@@ -493,7 +480,6 @@
 - Update exporter dependencies (puppeteer), that fixes some unexpected exceptions.
 - Update string manipulation library.
 
-
 ### :boom: Breaking changes
 
 - The OIDC setting `PENPOT_OIDC_SCOPES` has changed the default semantics. Before this
@@ -504,7 +490,6 @@
 
 - Translations: Portuguese (Brazil) and Romanias.
 
-
 ## 1.5.4-alpha
 
 ### :bug: Bugs fixed
@@ -512,7 +497,6 @@
 - Fix issues on group rendering.
 - Fix problem with text editing auto-height [Taiga #1683](https://tree.taiga.io/project/penpot/issue/1683)
 
-
 ## 1.5.3-alpha
 
 ### :bug: Bugs fixed
@@ -536,7 +520,6 @@
 - Increase default team invitation token expiration to 48h.
 - Fix wrong error message when an expired token is used.
 
-
 ## 1.5.0-alpha
 
 ### :sparkles: New features
@@ -582,7 +565,6 @@
 - madmath03 (by [Monogramm](https://github.com/Monogramm)) [#807](https://github.com/penpot/penpot/pull/807)
 - zzkt [#814](https://github.com/penpot/penpot/pull/814)
 
-
 ## 1.4.1-alpha
 
 ### :bug: Bugs fixed
@@ -594,7 +576,6 @@
 - Fix incorrect state management of user lang selection.
 - Fix email validation usability issue on team invitation lightbox.
 
-
 ## 1.4.0-alpha
 
 ### :sparkles: New features
@@ -617,7 +598,6 @@
 - Replace Slate-Editor with DraftJS [Taiga #1346](https://tree.taiga.io/project/penpot/us/1346)
 - Set proper page title [Taiga #1377](https://tree.taiga.io/project/penpot/us/1377)
 
-
 ### :bug: Bugs fixed
 
 - Disable buttons in view mode for users without permissions [Taiga #1328](https://tree.taiga.io/project/penpot/issue/1328)
@@ -660,13 +640,11 @@
   (example `:username`) instead of `$`. The main reason is avoid
   unnecessary conflict with bash interpolation.
 
-
 ### :arrow_up: Deps updates
 
 - Update backend to JDK16.
 - Update exporter nodejs to v14.16.0
 
-
 ### :heart: Community contributions by (Thank you!)
 
 - iblueer [#726](https://github.com/penpot/penpot/pull/726)
@@ -674,7 +652,6 @@
 - girafic [#748](https://github.com/penpot/penpot/pull/748)
 - mbrksntrk [#794](https://github.com/penpot/penpot/pull/794)
 
-
 ## 1.3.0-alpha
 
 ### :sparkles: New features
@@ -690,7 +667,6 @@
 - Disable groups interactions when holding "Ctrl" key (deep selection)
 - New action in context menu to "edit" some shapes (bound to key "Enter")
 
-
 ### :bug: Bugs fixed
 
 - Add more improvements to french translation strings [#591](https://github.com/penpot/penpot/pull/591)
@@ -711,13 +687,11 @@
 - Properly mark profile auth backend (on first register/ auth with 3rd party auth provider).
 - Refactor LDAP auth backend.
 
-
 ### :heart: Community contributions by (Thank you!)
 
 - girafic [#538](https://github.com/penpot/penpot/pull/654)
 - arkhi [#591](https://github.com/penpot/penpot/pull/591)
 
-
 ## 1.2.0-alpha
 
 ### :sparkles: New features
@@ -732,7 +706,6 @@
 - Show a pixel grid when zoom greater than 800% [#519](https://github.com/penpot/penpot/discussions/519)
 - Fix behavior of select all command when there are objects outside frames [Taiga #1209](https://tree.taiga.io/project/penpot/issue/1209)
 
-
 ### :bug: Bugs fixed
 
 - Fix 404 when access shared link [#615](https://github.com/penpot/penpot/issues/615)
@@ -768,7 +741,6 @@
 - Improved MacOS shortcuts and helpers
 - Small changes to shape creation
 
-
 ## 1.0.0-alpha
 
 Initial release

frontend/resources/styles/main/partials/zoom-widget.scss

@@ -33,15 +33,62 @@
       display: flex;
       padding: $size-2;
 
+      &.separator {
+        border-top: 1px solid $color-gray-10;
+        padding: 0px;
+        margin: 2px;
+        height: 0;
+      }
+
+      &.basic-zoom-bar {
+        cursor: auto;
+        display: flex;
+        justify-content: space-between;
+
+        &:hover {
+          background-color: $color-white;
+        }
+      }
+
       span {
         color: $color-gray-20;
         font-size: $fs14;
         margin-left: auto;
+
+        &.zoom-btns {
+          display: flex;
+          margin-left: 2px;
+          color: $color-gray-60;
+
+          p {
+            margin-bottom: 0;
+            font-size: $fs14;
+            padding: 0 3px;
+          }
+        }
       }
 
       &:hover {
         background-color: $color-primary-lighter;
       }
+
+      button {
+        cursor: pointer;
+        background-color: $color-white;
+        border: none;
+        &:hover {
+          color: $color-primary;
+        }
+      }
+      .reset-btn {
+        color: $color-primary-dark;
+      }
+      .zoom-size {
+        min-width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
     }
   }
 }

frontend/src/app/main/data/viewer.cljs

@@ -26,6 +26,7 @@
 (def ^:private
   default-local-state
   {:zoom 1
+   :fullscreen? false
    :interactions-mode :hide
    :interactions-show? false
    :comments-mode :all
@@ -209,17 +210,57 @@
     (update [_ state]
       (assoc-in state [:viewer-local :zoom] 1))))
 
-(def zoom-to-50
+(def zoom-to-fit
-  (ptk/reify ::zoom-to-50
+  (ptk/reify ::zoom-to-fit
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:viewer-local :zoom] 0.5))))
+      (let [page-id (get-in state [:route :query-params :page-id])
+            frame-idx (get-in state [:route :query-params :index])
+            srect   (get (nth (get-in state [:viewer :pages page-id :frames]) frame-idx) :selrect)
+            original-size (get-in state [:viewer-local :viewport-size])
+            wdiff (/ (:width original-size) (:width srect))
+            hdiff (/ (:height original-size) (:height srect))
+            minzoom (min wdiff hdiff)]
+        (-> state
+            (assoc-in  [:viewer-local :zoom] minzoom)
+            (assoc-in  [:viewer-local :zoom-type] :fit))))))
 
-(def zoom-to-200
+(def zoom-to-fill
-  (ptk/reify ::zoom-to-200
+  (ptk/reify ::zoom-to-fill
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:viewer-local :zoom] 2))))
+      (let [page-id (get-in state [:route :query-params :page-id])
+            frame-idx (get-in state [:route :query-params :index])
+            srect   (get (nth (get-in state [:viewer :pages page-id :frames]) frame-idx) :selrect)
+            original-size (get-in state [:viewer-local :viewport-size])
+            wdiff (/ (:width original-size) (:width srect))
+            hdiff (/ (:height original-size) (:height srect))
+            maxzoom (max wdiff hdiff)]
+        (-> state
+            (assoc-in  [:viewer-local :zoom] maxzoom)
+            (assoc-in  [:viewer-local :zoom-type] :fill))))))
+
+(def toggle-zoom-style
+  (ptk/reify ::toggle-zoom-style
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [zoom-type (get-in state [:viewer-local :zoom-type])]
+        (if (= zoom-type :fit)
+          (rx/of zoom-to-fill)
+          (rx/of zoom-to-fit))))))
+
+(def toggle-fullscreen
+  (ptk/reify ::toggle-fullscreen
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:viewer-local :fullscreen?] not))))
+
+(defn set-viewport-size
+  [{:keys [size]}]
+  (ptk/reify ::set-viewport-size
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:viewer-local :viewport-size] size))))
 
 ;; --- Local State Management
 

frontend/src/app/main/data/viewer/shortcuts.cljs

@@ -23,17 +23,17 @@
                         :command (ds/c-mod "a")
                         :fn (st/emitf (dv/select-all))}
 
-   :zoom-50            {:tooltip (ds/shift "0")
+   :reset-zoom         {:tooltip (ds/shift "0")
                         :command "shift+0"
-                        :fn (st/emitf dv/zoom-to-50)}
-
-   :reset-zoom         {:tooltip (ds/shift "1")
-                        :command "shift+1"
                         :fn (st/emitf dv/reset-zoom)}
 
-   :zoom-200           {:tooltip (ds/shift "2")
+   :toggle-zoom-style  {:tooltip "F"
-                        :command "shift+2"
+                        :command "f"
-                        :fn (st/emitf dv/zoom-to-200)}
+                        :fn (st/emitf dv/toggle-zoom-style)}
+
+   :toogle-fullscreen  {:tooltip (ds/shift "F")
+                        :command "shift+f"
+                        :fn (st/emitf dv/toggle-fullscreen)}
 
    :next-frame         {:tooltip ds/left-arrow
                         :command "left"

frontend/src/app/main/data/workspace.cljs

@@ -455,7 +455,7 @@
                                           :y (+ (:y srect) (/ (- (:height srect) height) 2)))))))
 
           (setup [state local]
-            (if (and (:vport local) (:vbox local))
+            (if (and (:vbox local) (:vport local))
               (update* local)
               (initialize state local)))]
 

frontend/src/app/main/refs.cljs

@@ -322,3 +322,7 @@
 (def users
   (l/derived :users st/state))
 
+(def fullscreen?
+  (l/derived  (fn [state]
+                (get-in state [:viewer-local :fullscreen?] []))
+              st/state))

frontend/src/app/main/ui.cljs

@@ -11,7 +11,6 @@
    [app.main.store :as st]
    [app.main.ui.auth :refer [auth]]
    [app.main.ui.auth.verify-token :refer [verify-token]]
-   [app.main.ui.components.fullscreen :as fs]
    [app.main.ui.context :as ctx]
    [app.main.ui.cursors :as c]
    [app.main.ui.dashboard :refer [dashboard]]
@@ -62,8 +61,7 @@
           [:h1 "Cursors"]
           [:& c/debug-preview]
           [:h1 "Icons"]
-          [:& i/debug-icons-preview]
+          [:& i/debug-icons-preview]])
-          ])
 
        (:dashboard-search
         :dashboard-projects
@@ -78,8 +76,7 @@
         #_[:div.modal-wrapper
            #_[:& app.main.ui.onboarding/onboarding-templates-modal]
            #_[:& app.main.ui.onboarding/onboarding-modal]
-           #_[:& app.main.ui.onboarding/onboarding-team-modal]
+           #_[:& app.main.ui.onboarding/onboarding-team-modal]]
-           ]
         (when-let [props (some-> profile (get :props {}))]
           (cond
             (and cf/onboarding-form-id
@@ -104,14 +101,13 @@
        (let [{:keys [query-params path-params]} route
              {:keys [index share-id section page-id] :or {section :interactions}} query-params
              {:keys [file-id]} path-params]
-         [:& fs/fullscreen-wrapper {}
          (if (:token query-params)
            [:& viewer/breaking-change-notice]
            [:& viewer/viewer-page {:page-id page-id
                                    :file-id file-id
                                    :section section
                                    :index index
-                                    :share-id share-id}])])
+                                   :share-id share-id}]))
 
        :render-object
        (do

frontend/src/app/main/ui/components/fullscreen.cljs

@@ -1,53 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) UXBOX Labs SL
-
-(ns app.main.ui.components.fullscreen
-  (:require
-   [app.util.dom :as dom]
-   [app.util.webapi :as wapi]
-   [rumext.alpha :as mf]))
-
-(def fullscreen-context
-  (mf/create-context))
-
-(mf/defc fullscreen-wrapper
-  [{:keys [children] :as props}]
-  (let [container (mf/use-ref)
-        state     (mf/use-state (dom/fullscreen?))
-
-        change
-        (mf/use-callback
-         (fn [_]
-           (let [val (dom/fullscreen?)]
-             (reset! state val))))
-
-        manager
-        (mf/use-memo
-         (mf/deps @state)
-         (fn []
-           (specify! state
-             cljs.core/IFn
-             (-invoke
-               ([_ val]
-                (if val
-                  (wapi/request-fullscreen (mf/ref-val container))
-                  (wapi/exit-fullscreen)))))))]
-
-    ;; NOTE: the user interaction with F11 keyboard hot-key does not
-    ;; emits the `fullscreenchange` event; that event is emitted only
-    ;; when API is used. There are no way to detect the F11 behavior
-    ;; in a uniform cross browser way.
-
-    (mf/use-effect
-     (fn []
-       (.addEventListener js/document "fullscreenchange" change)
-       (fn []
-         (.removeEventListener js/document "fullscreenchange" change))))
-
-    [:div.fullscreen-wrapper {:ref container :class (dom/classnames :fullscreen @state)}
-     [:& (mf/provider fullscreen-context) {:value manager}
-      children]]))
-

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

@@ -26,6 +26,7 @@
    [app.main.ui.viewer.thumbnails :refer [thumbnails-panel]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.webapi :as wapi]
    [goog.events :as events]
    [rumext.alpha :as mf]))
 
@@ -72,7 +73,7 @@
         zoom   (:zoom local)
         frames (:frames page)
         frame  (get frames index)
-
+        fullscreen? (mf/deref refs/fullscreen?)
         overlays (:overlays local)
 
         orig-frame
@@ -104,7 +105,14 @@
         close-overlay
         (mf/use-callback
          (fn [frame]
-            (st/emit! (dv/close-overlay (:id frame)))))]
+           (st/emit! (dv/close-overlay (:id frame)))))
+
+        set-up-new-size
+        (mf/use-callback
+         (fn [_]
+           (let [viewer-section (dom/get-element "viewer-section")
+                 size (dom/get-client-size viewer-section)]
+             (st/emit! (dv/set-viewport-size {:size size})))))]
 
     (hooks/use-shortcuts ::viewer sc/shortcuts)
 
@@ -124,6 +132,13 @@
          (fn []
            (events/unlistenByKey key1)))))
 
+    (mf/use-layout-effect
+     (fn []
+       (set-up-new-size)
+       (.addEventListener js/window "resize" set-up-new-size)
+       (fn []
+         (.removeEventListener js/window "resize" set-up-new-size))))
+
     (mf/use-layout-effect
      (mf/deps nav-scroll)
      (fn []
@@ -133,6 +148,17 @@
            (st/emit! (dv/reset-nav-scroll))
            (dom/set-scroll-pos! viewer-section nav-scroll)))))
 
+    (mf/use-layout-effect
+     (mf/deps fullscreen?)
+     (fn []
+       ;; Trigger dom fullscreen depending on our state
+       (let [wrapper     (dom/get-element "viewer-layout")
+             fullscreen-dom? (dom/fullscreen?)]
+         (when (not= fullscreen? fullscreen-dom?)
+           (if fullscreen?
+             (wapi/request-fullscreen wrapper)
+             (wapi/exit-fullscreen))))))
+
     (mf/use-layout-effect
      (mf/deps index)
      (fn []
@@ -188,10 +214,11 @@
 
            nil))))
 
-    [:div {:class (dom/classnames
+    [:div#viewer-layout {:class (dom/classnames
                                  :force-visible (:show-thumbnails local)
                                  :viewer-layout (not= section :handoff)
-                   :handoff-layout (= section :handoff))}
+                                 :handoff-layout (= section :handoff)
+                                 :fullscreen fullscreen?)}
 
      [:& header {:project project
                  :index index

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 [] (st/emit! dv/toggle-fullscreen)))
-         (fn []
-           (if @fullscreen (fullscreen false) (fullscreen true))))
 
         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-reset (st/emitf dv/reset-zoom)
-       :on-zoom-to-100 (st/emitf dv/reset-zoom)
+       :on-zoom-fill (st/emitf dv/zoom-to-fill)
-       :on-zoom-to-200 (st/emitf dv/zoom-to-200)
+       :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)]
 

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

@@ -57,16 +57,14 @@
         [:span.icon i/msg-warning]
         [:span.label (tr "workspace.header.save-error")]])]))
 
-
+(mf/defc zoom-widget-workspace
-(mf/defc zoom-widget
   {::mf/wrap [mf/memo]}
   [{:keys [zoom
            on-increase
            on-decrease
            on-zoom-reset
            on-zoom-fit
-           on-zoom-selected
+           on-zoom-selected]
-           on-fullscreen]
     :as props}]
   (let [show-dropdown? (mf/use-state false)]
     [:div.zoom-widget {:on-click #(reset! show-dropdown? true)}
@@ -75,19 +73,24 @@
      [:& dropdown {:show @show-dropdown?
                    :on-close #(reset! show-dropdown? false)}
       [:ul.dropdown
-       [:li {:on-click on-increase}
+       [:li.basic-zoom-bar
-        "Zoom in" [:span (sc/get-tooltip :increase-zoom)]]
+        [:span.zoom-btns
-       [:li {:on-click on-decrease}
+         [:button {:on-click (fn [event]
-        "Zoom out" [:span (sc/get-tooltip :decrease-zoom)]]
+                               (dom/stop-propagation event)
-       [:li {:on-click on-zoom-reset}
+                               (dom/prevent-default event)
-        "Zoom to 100%" [:span (sc/get-tooltip :reset-zoom)]]
+                               (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}
-        "Zoom to fit all" [:span (sc/get-tooltip :fit-all)]]
+        (tr "workspace.header.zoom-fit-all") [:span (sc/get-tooltip :fit-all)]]
        [:li {:on-click on-zoom-selected}
-        "Zoom to selected" [:span (sc/get-tooltip :zoom-selected)]]
+        (tr "workspace.header.zoom-selected") [:span (sc/get-tooltip :zoom-selected)]]]]]))
-       (when on-fullscreen
+
-         [:li {:on-click on-fullscreen}
-          "Full screen"])]]]))
 
 
 ;; --- Header Users
@@ -289,9 +292,7 @@
 
        (when (contains? @cf/flags :user-feedback)
          [:li.feedback {:on-click (st/emitf (rt/nav :settings-feedback))}
-          [:span (tr "labels.give-feedback")]])
+          [:span (tr "labels.give-feedback")]])]]]))
-
-       ]]]))
 
 ;; --- Header Component
 
@@ -327,7 +328,7 @@
      [:div.options-section
       [:& persistence-state-widget]
 
-      [:& zoom-widget
+      [:& zoom-widget-workspace
        {:zoom zoom
         :on-increase #(st/emit! (dw/increase-zoom nil))
         :on-decrease #(st/emit! (dw/decrease-zoom nil))

frontend/translations/en.po

@@ -2087,6 +2087,30 @@ msgstr "Saving"
 msgid "workspace.header.unsaved"
 msgstr "Unsaved changes"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.reset-zoom"
+msgstr "Reset"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-fit-all"
+msgstr "Zoom to fil all"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-selected"
+msgstr "Zoom to selected"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-fit"
+msgstr "Fit - Scale down to fit"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-fill"
+msgstr "Fill -Scale to fill"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-full-screen"
+msgstr "Full screen"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.viewer"
 msgstr "View mode (%s)"

frontend/translations/es.po

@@ -2102,6 +2102,30 @@ msgstr "Guardando"
 msgid "workspace.header.unsaved"
 msgstr "Cambios sin guardar"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.reset-zoom"
+msgstr "Restablecer"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-fit-all"
+msgstr "Zoom abarcar todo"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-selected"
+msgstr "Zoom a selección"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-fit"
+msgstr "Escalar para ajustar"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-fill"
+msgstr "Escalar para rellenar"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.zoom-full-screen"
+msgstr "Pantalla completa"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.viewer"
 msgstr "Modo de visualización (%s)"