From 5cea9f1a36baac1b3f629ebc42299f547715dd7b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 22 Dec 2015 10:19:04 +0200 Subject: [PATCH] Add colorpicker styles and minor changes. --- frontend/uxbox/ui/colorpicker.cljs | 19 +++++++++---------- resources/public/styles/main.scss | 1 + .../public/styles/partials/colorpicker.scss | 6 ++++++ 3 files changed, 16 insertions(+), 10 deletions(-) create mode 100644 resources/public/styles/partials/colorpicker.scss diff --git a/frontend/uxbox/ui/colorpicker.cljs b/frontend/uxbox/ui/colorpicker.cljs index 17f6bebb6..4c7c9ae25 100644 --- a/frontend/uxbox/ui/colorpicker.cljs +++ b/frontend/uxbox/ui/colorpicker.cljs @@ -16,10 +16,8 @@ (let [canvas (util/get-ref-dom own "colorpicker") context (.getContext canvas "2d") brect (.getBoundingClientRect canvas) - ox (.-left brect) - oy (.-top brect) - x (- (.-pageX e) ox) - y (- (.-pageY e) oy) + x (- (.-pageX e) (.-left brect)) + y (- (.-pageY e) (.-top brect)) image (.getImageData context x y 1 1) r (aget (.-data image) 0) g (aget (.-data image) 1) @@ -30,12 +28,13 @@ (defn colorpicker-render [own callback] (html - [:canvas - {:width "400" - :height "300" - :on-click #(on-click-handler % own callback) - :id "colorpicker" - :ref "colorpicker"}])) + [:section.colorpicker + [:canvas + {:width "400" + :height "300" + :on-click #(on-click-handler % own callback) + :id "colorpicker" + :ref "colorpicker"}]])) (defn colorpicker-did-mount [own] diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss index d2f83af16..0ae9aafe3 100644 --- a/resources/public/styles/main.scss +++ b/resources/public/styles/main.scss @@ -43,3 +43,4 @@ @import 'partials/library-bar'; @import 'partials/lightbox'; @import 'partials/color-palette'; +@import 'partials/colorpicker'; diff --git a/resources/public/styles/partials/colorpicker.scss b/resources/public/styles/partials/colorpicker.scss new file mode 100644 index 000000000..63bfc9e61 --- /dev/null +++ b/resources/public/styles/partials/colorpicker.scss @@ -0,0 +1,6 @@ +.colorpicker { + canvas { + border: 1px solid #111111; + cursor: cell; + } +} \ No newline at end of file