3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-16 14:06:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

Improve zoom control in workspace header

Browse source
This commit is contained in:
Andrés Moya 2020-03-23 15:11:29 +01:00
parent f2fa7d4e5a
commit b81fb55d2c
4 changed files with 85 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/uxbox/main/constants.cljs
View file

@ -28,7 +28,7 @@
(def zoom-levels
[0.20 0.21 0.22 0.23 0.24 0.25 0.27 0.28 0.30 0.32 0.34
0.36 0.38 0.40 0.42 0.44 0.46 0.48 0.51 0.54 0.57 0.60
0.36 0.38 0.40 0.42 0.44 0.46 0.48 0.50 0.54 0.57 0.60
0.63 0.66 0.69 0.73 0.77 0.81 0.85 0.90 0.95 1.00 1.05
1.10 1.15 1.21 1.27 1.33 1.40 1.47 1.54 1.62 1.70 1.78
1.87 1.96 2.06 2.16 2.27 2.38 2.50 2.62 2.75 2.88 3.00])
1.87 1.96 2.00 2.16 2.27 2.38 2.50 2.62 2.75 2.88 3.00])

12
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -809,6 +809,18 @@
(update [_ state]
(assoc-in state [:workspace-local :zoom] 1))))
(def zoom-to-50
(ptk/reify ::zoom-to-50
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-local :zoom] 0.5))))
(def zoom-to-200
(ptk/reify ::zoom-to-200
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-local :zoom] 2))))
;; --- Grid Alignment
;; (defn initialize-alignment

23
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -31,11 +31,30 @@
{:wrap [mf/wrap-memo]}
[props]
(let [zoom (mf/deref refs/selected-zoom)
show-dropdown? (mf/use-state false)
increase #(st/emit! dw/increase-zoom)
decrease #(st/emit! dw/decrease-zoom)]
decrease #(st/emit! dw/decrease-zoom)
zoom-to-50 #(st/emit! dw/zoom-to-50)
zoom-to-100 #(st/emit! dw/reset-zoom)
zoom-to-200 #(st/emit! dw/zoom-to-200)]
[:div.zoom-input
[:span.add-zoom {:on-click decrease} "-"]
[:span {} (str (mth/round (* 100 zoom)) "%")]
[:div {:on-click #(reset! show-dropdown? true)}
[:span {} (str (mth/round (* 100 zoom)) "%")]
[:span.dropdown-button i/arrow-down]
[:& dropdown {:show @show-dropdown?
:on-close #(reset! show-dropdown? false)}
[:ul.zoom-dropdown
[:li {:on-click increase}
"Zoom in" [:span "+"]]
[:li {:on-click decrease}
"Zoom out" [:span "-"]]
[:li {:on-click zoom-to-50}
"Zoom to 50%"]
[:li {:on-click zoom-to-100}
"Zoom to 100%" [:span "Shift + 0"]]
[:li {:on-click zoom-to-200}
"Zoom to 200%"]]]]
[:span.remove-zoom {:on-click increase} "+"]]))
;; --- Header Users