From b205e4ab50df66a0912cd00b2b8d10b1d6d43f2e Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 20 May 2020 15:37:29 +0200
Subject: [PATCH] :sparkles: Show auto placeholder on some elements

---
 .../src/uxbox/main/ui/components/editable_select.cljs     | 3 ++-
 .../main/ui/workspace/sidebar/options/frame_grid.cljs     | 6 ++++++
 .../main/ui/workspace/sidebar/options/rows/input_row.cljs | 8 +++++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/uxbox/main/ui/components/editable_select.cljs b/frontend/src/uxbox/main/ui/components/editable_select.cljs
index 5d2994d4c..b6957ebe4 100644
--- a/frontend/src/uxbox/main/ui/components/editable_select.cljs
+++ b/frontend/src/uxbox/main/ui/components/editable_select.cljs
@@ -16,7 +16,7 @@
    [uxbox.main.ui.icons :as i]
    [uxbox.main.ui.components.dropdown :refer [dropdown]]))
 
-(mf/defc editable-select [{:keys [value type options class on-change]}]
+(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
   (let [state (mf/use-state {:id (uuid/next)
                              :is-open? false
                              :current-value value})
@@ -52,6 +52,7 @@
     [:div.editable-select {:class class}
      [:input.input-text {:value (or (-> @state :current-value value->label) "")
                          :on-change handle-change-input
+                         :placeholder placeholder
                          :type type}]
      [:span.dropdown-button {:on-click open-dropdown} i/arrow-down]
 
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 344284b5d..862a6279b 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
@@ -146,6 +146,7 @@
                              :type (when (number? (:size params)) "number" )
                              :class "input-option"
                              :options size-options
+                             :placeholder "Auto"
                              :on-change handle-change-size}])
 
       [:div.grid-option-main-actions
@@ -167,6 +168,7 @@
                        :options size-options
                        :value (:size params)
                        :min 1
+                       :placeholder "Auto"
                        :on-change handle-change-size}])
 
       (when (= :column type)
@@ -175,6 +177,7 @@
                        :options size-options
                        :value (:size params)
                        :min 1
+                       :placeholder "Auto"
                        :on-change handle-change-size}])
 
       (when (#{:row :column} type)
@@ -196,6 +199,7 @@
                                 (t locale "workspace.options.grid.params.height")
                                 (t locale "workspace.options.grid.params.width"))
                        :class "pixels"
+                       :placeholder "Auto"
                        :value (or (:item-length params) "")
                        :on-change handle-change-item-length}])
 
@@ -205,10 +209,12 @@
                         :class "pixels"
                         :value (:gutter params)
                         :min 0
+                        :placeholder "0"
                         :on-change (handle-change :params :gutter)}]
          [:& input-row {:label (t locale "workspace.options.grid.params.margin")
                         :class "pixels"
                         :min 0
+                        :placeholder "0"
                         :value (:margin params)
                         :on-change (handle-change :params :margin)}]])
 
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs
index b6557e5b4..c71768428 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs
@@ -15,7 +15,7 @@
    [uxbox.main.ui.components.editable-select :refer [editable-select]]
    [uxbox.util.dom :as dom]))
 
-(mf/defc input-row [{:keys [label options value class min max on-change type]}]
+(mf/defc input-row [{:keys [label options value class min max on-change type placeholder]}]
   [:div.row-flex.input-row
    [:span.element-set-subtitle label]
    [:div.input-element {:class class}
@@ -26,11 +26,13 @@
                   :class "input-option"
                   :options options
                   :on-change on-change}]
+
       :editable-select
       [:& editable-select {:value value
                            :class "input-option"
                            :options options
                            :type (when (number? value) "number")
+                           :placeholder placeholder
                            :on-change on-change}]
 
       (let [handle-change
@@ -41,9 +43,9 @@
                            (or (not max) (<= value max)))
                   (on-change value))))]
         [:input.input-text
-         {:placeholder label
+         {:placeholder placeholder
           :type "number"
           :on-change handle-change
-          :value value}]))
+          :value (or value "")}]))
     
     ]])