From fd18a6a6d0f2e8e364db7a74f19782be9f87a5ce Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 20 May 2020 11:46:28 +0200
Subject: [PATCH 1/3] :recycle: Refactor in color picker and options

---
 .../styles/main/layouts/library-page.scss     |  2 +-
 .../src/uxbox/main/data/workspace/grid.cljs   |  2 +-
 frontend/src/uxbox/main/ui/colorpicker.cljs   | 22 +++--
 .../uxbox/main/ui/workspace/colorpicker.cljs  |  3 +-
 .../ui/workspace/sidebar/options/fill.cljs    | 79 ++-------------
 .../workspace/sidebar/options/frame_grid.cljs |  8 +-
 .../sidebar/options/rows/color_row.cljs       | 60 +++++++-----
 .../ui/workspace/sidebar/options/stroke.cljs  | 71 ++------------
 .../ui/workspace/sidebar/options/text.cljs    | 95 ++++---------------
 9 files changed, 95 insertions(+), 247 deletions(-)

diff --git a/frontend/resources/styles/main/layouts/library-page.scss b/frontend/resources/styles/main/layouts/library-page.scss
index eeadae7fe6..5fcb82b82e 100644
--- a/frontend/resources/styles/main/layouts/library-page.scss
+++ b/frontend/resources/styles/main/layouts/library-page.scss
@@ -317,7 +317,7 @@
     flex-direction: column;
     align-items: center;
 
-    & .sketch-picker {
+    & .sketch-picker, .chrome-picker {
         box-shadow: none !important;
         border: 1px solid $color-gray-10 !important;
         border-radius: 0 !important;
diff --git a/frontend/src/uxbox/main/data/workspace/grid.cljs b/frontend/src/uxbox/main/data/workspace/grid.cljs
index 31e666e7b5..cce5c49eab 100644
--- a/frontend/src/uxbox/main/data/workspace/grid.cljs
+++ b/frontend/src/uxbox/main/data/workspace/grid.cljs
@@ -21,7 +21,7 @@
 (defonce ^:private default-square-params
   {:size 16
    :color {:value "#59B9E2"
-           :opacity 0.9}})
+           :opacity 0.2}})
 
 (defonce ^:private default-layout-params
   {:size 12
diff --git a/frontend/src/uxbox/main/ui/colorpicker.cljs b/frontend/src/uxbox/main/ui/colorpicker.cljs
index ce7b333364..d94ab358ea 100644
--- a/frontend/src/uxbox/main/ui/colorpicker.cljs
+++ b/frontend/src/uxbox/main/ui/colorpicker.cljs
@@ -10,19 +10,23 @@
    [uxbox.main.store :as st]
    [goog.object :as gobj]
    [rumext.alpha :as mf]
-   ["react-color/lib/components/sketch/Sketch" :as sketch]))
+   [uxbox.util.color :refer [hex->rgb]]
+   ["react-color/lib/components/chrome/Chrome" :as pickerskin]))
 
 (mf/defc colorpicker
-  [{:keys [on-change value colors] :as props}]
-  (let [local-value (mf/use-state value)
-        on-change-complete #(do
-                              (reset! local-value %)
-                              (on-change (gobj/get % "hex")))]
+  [{:keys [on-change value opacity colors] :as props}]
+  (let [hex-value (mf/use-state (or value "#FFFFFF"))
+        alpha-value (mf/use-state (or opacity 1))
+        [r g b] (hex->rgb @hex-value)
+        on-change-complete #(let [hex (gobj/get % "hex")
+                                  opacity (-> % (gobj/get "rgb") (gobj/get "a"))]
+                              (reset! hex-value hex)
+                              (reset! alpha-value opacity)
+                              (on-change hex opacity))]
 
-    [:> sketch/default {:color @local-value
-                        :disableAlpha true
+    [:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value}
                         :presetColors colors
-                        :onChangeComplete on-change-complete
+                        :onChange on-change-complete
                         :style {:box-shadow "none"}}]))
 
 (def most-used-colors
diff --git a/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs b/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs
index 120a448ef7..bc0dbba1f9 100644
--- a/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs
@@ -14,11 +14,12 @@
 ;; --- Color Picker Modal
 
 (mf/defc colorpicker-modal
-  [{:keys [x y default value page on-change] :as props}]
+  [{:keys [x y default value opacity page on-change] :as props}]
   [:div.colorpicker-tooltip
    {:style {:left (str (- x 260) "px")
             :top (str (- y 50) "px")}}
    [:& cp/colorpicker {:value (or value default)
+                       :opacity (or opacity 1)
                        :colors (into-array @cp/most-used-colors)
                        :on-change on-change}]])
 
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
index 3f3b7d340d..17a82ae6fc 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
@@ -10,15 +10,10 @@
 (ns uxbox.main.ui.workspace.sidebar.options.fill
   (:require
    [rumext.alpha :as mf]
-   [uxbox.main.ui.icons :as i]
-   [uxbox.common.data :as d]
    [uxbox.main.data.workspace :as udw]
    [uxbox.main.store :as st]
-   [uxbox.main.ui.modal :as modal]
-   [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
-   [uxbox.util.dom :as dom]
+   [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [uxbox.util.object :as obj]
-   [uxbox.util.math :as math]
    [uxbox.util.i18n :as i18n :refer [tr t]]))
 
 (defn- fill-menu-memo-equals?
@@ -36,70 +31,14 @@
   {::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
   [{:keys [shape] :as props}]
   (let [locale (i18n/use-locale)
-
-        on-color-change
-        (fn [color]
-          (st/emit! (udw/update-shape (:id shape) {:fill-color color})))
-
-        on-color-input-change
-        (fn [event]
-          (let [input (dom/get-target event)
-                value (dom/get-value input)]
-            (when (dom/valid? input)
-              (on-color-change value))))
-
-        on-opacity-change
-        (fn [event]
-          (let [value (-> (dom/get-target event)
-                          (dom/get-value)
-                          (d/parse-integer 1)
-                          (/ 100))]
-            (st/emit! (udw/update-shape (:id shape) {:fill-opacity value}))))
-
-        show-color-picker
-        (fn [event]
-          (let [x (.-clientX event)
-                y (.-clientY event)
-                props {:x x :y y
-                       :on-change on-color-change
-                       :default "#ffffff"
-                       :value (:fill-color shape)
-                       :transparent? true}]
-            (modal/show! colorpicker-modal props)))]
-
+        color {:value (:fill-color shape)
+               :opacity (:fill-opacity shape)}
+        handle-change-color (fn [value opacity]
+                              (let [change {:fill-color value
+                                            :fill-opacity opacity}]
+                                (st/emit! (udw/update-shape (:id shape) change))))]
     [:div.element-set
      [:div.element-set-title (t locale "workspace.options.fill")]
      [:div.element-set-content
-
-      [:div.row-flex.color-data
-       [:span.color-th
-        {:style {:background-color (:fill-color shape)}
-         :on-click show-color-picker}]
-
-       [:div.color-info
-        [:input {:default-value (:fill-color shape)
-                 :ref (fn [el]
-                        (when el
-                          (set! (.-value el) (:fill-color shape))))
-                 :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
-                 :on-change on-color-input-change}]]
-
-       [:div.input-element.percentail
-        [:input.input-text {:type "number"
-                            :value (str (-> (:fill-opacity shape)
-                                            (d/coalesce 1)
-                                            (* 100)
-                                            (math/round)))
-                            :on-change on-opacity-change
-                            :min "0"
-                            :max "100"}]]
-
-       [:input.slidebar {:type "range"
-                         :min "0"
-                         :max "100"
-                         :value (str (-> (:fill-opacity shape)
-                                         (d/coalesce 1)
-                                         (* 100)
-                                         (math/round)))
-                         :step "1"
-                         :on-change on-opacity-change}]]]]))
+      [:& color-row {:value color
+                     :on-change handle-change-color}]]]))
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
index 5e2fc522f5..6b5ec94cb9 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
@@ -102,6 +102,12 @@
                                 (assoc-in [:params :size] size)
                                 (assoc-in [:params :item-length] item-length)))))
 
+        handle-change-color
+        (fn [value opacity]
+          (emit-changes! #(-> %
+                              (assoc-in [:params :color :value] value)
+                              (assoc-in [:params :color :opacity] opacity))))
+
         handle-use-default
         (fn []
           (emit-changes! #(hash-map :params ((:type grid) default-grid-params))))
@@ -200,7 +206,7 @@
                         :on-change (handle-change :params :margin)}]])
 
       [:& color-row {:value (:color params)
-                     :on-change (handle-change :params :color)}]
+                     :on-change handle-change-color}]
       [:div.row-flex
        [:button.btn-options {:disabled is-default
                              :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")]
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs
index b5f0d7b314..fd3e69bf54 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -24,41 +24,53 @@
                  :y y
                  :on-change handle-change-color
                  :value (:value color)
+                 :opacity (:opacity color)
                  :transparent? true}]
       (modal/show! colorpicker-modal props))))
 
 (defn opacity->string [opacity]
-  (str (-> opacity
-           (d/coalesce 1)
-           (* 100)
-           (math/round))))
+  (if (and opacity (not= opacity ""))
+    (str (-> opacity
+             (d/coalesce 1)
+             (* 100)
+             (math/round)))
+    ""))
 
 (defn string->opacity [opacity-str]
-  (-> opacity-str
-      (d/parse-integer 1)
-      (/ 100)))
+  (when (and opacity-str (not= "" opacity-str))
+    (-> opacity-str
+        (d/parse-integer 1)
+        (/ 100))))
 
 (mf/defc color-row [{:keys [value on-change]}]
-  (let [value (or value {:value "#FFFFFF" :opacity 1})
-        state (mf/use-state value)
-        change-color (fn [color]
-                       (let [update-color (fn [state] (assoc state :value color))]
-                         (swap! state update-color)
-                         (when on-change (on-change (update-color @state)))))
+  (let [default-value {:value "#000000" :opacity 1}
 
-        change-opacity (fn [opacity]
-                         (let [update-opacity (fn [state] (assoc state :opacity opacity))]
-                           (swap! state update-opacity)
-                           (when on-change (on-change (update-opacity @state)))))
+        parse-value (fn [value]
+                      (-> (merge default-value value)
+                          (update :value #(or % "#000000"))
+                          (update :opacity #(or % 1))))
 
-        handle-pick-color (fn [color]
-                            (change-color color))
+        state (mf/use-state (parse-value value))
+
+        change-color (fn [new-value]
+                       (let [{:keys [value opacity]} @state]
+                         (swap! state assoc :value new-value)
+                         (when on-change (on-change new-value opacity))))
+
+        change-opacity (fn [new-opacity]
+                         (let [{:keys [value opacity]} @state]
+                           (swap! state assoc :opacity new-opacity)
+                           (when (and new-opacity on-change) (on-change value new-opacity))))
+
+        handle-pick-color (fn [color opacity]
+                            (reset! state {:value color :opacity opacity})
+                            (when on-change (on-change color opacity)))
 
         handle-input-color-change (fn [event]
                                     (let [target (dom/get-target event)
                                           value (dom/get-value target)]
                                       (when (dom/valid? target)
-                                        (change-color value))))
+                                        (change-color (str "#" value)))))
         handle-opacity-change (fn [event]
                                 (-> event
                                     dom/get-target
@@ -68,7 +80,7 @@
 
     (mf/use-effect
      (mf/deps value)
-     #(reset! state value))
+     #(reset! state (parse-value value)))
 
     [:div.row-flex.color-data
      [:span.color-th
@@ -76,8 +88,8 @@
        :on-click (color-picker-callback @state handle-pick-color)}]
 
      [:div.color-info
-      [:input {:value (-> @state :value)
-               :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
+      [:input {:value (-> @state :value (subs 1))
+               :pattern "^[0-9a-fA-F]{0,6}$"
                :on-change handle-input-color-change}]]
 
      [:div.input-element.percentail
@@ -87,7 +99,7 @@
                           :min "0"
                           :max "100"}]]
 
-     [:input.slidebar {:type "range"
+     #_[:input.slidebar {:type "range"
                        :min "0"
                        :max "100"
                        :value (-> @state :opacity opacity->string)
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
index a548e5ee81..63c1839a82 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
@@ -19,7 +19,8 @@
    [uxbox.util.dom :as dom]
    [uxbox.util.object :as obj]
    [uxbox.util.i18n :as i18n :refer  [tr t]]
-   [uxbox.util.math :as math]))
+   [uxbox.util.math :as math]
+   [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]))
 
 (defn- stroke-menu-memo-equals?
   [np op]
@@ -75,35 +76,13 @@
         (fn [event]
           (st/emit! (udw/update-shape (:id shape) {:stroke-style :none})))
 
-        on-stroke-opacity-change
-        (fn [event]
-          (let [value (-> (dom/get-target event)
-                          (dom/get-value)
-                          (d/parse-integer 0)
-                          (/ 100))]
-            (st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
+        current-stroke-color {:value (:stroke-color shape)
+                              :opacity (:stroke-opacity shape)}
 
-        on-color-change
-        (fn [color]
-          (st/emit! (udw/update-shape (:id shape) {:stroke-color color})))
-
-        on-color-input-change
-        (fn [event]
-          (let [input (dom/get-target event)
-                value (dom/get-value input)]
-            (when (dom/valid? input)
-              (on-color-change value))))
-
-        show-color-picker
-        (fn [event]
-          (let [x (.-clientX event)
-                y (.-clientY event)
-                props {:x x :y y
-                       :default "#ffffff"
-                       :value (:stroke-color shape)
-                       :on-change on-color-change
-                       :transparent? true}]
-            (modal/show! colorpicker-modal props)))]
+        handle-change-stroke-color
+        (fn [value opacity]
+          (st/emit! (udw/update-shape (:id shape) {:stroke-color value
+                                                   :stroke-opacity opacity})))]
 
     (if (not= :none (:stroke-style shape :none))
       [:div.element-set
@@ -112,39 +91,9 @@
         [:div.add-page {:on-click on-del-stroke} i/minus]]
 
        [:div.element-set-content
-
         ;; Stroke Color
-        [:div.row-flex.color-data
-         [:span.color-th {:style {:background-color (:stroke-color shape)}
-                          :on-click show-color-picker}]
-         [:div.color-info
-          [:input {:default-value (:stroke-color shape)
-                   :ref (fn [el]
-                          (when el
-                            (set! (.-value el) (:stroke-color shape))))
-                   :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
-                   :on-change on-color-input-change}]]
-
-         [:div.input-element.percentail
-          [:input.input-text {:placeholder ""
-                              :value (str (-> (:stroke-opacity shape)
-                                              (d/coalesce 1)
-                                              (* 100)
-                                              (math/round)))
-                              :type "number"
-                              :on-change on-stroke-opacity-change
-                              :min "0"
-                              :max "100"}]]
-
-         [:input.slidebar {:type "range"
-                           :min "0"
-                           :max "100"
-                           :value (str (-> (:stroke-opacity shape)
-                                           (d/coalesce 1)
-                                           (* 100)
-                                           (math/round)))
-                           :step "1"
-                           :on-change on-stroke-opacity-change}]]
+        [:& color-row {:value current-stroke-color
+                       :on-change handle-change-stroke-color}]
 
         ;; Stroke Width, Alignment & Style
         [:div.row-flex
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
index fa0483b298..7f2d3f5175 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
@@ -18,12 +18,10 @@
    [uxbox.main.data.workspace.texts :as dwt]
    [uxbox.main.store :as st]
    [uxbox.main.refs :as refs]
-   [uxbox.main.ui.modal :as modal]
-   [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
    [uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
+   [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [uxbox.util.dom :as dom]
    [uxbox.main.fonts :as fonts]
-   [uxbox.util.math :as math]
    [uxbox.util.i18n :as i18n :refer [tr t]]
    ["slate" :refer [Transforms]]))
 
@@ -186,85 +184,24 @@
 
 (mf/defc text-fill-options
   [{:keys [editor shape] :as props}]
-  (let [{:keys [fill opacity]
-         :or {fill "#000000"
-              opacity 1}}
-        (dwt/current-text-values
-         {:editor editor
-          :shape shape
-          :attrs [:fill :opacity]})
+  (let [text-color (dwt/current-text-values
+                    {:editor editor
+                     :shape shape
+                     :attrs [:fill :opacity]})
 
-        opacity (math/round (* opacity 100))
+        current-color {:value (:fill text-color)
+                       :opacity (:opacity text-color)}
 
-        on-color-change
-        (fn [color]
-          (st/emit! (dwt/update-text-attrs
-                     {:id (:id shape)
-                      :editor editor
-                      :attrs {:fill color}})))
+        handle-change-color
+        (fn [value opacity]
+          (st/emit! (dwt/update-text-attrs {:id (:id shape)
+                                            :editor editor
+                                            :attrs {:fill value
+                                                    :opacity opacity}})))]
 
-        on-color-input-change
-        (fn [event]
-          (let [input (dom/get-target event)
-                value (dom/get-value input)]
-            (when (dom/valid? input)
-              (on-color-change value))))
-
-        on-opacity-change
-        (fn [event]
-          (let [value (-> (dom/get-target event)
-                          (dom/get-value))]
-            (when (str/numeric? value)
-              (let [value (-> (d/parse-integer value 1)
-                              (/ 100))]
-                (st/emit! (dwt/update-text-attrs
-                           {:id (:id shape)
-                            :editor editor
-                            :attrs {:opacity value}}))))))
-
-        show-color-picker
-        (fn [event]
-          (let [x (.-clientX event)
-                y (.-clientY event)
-                props {:x x :y y
-                       :on-change on-color-change
-                       :default "#ffffff"
-                       :value fill
-                       :transparent? true}]
-            (modal/show! colorpicker-modal props)))]
-
-    [:div.row-flex.color-data
-     [:span.color-th
-      {:style {:background-color fill}
-       :on-click show-color-picker
-       }]
-
-     [:div.color-info
-      [:input {:default-value fill
-               :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
-               :ref (fn [el]
-                      (when el
-                        (set! (.-value el) fill)))
-               :on-change on-color-input-change
-               }]]
-
-     [:div.input-element.percentail
-      [:input.input-text {:type "number"
-                          :ref (fn [el]
-                                 (when el
-                                   (set! (.-value el) opacity)))
-                          :default-value opacity
-                          :on-change on-opacity-change
-                          :min "0"
-                          :max "100"}]]
-
-     [:input.slidebar {:type "range"
-                       :min "0"
-                       :max "100"
-                       :value opacity
-                       :step "1"
-                       :on-change on-opacity-change
-                       }]]))
+    [:& color-row {:value current-color
+                   :on-change handle-change-color}]
+    ))
 
 (mf/defc spacing-options
   [{:keys [editor shape locale] :as props}]

From bcd755c9e4ce511c41e59951ae088ec84b9e342a Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 20 May 2020 11:47:08 +0200
Subject: [PATCH 2/3] :bug: Fixes some problems with texts not displaying
 correctly

---
 frontend/resources/locales.json               | 104 ++++++++++--------
 .../workspace/sidebar/options/frame_grid.cljs |  13 ++-
 2 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json
index 0f5fc05598..f39842a84b 100644
--- a/frontend/resources/locales.json
+++ b/frontend/resources/locales.json
@@ -962,7 +962,7 @@
     }
   },
   "workspace.options.fill" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:446", "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:71" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383" ],
     "translations" : {
       "en" : "Fill",
       "fr" : "Fond"
@@ -976,116 +976,116 @@
     "unused" : true
   },
   "workspace.options.font-options" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:452" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:389" ],
     "translations" : {
       "en" : "Text",
       "fr" : "TODO"
     }
   },
   "workspace.options.font-options.align-bottom" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:357" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:294" ],
     "translations" : {
       "en" : "Align bottom"
     }
   },
   "workspace.options.font-options.align-center" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:171" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:169" ],
     "translations" : {
       "en" : "Align center"
     }
   },
   "workspace.options.font-options.align-justify" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:181" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:179" ],
     "translations" : {
       "en" : "Justify"
     }
   },
   "workspace.options.font-options.align-left" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:166" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:164" ],
     "translations" : {
       "en" : "Align left"
     }
   },
   "workspace.options.font-options.align-middle" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:352" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:289" ],
     "translations" : {
       "en" : "Align middle"
     }
   },
   "workspace.options.font-options.align-right" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:176" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:174" ],
     "translations" : {
       "en" : "Align right"
     }
   },
   "workspace.options.font-options.align-top" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:347" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:284" ],
     "translations" : {
       "en" : "Align top"
     }
   },
   "workspace.options.font-options.decoration" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:378" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:315" ],
     "translations" : {
       "en" : "Decoration"
     }
   },
   "workspace.options.font-options.letter-spacing" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:304" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:241" ],
     "translations" : {
       "en" : "Letter Spacing"
     }
   },
   "workspace.options.font-options.line-height" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:292" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:229" ],
     "translations" : {
       "en" : "Line height"
     }
   },
   "workspace.options.font-options.lowercase" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:427" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:364" ],
     "translations" : {
       "en" : "Lowercase"
     }
   },
   "workspace.options.font-options.none" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:381", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:417" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:318", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:354" ],
     "translations" : {
       "en" : "None"
     }
   },
   "workspace.options.font-options.strikethrough" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:393" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:330" ],
     "translations" : {
       "en" : "Strikethrough"
     }
   },
   "workspace.options.font-options.text-case" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:414" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:351" ],
     "translations" : {
       "en" : "Case"
     }
   },
   "workspace.options.font-options.titlecase" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:432" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:369" ],
     "translations" : {
       "en" : "Titlecase"
     }
   },
   "workspace.options.font-options.underline" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:387" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:324" ],
     "translations" : {
       "en" : "Underline"
     }
   },
   "workspace.options.font-options.uppercase" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:422" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:359" ],
     "translations" : {
       "en" : "Uppercase"
     }
   },
   "workspace.options.font-options.vertical-align" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:344" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:281" ],
     "translations" : {
       "en" : "Vertical align"
     }
@@ -1111,109 +1111,121 @@
     }
   },
   "workspace.options.grid.column" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:125" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:132" ],
     "translations" : {
       "en" : "Columns"
     }
   },
   "workspace.options.grid.params.columns" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:164" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:171" ],
     "translations" : {
       "en" : "Columns"
     }
   },
   "workspace.options.grid.params.gutter" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:191" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:202" ],
     "translations" : {
       "en" : "Gutter"
     }
   },
   "workspace.options.grid.params.height" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:184" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:194" ],
     "translations" : {
       "en" : "Height"
     }
   },
   "workspace.options.grid.params.margin" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:196" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:207" ],
     "translations" : {
       "en" : "Margin"
     }
   },
   "workspace.options.grid.params.rows" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:156" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:163" ],
     "translations" : {
       "en" : "Rows"
     }
   },
   "workspace.options.grid.params.set-default" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:208" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:219" ],
     "translations" : {
       "en" : "Set as default"
     }
   },
   "workspace.options.grid.params.size" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:149" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:156" ],
     "translations" : {
       "en" : "Size"
     }
   },
   "workspace.options.grid.params.type" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:172" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:179" ],
     "translations" : {
       "en" : "Type"
     }
   },
+  "workspace.options.grid.params.type.bottom" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:187" ],
+    "translations" : {
+      "en" : "Bottom"
+    }
+  },
   "workspace.options.grid.params.type.center" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:176" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:185" ],
     "translations" : {
       "en" : "Center"
     }
   },
   "workspace.options.grid.params.type.left" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:175" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:184" ],
     "translations" : {
       "en" : "Left"
     }
   },
   "workspace.options.grid.params.type.right" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:177" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:188" ],
     "translations" : {
       "en" : "Right"
     }
   },
   "workspace.options.grid.params.type.stretch" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:174" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:181" ],
     "translations" : {
       "en" : "Stretch"
     }
   },
+  "workspace.options.grid.params.type.top" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:183" ],
+    "translations" : {
+      "en" : "Top"
+    }
+  },
   "workspace.options.grid.params.use-default" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:206" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:217" ],
     "translations" : {
       "en" : "Use default"
     }
   },
   "workspace.options.grid.params.width" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:183" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:195" ],
     "translations" : {
       "en" : "Width"
     }
   },
   "workspace.options.grid.row" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:126" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:133" ],
     "translations" : {
       "en" : "Rows"
     }
   },
   "workspace.options.grid.square" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:124" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:131" ],
     "translations" : {
       "en" : "Square"
     }
   },
   "workspace.options.grid.title" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:220" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:231" ],
     "translations" : {
       "en" : "Grid & Layouts"
     }
@@ -1311,53 +1323,53 @@
     }
   },
   "workspace.options.stroke" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:111", "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:175" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:90", "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:124" ],
     "translations" : {
       "en" : "Stroke",
       "fr" : null
     }
   },
   "workspace.options.stroke.center" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:161" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:110" ],
     "translations" : {
       "en" : "Center"
     }
   },
   "workspace.options.stroke.dashed" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:169" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:118" ],
     "translations" : {
       "en" : "Dashed",
       "fr" : "Tiré"
     }
   },
   "workspace.options.stroke.dotted" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:168" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:117" ],
     "translations" : {
       "en" : "Dotted",
       "fr" : "Pointillé"
     }
   },
   "workspace.options.stroke.inner" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:162" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:111" ],
     "translations" : {
       "en" : "Inside"
     }
   },
   "workspace.options.stroke.mixed" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:170" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:119" ],
     "translations" : {
       "en" : "Mixed",
       "fr" : "Mixte"
     }
   },
   "workspace.options.stroke.outer" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:163" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:112" ],
     "translations" : {
       "en" : "Outside"
     }
   },
   "workspace.options.stroke.solid" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:167" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:116" ],
     "translations" : {
       "en" : "Solid",
       "fr" : "Solide"
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
index 6b5ec94cb9..56affc085e 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
@@ -36,13 +36,14 @@
      [:div.advanced-options {}
       children]]))
 
-(def ^:private size-options
-  [{:value :auto :label (tr "workspace.options.grid.auto")}
+(defn- get-size-options [locale]
+  [{:value :auto :label (t locale "workspace.options.grid.auto")}
    :separator
    18 12 10 8 6 4 3 2])
 
 (mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}]
   (let [locale (i18n/use-locale)
+        size-options (get-size-options locale)
         state (mf/use-state {:show-advanced-options false
                              :changes {}})
         {:keys [type display params] :as grid} (d/deep-merge grid (:changes @state))
@@ -178,9 +179,13 @@
         [:& input-row {:label (t locale "workspace.options.grid.params.type")
                        :type :select
                        :options [{:value :stretch :label (t locale "workspace.options.grid.params.type.stretch")}
-                                 {:value :left :label (t locale "workspace.options.grid.params.type.left")}
+                                 {:value :left :label (if (= type :row)
+                                                        (t locale "workspace.options.grid.params.type.top")
+                                                        (t locale "workspace.options.grid.params.type.left"))}
                                  {:value :center :label (t locale "workspace.options.grid.params.type.center")}
-                                 {:value :right :label (t locale "workspace.options.grid.params.type.right")}]
+                                 {:value :right :label (if (= type :row)
+                                                         (t locale "workspace.options.grid.params.type.bottom")
+                                                         (t locale "workspace.options.grid.params.type.right"))}]
                        :value (:type params)
                        :on-change (handle-change :params :type)}])
 

From 6ebce57abcf3b141a86fd0d58677e5b2a75db3be Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 20 May 2020 11:47:40 +0200
Subject: [PATCH 3/3] :bug: Fixes problem when changing type

---
 .../uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs   | 4 +++-
 frontend/src/uxbox/util/color.cljs                            | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
index 56affc085e..344284b5d7 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
@@ -67,7 +67,9 @@
         (fn [type]
           (let [defaults (type default-grid-params)
                 keys (keys defaults)
-                params (->> @state :changes params (select-keys keys) (merge defaults))
+                current-changes (-> @state :changes :params (select-keys keys))
+                ;; We give more priority to the current changes
+                params (merge defaults current-changes)
                 to-merge {:type type :params params}]
             (emit-changes! #(d/deep-merge % to-merge))))
 
diff --git a/frontend/src/uxbox/util/color.cljs b/frontend/src/uxbox/util/color.cljs
index f4a7c3f616..60b75064a6 100644
--- a/frontend/src/uxbox/util/color.cljs
+++ b/frontend/src/uxbox/util/color.cljs
@@ -31,7 +31,9 @@
 
 (defn hex->rgb
   [v]
-  (into [] (gcolor/hexToRgb v)))
+  (try
+    (into [] (gcolor/hexToRgb v))
+    (catch js/Object e [0 0 0])))
 
 (defn rgb->hex
   [[r g b]]