Fix colorpicker.

resources/public/styles/partials/element-options.scss

@@ -224,9 +224,9 @@
     .color-bar-select {
       background-color: $color-white;
       height: 3px;
-      left: 0;
+      left: -4px;
       position: absolute;
-      width: 15px;
+      width: 23px;
       top: 30%;
     }
   }

src/uxbox/ui/colorpicker.cljs

@@ -9,16 +9,18 @@
             [uxbox.ui.mixins :as mx])
   (:import goog.events.EventType))
 
-(def ^:static +params-schema+
+(def ^:static ^:private +types+
-  {:picker {:width [sc/required sc/number]
+  {:library
-            :height [sc/required sc/number]}
+   {:picker {:width 205 :height 205}
-   :bar {:width [sc/required sc/number]
+    :bar {:width 15 :height 205 :img "/images/color-bar-library.png"}}
-         :height [sc/required sc/number]}
+   :options
-   :callback [sc/required sc/function]})
+   {:picker {:width 165 :height 165}
+    :bar {:width 15 :height 165 :img "/images/color-bar-options.png"}}})
+
 
 (defn- draw-color-gradient
-  [context params color]
+  [context type color]
-  (let [width (get-in params [:picker :width])
+  (let [width (get-in +types+ [type :picker :width])
         halfwidth (/ width 2)
         gradient1 (.createLinearGradient context 0 halfwidth width halfwidth)
         gradient2 (.createLinearGradient context halfwidth width halfwidth 0)]
@@ -42,22 +44,23 @@
     (.fillRect context 0 0 width width)))
 
 (defn- initialize
-  [own params]
+  [own type]
   (let [canvas1 (mx/get-ref-dom own "colorpicker")
         context1 (.getContext canvas1 "2d")
         canvas2 (mx/get-ref-dom own "colorbar")
         context2 (.getContext canvas2 "2d")
         img (js/Image.)
+        img-path (get-in +types+ [type :bar :img])
         local (:rum/local own)]
 
     (add-watch local ::key
                (fn [_ _ o v]
                  (when (not= (:color o) (:color v))
-                   (draw-color-gradient context1 params (:color v)))))
+                   (draw-color-gradient context1 type (:color v)))))
 
-    (draw-color-gradient context1 params "#FF0000")
+    (draw-color-gradient context1 type "#FF0000")
 
-    (set! (.-src img) "/images/color-bar.png")
+    (set! (.-src img) img-path)
     (let [key (events/listen img EventType.LOAD #(.drawImage context2 img 0 0))]
       {::key key})))
 
@@ -80,12 +83,12 @@
     (color/rgb->hex [r g b])))
 
 (defn- colorpicker-render
-  [own {:keys [callback] :as params}]
+  [own type callback]
   (let [local (:rum/local own)
-        cp-width (get-in params [:picker :width])
+        cp-width (get-in +types+ [type :picker :width])
-        cp-height (get-in params [:picker :height])
+        cp-height (get-in +types+ [type :picker :height])
-        cb-width (get-in params [:bar :width])
+        cb-width (get-in +types+ [type :bar :width])
-        cb-height (get-in params [:bar :height])
+        cb-height (get-in +types+ [type :bar :height])
         bar-pos (:pos @local 0)]
     (letfn [(on-bar-mouse-down [event])
             (on-bar-mouse-up [event])
@@ -119,9 +122,8 @@
 
 (defn colorpicker-did-mount
   [own]
-  (let [params (first (:rum/props own))]
+  (let [type (first (:rum/props own))]
-    (sc/validate +params-schema+ params)
+    (->> (initialize own type)
-    (->> (initialize own params)
          (merge own))))
 
 (defn colorpicker-will-unmout

src/uxbox/ui/dashboard/colors.cljs

@@ -187,9 +187,7 @@
             :on-change on-change
             :value (or (:hex @local) color "")
             :type "text"}]]
-         (colorpicker {:picker {:width 205 :height 205}
+         (colorpicker :library #(swap! local merge %))
-                       :bar {:width 15 :height 205}
-                       :callback #(swap! local merge %)})
          [:input#project-btn.btn-primary
           {:value "+ Add color"
            :on-click submit

src/uxbox/ui/workspace/options.cljs

@@ -91,9 +91,7 @@
 
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Color"]
-       (colorpicker {:picker {:width 165 :height 165}
+       (colorpicker :options #(change-stroke {:color (:hex %)}))
-                     :bar {:width 15 :height 165}
-                     :callback #(change-stroke {:color (:hex %)})})
 
        [:div.row-flex
         [:input#width.input-text
@@ -141,9 +139,7 @@
       [:div.element-set-content
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Color"]
-       (colorpicker {:picker {:width 165 :height 165}
+       (colorpicker :options on-color-picker-event)
-                     :bar {:width 15 :height 165}
-                     :callback on-color-picker-event})
        [:div.row-flex
         [:input#width.input-text
          {:placeholder "#"