From 5f938f4f38fefbda573c88341c2d65ea5719c9c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Thu, 26 Mar 2020 15:32:15 +0100
Subject: [PATCH] :tada: Add orientation buttons for frames options.

---
 .../resources/images/icons/size-horiz.svg     |  1 +
 frontend/resources/images/icons/size-vert.svg |  1 +
 .../partials/sidebar-element-options.scss     | 19 ++++++++++++++++++-
 frontend/src/uxbox/builtins/icons.cljs        |  2 ++
 .../ui/workspace/sidebar/options/frame.cljs   | 19 +++++++++++++++----
 5 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 frontend/resources/images/icons/size-horiz.svg
 create mode 100644 frontend/resources/images/icons/size-vert.svg

diff --git a/frontend/resources/images/icons/size-horiz.svg b/frontend/resources/images/icons/size-horiz.svg
new file mode 100644
index 000000000..95c19749c
--- /dev/null
+++ b/frontend/resources/images/icons/size-horiz.svg
@@ -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>
diff --git a/frontend/resources/images/icons/size-vert.svg b/frontend/resources/images/icons/size-vert.svg
new file mode 100644
index 000000000..7cb95722f
--- /dev/null
+++ b/frontend/resources/images/icons/size-vert.svg
@@ -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>
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 0ff26d454..50d98d858 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 b34e70b70..08fdd7665 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 cabf377a0..610dfcc1a 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")]