3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-15 23:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix color slider not updating the hue of the ramp (#5891)

Browse source 
* 🐛 Fix color slider not updating the hue

* ✨ Add minor enhancements for ramp* component

---------

Co-authored-by: Andrey Fedorov <oran9e.red@gmail.com>
This commit is contained in:
Andrey Antukh 2025-02-18 16:42:11 +01:00 • committed by GitHub
parent 65a97167de
commit c86f14e75d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -160,7 +160,8 @@
(defonce form-token-cache-atom (atom nil)) (defonce form-token-cache-atom (atom nil))
(defn hex->value ;; FIXME: this function has confusing name
(defn- hex->value
[hex] [hex]
(when-let [tc (tinycolor/valid-color hex)] (when-let [tc (tinycolor/valid-color hex)]
(let [hex (tinycolor/->hex-string tc) (let [hex (tinycolor/->hex-string tc)
@ -183,18 +184,25 @@
on-finish-drag on-finish-drag
(mf/use-fn #(mf/set-ref-val! dragging-ref false)) (mf/use-fn #(mf/set-ref-val! dragging-ref false))
internal-color*
(mf/use-state #(hex->value color))
internal-color
(deref internal-color*)
on-change' on-change'
(mf/use-fn (mf/use-fn
(mf/deps on-change) (mf/deps on-change)
(fn [{:keys [hex alpha]}] (fn [{:keys [hex alpha] :as selector-color}]
(let [dragging? (mf/ref-val dragging-ref)] (let [dragging? (mf/ref-val dragging-ref)]
(when-not (and dragging? hex) (when-not (and dragging? hex)
(reset! internal-color* selector-color)
(on-change hex alpha)))))] (on-change hex alpha)))))]
(colorpicker/use-color-picker-css-variables! wrapper-node-ref (hex->value color)) (colorpicker/use-color-picker-css-variables! wrapper-node-ref internal-color)
[:div {:ref wrapper-node-ref} [:div {:ref wrapper-node-ref}
[:> ramp-selector* [:> ramp-selector*
{:color (hex->value color) {:color internal-color
:on-start-drag on-start-drag :on-start-drag on-start-drag
:on-finish-drag on-finish-drag :on-finish-drag on-finish-drag
:on-change on-change'}]])) :on-change on-change'}]]))