mirror of
https://github.com/penpot/penpot.git
synced 2025-03-14 08:41:48 -05:00
Merge pull request #149 from uxbox/189/zoom-improvements
Improve zoom control in workspace header
This commit is contained in:
commit
da1df60746
4 changed files with 85 additions and 7 deletions
|
@ -146,11 +146,51 @@
|
||||||
.zoom-input {
|
.zoom-input {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: $color-gray-10;
|
color: $color-gray-10;
|
||||||
font-size: $fs15;
|
font-size: $fs15;
|
||||||
margin: 0 $x-small;
|
margin-left: $x-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-button {
|
||||||
|
svg {
|
||||||
|
fill: $color-gray-10;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
z-index: 12;
|
||||||
|
width: 150px;
|
||||||
|
@include animation(0,.2s,fadeInDown);
|
||||||
|
|
||||||
|
background-color: $color-white;
|
||||||
|
border-radius: $br-small;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
|
li {
|
||||||
|
color: $color-gray-60;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: $fs12;
|
||||||
|
display: flex;
|
||||||
|
padding: $small;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $color-gray-40;
|
||||||
|
font-size: $fs12;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-zoom,
|
.add-zoom,
|
||||||
|
@ -161,6 +201,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $color-gray-20;
|
color: $color-gray-20;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
opacity: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: $fs20;
|
font-size: $fs20;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -169,12 +210,18 @@
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-primary;
|
color: $color-primary;
|
||||||
color: $color-gray-60;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.add-zoom,
|
||||||
|
.remove-zoom {
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-btn {
|
.options-btn {
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
(def zoom-levels
|
(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.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
|
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.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])
|
||||||
|
|
|
@ -809,6 +809,18 @@
|
||||||
(update [_ state]
|
(update [_ state]
|
||||||
(assoc-in state [:workspace-local :zoom] 1))))
|
(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
|
;; --- Grid Alignment
|
||||||
|
|
||||||
;; (defn initialize-alignment
|
;; (defn initialize-alignment
|
||||||
|
|
|
@ -31,11 +31,30 @@
|
||||||
{:wrap [mf/wrap-memo]}
|
{:wrap [mf/wrap-memo]}
|
||||||
[props]
|
[props]
|
||||||
(let [zoom (mf/deref refs/selected-zoom)
|
(let [zoom (mf/deref refs/selected-zoom)
|
||||||
|
show-dropdown? (mf/use-state false)
|
||||||
increase #(st/emit! dw/increase-zoom)
|
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
|
[:div.zoom-input
|
||||||
[:span.add-zoom {:on-click decrease} "-"]
|
[: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} "+"]]))
|
[:span.remove-zoom {:on-click increase} "+"]]))
|
||||||
|
|
||||||
;; --- Header Users
|
;; --- Header Users
|
||||||
|
|
Loading…
Add table
Reference in a new issue