From e077ffc55372fda5076db0370e9ddd5fb34c18b2 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 29 Jan 2016 00:35:45 +0200 Subject: [PATCH] Fix colorpicker. --- .../{color-bar.png => color-bar-library.png} | Bin .../styles/partials/element-options.scss | 4 +- src/uxbox/ui/colorpicker.cljs | 42 +++++++++--------- src/uxbox/ui/dashboard/colors.cljs | 4 +- src/uxbox/ui/workspace/options.cljs | 8 +--- 5 files changed, 27 insertions(+), 31 deletions(-) rename resources/public/images/{color-bar.png => color-bar-library.png} (100%) diff --git a/resources/public/images/color-bar.png b/resources/public/images/color-bar-library.png similarity index 100% rename from resources/public/images/color-bar.png rename to resources/public/images/color-bar-library.png diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss index af2cacfaf..a9852c5d5 100644 --- a/resources/public/styles/partials/element-options.scss +++ b/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%; } } diff --git a/src/uxbox/ui/colorpicker.cljs b/src/uxbox/ui/colorpicker.cljs index 626df5583..b6e3d7a78 100644 --- a/src/uxbox/ui/colorpicker.cljs +++ b/src/uxbox/ui/colorpicker.cljs @@ -9,16 +9,18 @@ [uxbox.ui.mixins :as mx]) (:import goog.events.EventType)) -(def ^:static +params-schema+ - {:picker {:width [sc/required sc/number] - :height [sc/required sc/number]} - :bar {:width [sc/required sc/number] - :height [sc/required sc/number]} - :callback [sc/required sc/function]}) +(def ^:static ^:private +types+ + {:library + {:picker {:width 205 :height 205} + :bar {:width 15 :height 205 :img "/images/color-bar-library.png"}} + :options + {:picker {:width 165 :height 165} + :bar {:width 15 :height 165 :img "/images/color-bar-options.png"}}}) + (defn- draw-color-gradient - [context params color] - (let [width (get-in params [:picker :width]) + [context type color] + (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-height (get-in params [:picker :height]) - cb-width (get-in params [:bar :width]) - cb-height (get-in params [:bar :height]) + cp-width (get-in +types+ [type :picker :width]) + cp-height (get-in +types+ [type :picker :height]) + cb-width (get-in +types+ [type :bar :width]) + 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))] - (sc/validate +params-schema+ params) - (->> (initialize own params) + (let [type (first (:rum/props own))] + (->> (initialize own type) (merge own)))) (defn colorpicker-will-unmout diff --git a/src/uxbox/ui/dashboard/colors.cljs b/src/uxbox/ui/dashboard/colors.cljs index b082bb707..4160a97fa 100644 --- a/src/uxbox/ui/dashboard/colors.cljs +++ b/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} - :bar {:width 15 :height 205} - :callback #(swap! local merge %)}) + (colorpicker :library #(swap! local merge %)) [:input#project-btn.btn-primary {:value "+ Add color" :on-click submit diff --git a/src/uxbox/ui/workspace/options.cljs b/src/uxbox/ui/workspace/options.cljs index abba89afe..8a9549f9f 100644 --- a/src/uxbox/ui/workspace/options.cljs +++ b/src/uxbox/ui/workspace/options.cljs @@ -91,9 +91,7 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Color"] - (colorpicker {:picker {:width 165 :height 165} - :bar {:width 15 :height 165} - :callback #(change-stroke {:color (:hex %)})}) + (colorpicker :options #(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} - :bar {:width 15 :height 165} - :callback on-color-picker-event}) + (colorpicker :options on-color-picker-event) [:div.row-flex [:input#width.input-text {:placeholder "#"