Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 01:58:44 -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;
top: 0;
pointer-events: none;
transition: none;
}
.picker,
.slide {
cursor: crosshair;
svg {
transition: none;
}
}
}

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

@ -107,11 +107,14 @@
(on-change hex)))
(defn- on-slide-click
[local dimensions event]
[local dimensions on-change color event]
(let [event (.-nativeEvent event)
my (.-offsetY event)
h (* (/ my (:s-height dimensions)) 360)]
(swap! local assoc :color [(+ h 15) 1 255])))
h (* (/ my (:s-height dimensions)) 360)
hsv [(+ h 15) (second color) (nth color 2)]
hex (color/hsv->hex hsv)]
(swap! local assoc :color hsv)
(on-change hex)))
(defn- colorpicker-render
[own & {:keys [value on-change theme]
@ -141,7 +144,7 @@
(swap! local assoc :mousedown false))
(on-mouse-move-slide [event]
(when (:mousedown @local)
(on-slide-click local dimensions event)))
(on-slide-click local dimensions on-change color event)))
(on-mouse-move-picker [event]
(when (:mousedown @local)
(on-picker-click local dimensions on-change color event)))
@ -174,18 +177,19 @@
: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"}}]]
(when-not (:mousedown @local)
[: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)}
:on-click (partial on-slide-click local dimensions on-change color)}
(slider-box)]
[:div.slide-indicator
{:ref "slide-indicator"