From 8d789a4d7d0213f6209485616a8f13679c91b85f Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 4 Jun 2020 15:38:22 +0200
Subject: [PATCH] :sparkles: Selects all text when clicking in an input

---
 .../uxbox/main/ui/workspace/sidebar/options/frame.cljs |  7 ++++++-
 .../main/ui/workspace/sidebar/options/measures.cljs    | 10 ++++++++--
 .../ui/workspace/sidebar/options/rows/color_row.cljs   |  5 ++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

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 93bcba6492..046ac1725a 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
@@ -68,7 +68,8 @@
         on-width-change #(on-size-change % :width)
         on-height-change #(on-size-change % :height)
         on-pos-x-change #(on-position-change % :x)
-        on-pos-y-change #(on-position-change % :y)]
+        on-pos-y-change #(on-position-change % :y)
+        select-all #(-> % (dom/get-target) (.select))]
 
     [:div.element-set
 
@@ -103,6 +104,7 @@
        [:div.input-element.pixels
         [:input.input-text {:type "number"
                             :min "0"
+                            :on-click select-all
                             :on-change on-width-change
                             :value (-> (:width shape)
                                        (math/precision 2)
@@ -112,6 +114,7 @@
        [:div.input-element.pixels
         [:input.input-text {:type "number"
                             :min "0"
+                            :on-click select-all
                             :on-change on-height-change
                             :value (-> (:height shape)
                                        (math/precision 2)
@@ -123,6 +126,7 @@
        [:div.input-element.pixels
         [:input.input-text {:placeholder "x"
                             :type "number"
+                            :on-click select-all
                             :on-change on-pos-x-change
                             :value (-> (:x shape)
                                        (math/precision 2)
@@ -130,6 +134,7 @@
        [:div.input-element.pixels
         [:input.input-text {:placeholder "y"
                             :type "number"
+                            :on-click select-all
                             :on-change on-pos-y-change
                             :value (-> (:y shape)
                                        (math/precision 2)
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs
index 7d6ecb6a23..67df6b9ce5 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs
@@ -22,7 +22,6 @@
    [uxbox.util.i18n :refer [t] :as i18n]))
 
 ;; -- User/drawing coords
-
 (mf/defc measures-menu
   [{:keys [shape options] :as props}]
   (let [options (or options #{:size :position :rotation :radius})
@@ -72,7 +71,8 @@
         on-width-change #(on-size-change % :width)
         on-height-change #(on-size-change % :height)
         on-pos-x-change #(on-position-change % :x)
-        on-pos-y-change #(on-position-change % :y)]
+        on-pos-y-change #(on-position-change % :y)
+        select-all #(-> % (dom/get-target) (.select))]
 
     [:div.element-set
      [:div.element-set-content
@@ -90,6 +90,7 @@
           [:input.input-text {:type "number"
                               :min "0"
                               :no-validate true
+                              :on-click select-all
                               :on-change on-width-change
                               :value (str (-> (:width shape)
                                               (d/coalesce 0)
@@ -100,6 +101,7 @@
           [:input.input-text {:type "number"
                               :min "0"
                               :no-validate true
+                              :on-click select-all
                               :on-change on-height-change
                               :value (str (-> (:height shape)
                                               (d/coalesce 0)
@@ -113,12 +115,14 @@
           [:input.input-text {:placeholder "x"
                               :type "number"
                               :no-validate true
+                              :on-click select-all
                               :on-change on-pos-x-change
                               :value (-> shape :selrect :x (math/precision 2))}]]
          [:div.input-element.Yaxis
           [:input.input-text {:placeholder "y"
                               :type "number"
                               :no-validate true
+                              :on-click select-all
                               :on-change on-pos-y-change
                               :value (-> shape :selrect :y (math/precision 2))}]]])
 
@@ -132,6 +136,7 @@
             :no-validate true
             :min "0"
             :max "359"
+            :on-click select-all
             :on-change on-rotation-change
             :value (str (-> (:rotation shape)
                             (d/coalesce 0)
@@ -154,6 +159,7 @@
           [:input.input-text
            {:placeholder "rx"
             :type "number"
+            :on-click select-all
             :on-change on-radius-change
             :value (str (-> (:rx shape)
                             (d/coalesce 0)
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 ca6df40032..68d3bfe45d 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
@@ -77,7 +77,8 @@
                                     dom/get-target
                                     dom/get-value
                                     string->opacity
-                                    change-opacity))]
+                                    change-opacity))
+        select-all #(-> % (dom/get-target) (.select))]
 
     (mf/use-effect
      (mf/deps value)
@@ -91,12 +92,14 @@
      [:div.color-info
       [:input {:value (-> @state :value (subs 1))
                :pattern "^[0-9a-fA-F]{0,6}$"
+               :on-click select-all
                :on-change handle-input-color-change}]]
 
      (when (not disable-opacity)
        [:div.input-element.percentail
         [:input.input-text {:type "number"
                             :value (-> @state :opacity opacity->string)
+                            :on-click select-all
                             :on-change handle-opacity-change
                             :min "0"
                             :max "100"}]])