Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 14:58:38 -05:00
Code Issues Activity

add zoom controlers

Browse source
This commit is contained in:
elhombretecla 2016-04-10 11:51:23 +02:00
parent 52d3b2c7fc
commit 57df8821f1
2 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
resources/styles/partials/workspace-bar.scss
View file

@ -142,6 +142,69 @@
}
.options-view {
align-items: center;
display: flex;
justify-content: content;
margin: 0;
margin-left: 30%;
li {
align-items: center;
display: flex;
flex-shrink: 0;
height: 30px;
margin: 0 $small;
position: relative;
width: 50px;
&.zoom-input {
width: 85px;
padding: 0 25px;
position: relative;
.add-zoom,
.remove-zoom {
align-items: center;
border-radius: 50%;
border: 1px solid $color-primary;
cursor: pointer;
color: $color-primary;
display: none;
flex-shrink: 0;
font-size: $fs20;
font-weight: bold;
height: 20px;
justify-content: center;
position: absolute;
top: 5px;
width: 20px;
}
.add-zoom {
left: -5px;
}
.remove-zoom {
right: -5px;
}
&:hover {
.add-zoom,
.remove-zoom {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
}
}
}
}
}

10
src/uxbox/ui/workspace/header.cljs
View file

@ -31,9 +31,13 @@
[own]
(when-let [{:keys [x y]} (rum/react wb/mouse-canvas-a)]
(html
[:ul.options-btn
[:li.tooltip.tooltip-bottom {:alt "x"} x]
[:li.tooltip.tooltip-bottom {:alt "y"} y]])))
[:ul.options-view
[:li.coordinates {:alt "x"} "X: " x]
[:li.coordinates {:alt "y"} "Y: " y]
[:li.zoom-input
[:span.add-zoom "+"]
[:span "100%"]
[:span.remove-zoom "-"]]])))
(def coordinates
(mx/component