Merge pull request #181 from uxbox/editable-rgb

Editable rgb

common/uxbox/common/spec.cljc

@@ -75,7 +75,7 @@
 
 (defn- color-conformer
   [v]
-  (if (and (string? v) (re-matches #"^#[0-9A-Fa-f]{6}$" v))
+  (if (and (string? v) (re-matches #"^#(?:[0-9a-fA-F]{3}){1,2}$" v))
     v
     ::s/invalid))
 

frontend/resources/styles/main/partials/colorpicker.scss

@@ -168,6 +168,11 @@
         border-color: $color-primary;
         color: $color-white;
       }
+
+      &:invalid {
+        border-color: $color-danger;
+      }
+
     }
   }
 

frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs

@@ -28,6 +28,13 @@
         (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)
@@ -57,9 +64,12 @@
          :on-click show-color-picker}]
 
        [:div.color-info
-        [:input {:read-only true
+        [:input {:default-value (:fill-color shape)
-                 :key (:fill-color shape)
+                 :ref (fn [el]
-                 :default-value (:fill-color shape)}]]
+                        (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"

frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs

@@ -55,11 +55,12 @@
         (fn [color]
           (st/emit! (dw/update-options {:grid-color color})))
 
-        on-color-change
+        on-color-input-change
         (fn [event]
-          (let [value (-> (dom/get-target event)
+          (let [input (dom/get-target event)
-                          (dom/get-value))]
+                value (dom/get-value input)]
-            (change-color value)))
+            (when (dom/valid? input)
+              (change-color value))))
 
         show-color-picker
         (fn [event]
@@ -89,8 +90,12 @@
        [:span.color-th {:style {:background-color (:grid-color options)}
                         :on-click show-color-picker}]
        [:div.color-info
-        [:input {:on-change on-color-change
+        [:input {:default-value (:grid-color options)
-                 :value (:grid-color options)}]]]]]))
+                 :ref (fn [el]
+                        (when el
+                          (set! (.-value el) (:grid-color options))))
+                 :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
+                 :on-change on-color-input-change}]]]]]))
 
 (mf/defc options
   [{:keys [page] :as props}]

frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs

@@ -57,6 +57,17 @@
                           (/ 100))]
             (st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
 
+        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)
@@ -64,7 +75,7 @@
                 props {:x x :y y
                        :default "#ffffff"
                        :value (:stroke-color shape)
-                       :on-change #(st/emit! (udw/update-shape (:id shape) {:stroke-color %}))
+                       :on-change on-color-change
                        :transparent? true}]
             (modal/show! colorpicker-modal props)))]
 
@@ -81,9 +92,12 @@
          [:span.color-th {:style {:background-color (:stroke-color shape)}
                           :on-click show-color-picker}]
          [:div.color-info
-          [:input {:read-only true
+          [:input {:default-value (:stroke-color shape)
-                   :key (:stroke-color shape)
+                   :ref (fn [el]
-                   :default-value (:stroke-color shape)}]]
+                          (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 ""

frontend/src/uxbox/util/dom.cljs

@@ -85,11 +85,18 @@
   (.-files node))
 
 (defn checked?
-  "Check if the node that reprsents a radio
+  "Check if the node that represents a radio
   or checkbox is checked or not."
   [node]
   (.-checked node))
 
+(defn valid?
+  "Check if the node that is a form input
+  has a valid value, against html5 form validation
+  properties (required, min/max, pattern...)."
+  [node]
+  (.-valid (.-validity node)))
+
 (defn clean-value!
   [node]
   (set! (.-value node) ""))