Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

🐛 Fix problem with complementary colors slider in picker

Browse source
This commit is contained in:
alonso.torres 2024-03-12 17:34:24 +01:00
parent 786513863b
commit 8128171d8e
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.colors :as cc] [app.common.colors :as cc]
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.math :as mth] [app.common.math :as mth]
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]] [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
@ -118,17 +119,24 @@
:h new-hue :h new-hue
:s saturation}))) :s saturation})))
on-change-opacity (fn [new-alpha] (on-change {:alpha new-alpha}))] on-change-opacity (fn [new-alpha] (on-change {:alpha new-alpha}))
;; This colors are to display the value slider
[h1 s1 l1] (cc/hsv->hsl [hue saturation 0])
[h2 s2 l2] (cc/hsv->hsl [hue saturation 255])]
(mf/use-effect (mf/use-effect
(mf/deps canvas-ref) (mf/deps canvas-ref)
(fn [] (when canvas-ref (fn [] (when canvas-ref
(create-color-wheel (mf/ref-val canvas-ref))))) (create-color-wheel (mf/ref-val canvas-ref)))))
[:div {:class (stl/css :harmony-selector)}
[:div {:class (stl/css :harmony-selector)
:style {"--hue-from" (dm/str "hsl(" h1 ", " (* s1 100) "%, " (* l1 100) "%)")
"--hue-to" (dm/str "hsl(" h2 ", " (* s2 100) "%, " (* l2 100) "%)")}}
[:div {:class (stl/css :handlers-wrapper)} [:div {:class (stl/css :handlers-wrapper)}
[:& slider-selector {:type :value [:& slider-selector {:type :value
:vertical? true :vertical? true
:reverse? true :reverse? false
:value value :value value
:max-value 255 :max-value 255
:vertical true :vertical true

2
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
View file

@ -107,7 +107,7 @@
} }
.slider-selector.value { .slider-selector.value {
background: linear-gradient(var(--gradient-direction), #000 0%, #fff 100%); background: linear-gradient(var(--gradient-direction), var(--hue-from, #000) 0%, var(--hue-to, #fff) 100%);
} }
.slider-selector.saturation { .slider-selector.saturation {
background: linear-gradient( background: linear-gradient(