Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 08:20:45 -05:00
Code Issues Activity

🎉 Add orientation buttons for frames options.

Browse source
This commit is contained in:
Andrés Moya 2020-03-26 15:32:15 +01:00 committed by Andrey Antukh
parent 97141bfb7a
commit 5f938f4f38
5 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/images/icons/size-horiz.svg Normal file
View file

@ -0,0 +1 @@
<svg height="500" viewBox="0 0 500 500.00001" width="500" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="15.5" y="78" width="469" height="344" rx="50"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

1
frontend/resources/images/icons/size-vert.svg Normal file
View file

@ -0,0 +1 @@
<svg height="500" viewBox="0 0 500 500.00001" width="500" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="78" y="15.5" width="344" height="469" rx="50"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

19
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -273,7 +273,7 @@
.custom-select-dropdown {
position: absolute;
right: 0;
left: 0;
z-index: 12;
width: 200px;
max-height: 30rem;
@ -431,3 +431,20 @@
}
}
.orientation-icon {
margin-left: $small;
svg {
stroke: $color-gray-40;
stroke-width: 30px;
height: 25px;
width: 25px;
}
&:hover {
svg {
stroke: $color-gray-10;
}
}
}

2
frontend/src/uxbox/builtins/icons.cljs
View file

@ -64,6 +64,8 @@
(def ruler-tool (icon-xref :ruler-tool))
(def save (icon-xref :save))
(def search (icon-xref :search))
(def size-horiz (icon-xref :size-horiz))
(def size-vert (icon-xref :size-vert))
(def stroke (icon-xref :stroke))
(def sublevel (icon-xref :sublevel))
(def text (icon-xref :text))

19
frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
View file

@ -31,9 +31,17 @@
on-preset-selected
(fn [width height]
(do
(st/emit! (udw/update-rect-dimensions (:id shape) :width width))
(st/emit! (udw/update-rect-dimensions (:id shape) :height height))))
(st/emit! (udw/update-rect-dimensions (:id shape) :width width)
(udw/update-rect-dimensions (:id shape) :height height)))
on-orientation-clicked
(fn [orientation]
(let [width (:width shape)
height (:height shape)
new-width (if (= orientation :horiz) (max width height) (min width height))
new-height (if (= orientation :horiz) (min width height) (max width height))]
(st/emit! (udw/update-rect-dimensions (:id shape) :width new-width)
(udw/update-rect-dimensions (:id shape) :height new-height))))
on-size-change
(fn [event attr]
@ -82,7 +90,10 @@
[:li {:key (:name size-preset)
:on-click #(on-preset-selected (:width size-preset) (:height size-preset))}
(:name size-preset)
[:span (:width size-preset) " x " (:height size-preset)]]))]]]]
[:span (:width size-preset) " x " (:height size-preset)]]))]]]
[:span.orientation-icon {on-click #(on-orientation-clicked :vert)} i/size-vert]
[:span.orientation-icon {on-click #(on-orientation-clicked :horiz)} i/size-horiz]
]
[:span (tr "workspace.options.size")]