From b3f50928d45e83a07bba752d7469872d369052bf Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 18 May 2016 20:49:05 +0300 Subject: [PATCH] Add input fields to colorpicker. --- resources/styles/partials/colorpicker.scss | 178 +++++++++++---------- src/uxbox/ui/colorpicker.cljs | 105 +++++++----- src/uxbox/ui/workspace/settings.cljs | 7 +- src/uxbox/util/color.cljs | 3 + 4 files changed, 167 insertions(+), 126 deletions(-) diff --git a/resources/styles/partials/colorpicker.scss b/resources/styles/partials/colorpicker.scss index 0decbc501..6752ce132 100644 --- a/resources/styles/partials/colorpicker.scss +++ b/resources/styles/partials/colorpicker.scss @@ -7,95 +7,109 @@ .color-picker { display: flex; + flex-direction: column; - /* Common stuff */ - .picker-wrapper, - .slide-wrapper { - position: relative; - } - .picker-indicator, - .slide-indicator { - position: absolute; - left: 0; - top: 0; - pointer-events: none; - } - .picker, - .slide { - cursor: crosshair; - } -} + .picker-area { + display: flex; -/* Default skin */ - -.color-picker-default { - padding: 4px; - border-radius: 2px; - - .picker { - width: 200px; - height: 200px; + /* Common stuff */ + .picker-wrapper, + .slide-wrapper { + position: relative; + } + .picker-indicator, + .slide-indicator { + position: absolute; + left: 0; + top: 0; + pointer-events: none; + } + .picker, + .slide { + cursor: crosshair; + } } - .slide { - width: 20px; - height: 200px; - } - .slide-wrapper { - margin-left: 4px; - } - .picker-indicator { - width: 5px; - height: 5px; - border: 2px solid darkblue; - border-radius: 4px; - opacity: .5; - background-color: white; - } - .slide-indicator { - width: 28px; - height: 10px; - left: -4px; - opacity: .6; - border: 4px solid lightblue; - border-radius: 4px; - background-color: white; - } -} - -/* Small skin */ - -.color-picker-small { - border-radius: 2px; - - .picker { - width: 170px; - height: 170px; + .inputs-area { + display: flex; + justify-content: space-around; } - .slide { - width: 20px; - height: 170px; + /* Default skin */ + + &.theme-default { + padding: 4px; + border-radius: 2px; + width: 230px; + + .picker { + width: 200px; + height: 200px; + } + + .slide { + width: 20px; + height: 200px; + } + .slide-wrapper { + margin-left: 4px; + } + .picker-indicator { + width: 5px; + height: 5px; + border: 2px solid darkblue; + border-radius: 4px; + opacity: .5; + background-color: white; + } + .slide-indicator { + width: 28px; + height: 10px; + left: -4px; + opacity: .6; + border: 4px solid lightblue; + border-radius: 4px; + background-color: white; + } + .inputs-area { + width: 230px; + } } - .slide-wrapper { - margin-left: 4px; - } - .picker-indicator { - width: 5px; - height: 5px; - border: 2px solid darkblue; - border-radius: 4px; - opacity: .5; - background-color: white; - } - .slide-indicator { - width: 28px; - height: 10px; - left: -4px; - opacity: .6; - border: 4px solid lightblue; - border-radius: 4px; - background-color: white; + + /* Small skin */ + + &.theme-small { + border-radius: 2px; + + .picker { + width: 170px; + height: 170px; + } + + .slide { + width: 20px; + height: 170px; + } + .slide-wrapper { + margin-left: 4px; + } + .picker-indicator { + width: 5px; + height: 5px; + border: 2px solid darkblue; + border-radius: 4px; + opacity: .5; + background-color: white; + } + .slide-indicator { + width: 28px; + height: 10px; + left: -4px; + opacity: .6; + border: 4px solid lightblue; + border-radius: 4px; + background-color: white; + } } } diff --git a/src/uxbox/ui/colorpicker.cljs b/src/uxbox/ui/colorpicker.cljs index b0fc66260..32f265c41 100644 --- a/src/uxbox/ui/colorpicker.cljs +++ b/src/uxbox/ui/colorpicker.cljs @@ -10,9 +10,11 @@ [lentes.core :as l] [goog.events :as events] [uxbox.schema :as sc] + [uxbox.ui.mixins :as mx] [uxbox.util.color :as color] [uxbox.util.math :as mth] - [uxbox.ui.mixins :as mx]) + [uxbox.util.dom :as dom] + [uxbox.util.color :as color]) (:import goog.events.EventType)) ;; --- Picker Box @@ -115,6 +117,9 @@ [own & {:keys [value on-change theme] :or {value "#d4edfb" theme :default}}] (let [local (:rum/local own) + classes (case theme + :default "theme-default" + :small "theme-small") dimensions (case theme :default default-dimensions :small small-dimensions @@ -128,47 +133,67 @@ (/ (:pi-width dimensions) 2)) sit (- (/ (* (- h 15) (:s-height dimensions)) 360) - (/ (:si-height dimensions) 2)) + (/ (:si-height dimensions) 2))] + (letfn [(on-mouse-down [event] + (swap! local assoc :mousedown true)) + (on-mouse-up [event] + (swap! local assoc :mousedown false)) + (on-mouse-move-slide [event] + (when (:mousedown @local) + (on-slide-click local dimensions event))) + (on-mouse-move-picker [event] + (when (:mousedown @local) + (on-picker-click local dimensions on-change color event))) + (on-hex-changed [event] + (let [value (-> (dom/get-target event) + (dom/get-value))] + (when (color/hex? value) + (on-change value))))] + (html + [:div.color-picker {:class classes} + [:div.picker-area + #_[:div.tester {:style {:width "100px" :height "100px" + :border "1px solid black" + :position "fixed" :top "50px" :left "50px" + :backgroundColor (color/hsv->hex color)}}] + [:div.picker-wrapper + [:div.picker + {:ref "picker" + :on-click (partial on-picker-click local dimensions on-change color) + :on-mouse-down on-mouse-down + :on-mouse-up on-mouse-up + :on-mouse-move on-mouse-move-picker + :style {:backgroundColor bg}} + (picker-box)] + [:div.picker-indicator + {:ref "picker-indicator" + :style {:top (str pil "px") + :left (str pit "px") + :pointerEvents "none"}}]] + [:div.slide-wrapper + [:div.slide + {:ref "slide" + :on-mouse-down on-mouse-down + :on-mouse-up on-mouse-up + :on-mouse-move on-mouse-move-slide + :on-click (partial on-slide-click local dimensions)} + (slider-box)] + [:div.slide-indicator + {:ref "slide-indicator" + :style {:top (str sit "px") + :pointerEvents "none"}}]]] + + [:div.inputs-area + [:input.input-text + {:placeholder "#" + :type "text" + :value value + :on-change on-hex-changed}] + [:input.input-text + {:placeholder "RGB" + :type "text"}]]])))) - on-mouse-down #(swap! local assoc :mousedown true) - on-mouse-up #(swap! local assoc :mousedown false) - on-mouse-move-slide #(when (:mousedown @local) - (on-slide-click local dimensions %)) - on-mouse-move-picker #(when (:mousedown @local) - (on-picker-click local dimensions on-change color %))] - (html - [:div.color-picker - #_[:div.tester {:style {:width "100px" :height "100px" - :border "1px solid black" - :position "fixed" :top "50px" :left "50px" - :backgroundColor (color/hsv->hex color)}}] - [:div.picker-wrapper - [:div.picker - {:ref "picker" - :on-click (partial on-picker-click local dimensions on-change color) - :on-mouse-down on-mouse-down - :on-mouse-up on-mouse-up - :on-mouse-move on-mouse-move-picker - :style {:backgroundColor bg}} - (picker-box)] - [:div.picker-indicator - {:ref "picker-indicator" - :style {:top (str pil "px") - :left (str pit "px") - :pointerEvents "none"}}]] - [:div.slide-wrapper - [:div.slide - {:ref "slide" - :on-mouse-down on-mouse-down - :on-mouse-up on-mouse-up - :on-mouse-move on-mouse-move-slide - :on-click (partial on-slide-click local dimensions)} - (slider-box)] - [:div.slide-indicator - {:ref "slide-indicator" - :style {:top (str sit "px") - :pointerEvents "none"}}]]]))) (def ^:static colorpicker (mx/component diff --git a/src/uxbox/ui/workspace/settings.cljs b/src/uxbox/ui/workspace/settings.cljs index 1f9947425..7e91becc9 100644 --- a/src/uxbox/ui/workspace/settings.cljs +++ b/src/uxbox/ui/workspace/settings.cljs @@ -80,10 +80,9 @@ :min 1 :max 100}]] [:span.lightbox-label "Grid color"] - [:div.color-picker-default - (uucp/colorpicker - :value (:grid/color form) - :on-change on-color-change)] + (uucp/colorpicker + :value (:grid/color form) + :on-change on-color-change) [:span.lightbox-label "Grid magnet option"] [:div.input-checkbox.check-primary [:input diff --git a/src/uxbox/util/color.cljs b/src/uxbox/util/color.cljs index f228fd5bb..2805ebc8e 100644 --- a/src/uxbox/util/color.cljs +++ b/src/uxbox/util/color.cljs @@ -47,3 +47,6 @@ (-> (hex->rgb data) (conj opacity))) +(defn hex? + [v] + (not (nil? (re-find #"^#[0-9A-Fa-f]{6}$" v))))