diff --git a/frontend/resources/images/icons/size-horiz.svg b/frontend/resources/images/icons/size-horiz.svg
new file mode 100644
index 0000000000..95c19749c9
--- /dev/null
+++ b/frontend/resources/images/icons/size-horiz.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/size-vert.svg b/frontend/resources/images/icons/size-vert.svg
new file mode 100644
index 0000000000..7cb95722f3
--- /dev/null
+++ b/frontend/resources/images/icons/size-vert.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 0ff26d4546..50d98d8583 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -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;
+ }
+ }
+}
diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs
index b34e70b709..08fdd76653 100644
--- a/frontend/src/uxbox/builtins/icons.cljs
+++ b/frontend/src/uxbox/builtins/icons.cljs
@@ -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))
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
index cabf377a00..610dfcc1a2 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
@@ -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")]