Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-14 19:19:09 -05:00
Code Issues Activity

Some color picker improvements

Browse source
This commit is contained in:
Jesús Espino 2016-12-19 14:12:54 +01:00
parent e8fec61afc
commit 0c395a4371
2 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -23,10 +23,14 @@
left: 0; left: 0;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
transition: none;
} }
.picker, .picker,
.slide { .slide {
cursor: crosshair; cursor: crosshair;
svg {
transition: none;
}
} }
} }

24
frontend/src/uxbox/main/ui/colorpicker.cljs
View file

@ -107,11 +107,14 @@
(on-change hex))) (on-change hex)))
(defn- on-slide-click (defn- on-slide-click
[local dimensions event] [local dimensions on-change color event]
(let [event (.-nativeEvent event) (let [event (.-nativeEvent event)
my (.-offsetY event) my (.-offsetY event)
h (* (/ my (:s-height dimensions)) 360)] h (* (/ my (:s-height dimensions)) 360)
(swap! local assoc :color [(+ h 15) 1 255]))) hsv [(+ h 15) (second color) (nth color 2)]
hex (color/hsv->hex hsv)]
(swap! local assoc :color hsv)
(on-change hex)))
(defn- colorpicker-render (defn- colorpicker-render
[own & {:keys [value on-change theme] [own & {:keys [value on-change theme]
@ -141,7 +144,7 @@
(swap! local assoc :mousedown false)) (swap! local assoc :mousedown false))
(on-mouse-move-slide [event] (on-mouse-move-slide [event]
(when (:mousedown @local) (when (:mousedown @local)
(on-slide-click local dimensions event))) (on-slide-click local dimensions on-change color event)))
(on-mouse-move-picker [event] (on-mouse-move-picker [event]
(when (:mousedown @local) (when (:mousedown @local)
(on-picker-click local dimensions on-change color event))) (on-picker-click local dimensions on-change color event)))
@ -174,18 +177,19 @@
:on-mouse-move on-mouse-move-picker :on-mouse-move on-mouse-move-picker
:style {:backgroundColor bg}} :style {:backgroundColor bg}}
(picker-box)] (picker-box)]
[:div.picker-indicator (when-not (:mousedown @local)
{:ref "picker-indicator" [:div.picker-indicator
:style {:top (str pil "px") {:ref "picker-indicator"
:left (str pit "px") :style {:top (str pil "px")
:pointerEvents "none"}}]] :left (str pit "px")
:pointerEvents "none"}}])]
[:div.slide-wrapper [:div.slide-wrapper
[:div.slide [:div.slide
{:ref "slide" {:ref "slide"
:on-mouse-down on-mouse-down :on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up :on-mouse-up on-mouse-up
:on-mouse-move on-mouse-move-slide :on-mouse-move on-mouse-move-slide
:on-click (partial on-slide-click local dimensions)} :on-click (partial on-slide-click local dimensions on-change color)}
(slider-box)] (slider-box)]
[:div.slide-indicator [:div.slide-indicator
{:ref "slide-indicator" {:ref "slide-indicator"