Editable color value directly

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

@@ -153,10 +153,14 @@
   position: relative;
 
   .color-info {
-    border: 1px solid $soft-ui-border;
+    input {
-    border-radius: $br-small;
+      border: 1px solid $soft-ui-border;
-    margin: 3px 0 0 $x-small;
+      border-radius: $br-small;
-    padding: 0 $x-small;
+      margin: 3px 0 0 $x-small;
+      padding: 0 $x-small;
+      width: 55px;
+      font-size: $fs13;
+    }
   }
 
   .type {

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

@@ -18,7 +18,8 @@
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.dom :as dom]
-            [uxbox.util.data :refer (parse-int parse-float read-string)]))
+            [uxbox.util.data :refer (parse-int parse-float read-string)]
+            [uxbox.util.spec :refer (color?)]))
 
 (defn fill-menu-render
   [own menu shape]
@@ -27,7 +28,8 @@
               (st/emit! (uds/update-fill-attrs sid value))))
           (on-color-change [event]
             (let [value (dom/event->value event)]
-              (change-fill {:color value})))
+              (when (color? value)
+                (change-fill {:color value}))))
           (on-opacity-change [event]
             (let [value (dom/event->value event)
                   value (parse-float value 1)
@@ -55,7 +57,9 @@
          {:style {:background-color (:fill shape "#000000")}
           :on-click show-color-picker}]
         [:div.color-info
-         [:span (:fill shape "#000000")]]]
+         [:input
+          {:on-change on-color-change
+           :value (:fill shape "#000000")}]]]
 
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Opacity"]

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

@@ -21,7 +21,8 @@
             [uxbox.main.ui.lightbox :as lbx]
             [uxbox.main.ui.colorpicker :as cp]
             [uxbox.util.dom :as dom]
-            [uxbox.util.data :refer (parse-int parse-float read-string)]))
+            [uxbox.util.data :refer (parse-int parse-float read-string)]
+            [uxbox.util.spec :refer (color?)]))
 
 ;; --- Helpers
 
@@ -382,6 +383,14 @@
     (swap! form-ref assoc :stroke-color "#000000"))
   (letfn [(on-change [attr color]
             (swap! form-ref assoc attr color))
+          (on-change-fill-color [event]
+            (let [value (dom/event->value event)]
+              (when (color? value)
+                (on-change :fill-color value))))
+          (on-change-stroke-color [event]
+            (let [value (dom/event->value event)]
+              (when (color? value)
+                (on-change :stroke-color value))))
           (show-picker [attr event]
             (let [x (.-clientX event)
                   y (.-clientY event)
@@ -402,7 +411,9 @@
             {:style {:background-color fill-color}
              :on-click (partial show-picker :fill-color)}]
            [:div.color-info
-            [:span fill-color]]]]
+            [:input
+             {:on-change on-change-fill-color
+              :value fill-color}]]]]
          [:div.column-half
           [:span "Stroke"]
           [:div.color-data
@@ -410,7 +421,9 @@
             {:style {:background-color stroke-color}
              :on-click (partial show-picker :stroke-color)}]
            [:div.color-info
-            [:span stroke-color]]]]]]))))
+            [:input
+             {:on-change on-change-stroke-color
+              :value stroke-color}]]]]]]))))
 
 (def color-input
   (mx/component

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

@@ -18,6 +18,7 @@
             [uxbox.main.ui.workspace.colorpicker]
             [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.data :refer [parse-int]]
+            [uxbox.util.spec :refer [color?]]
             [uxbox.util.dom :as dom]))
 
 (mx/defcs measures-menu
@@ -39,6 +40,13 @@
                 (->> (assoc metadata :height value)
                      (udp/update-metadata id)
                      (st/emit!))))
+            (on-color-change []
+              (when-let [value (-> (mx/ref-node own "color")
+                                   (dom/get-value)
+                                   (#(if (color? %) % nil)))]
+                (->> (assoc metadata :background value)
+                     (udp/update-metadata id)
+                     (st/emit!))))
           (show-color-picker [event]
             (let [x (.-clientX event)
                   y (.-clientY event)
@@ -72,7 +80,10 @@
           {:style {:background-color (or background "#ffffff")}
            :on-click show-color-picker}]
          [:div.color-info
-          [:span (or background "#ffffff")]]]]])))
+          [:input
+           {:on-change on-color-change
+            :ref "color"
+            :value (or background "#ffffff")}]]]]])))
 
 (mx/defcs grid-options-menu
   {:mixins [mx/static mx/reactive]}
@@ -92,6 +103,13 @@
                 (st/emit!
                  (->> (assoc metadata :grid-y-axis value)
                       (udw/update-metadata id)))))
+            (on-color-change []
+              (when-let [value (-> (mx/ref-node own "color")
+                                   (dom/get-value)
+                                   (#(if (color? %) % nil)))]
+                (->> (assoc metadata :grid-color value)
+                     (udp/update-metadata id)
+                     (st/emit!))))
             (on-magnet-change []
               (let [checked? (dom/checked? (mx/ref-node own "magnet"))
                     metadata (assoc metadata :grid-alignment checked?)]
@@ -124,12 +142,15 @@
             :on-change on-y-change
             :placeholder "y"}]]]
         [:span "Color"]
-        [:div.row-flex.color-dat
+        [:div.row-flex.color-data
          [:span.color-th
           {:style {:background-color (:grid-color metadata "#cccccc")}
            :on-click show-color-picker}]
          [:div.color-info
-          [:span (:grid-color metadata "#cccccc")]]]
+          [:input
+           {:on-change on-color-change
+            :ref "color"
+            :value (:grid-color metadata "#cccccc")}]]]
 
         [:span "Magnet option"]
         [:div.row-flex

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

@@ -18,7 +18,8 @@
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.dom :as dom]
-            [uxbox.util.data :refer (parse-int parse-float read-string)]))
+            [uxbox.util.data :refer (parse-int parse-float read-string)]
+            [uxbox.util.spec :refer (color?)]))
 
 (defn- stroke-menu-render
   [own menu shape]
@@ -38,6 +39,10 @@
             (let [value (dom/event->value event)
                   value (read-string value)]
               (change-stroke {:type value})))
+          (on-stroke-color-change [event]
+            (let [value (dom/event->value event)]
+              (when (color? value)
+                (change-stroke {:color value}))))
           (show-color-picker [event]
             (let [x (.-clientX event)
                   y (.-clientY event)
@@ -75,7 +80,9 @@
            {:style {:background-color (:stroke shape "#000000")}
             :on-click show-color-picker}]
           [:div.color-info
-           [:span (:stroke shape "#000000")]]]
+           [:input
+            {:on-change on-stroke-color-change
+             :value (:stroke shape "#000000")}]]]
 
          [:span "Opacity"]
          [:div.row-flex