mirror of
https://github.com/penpot/penpot.git
synced 2025-03-09 06:11:23 -05:00
Share color picker effect to set hue slider css variables
This commit is contained in:
Florian Schroedl
parent
2a3fc9e7bd
commit
6084c49582
2 changed files with 50 additions and 38 deletions
|
|
@ -52,6 +52,25 @@
|
|||
|
||||
;; --- Color Picker Modal
|
||||
|
||||
(defn use-color-picker-css-variables! [node-ref current-color]
|
||||
(mf/with-effect [current-color]
|
||||
(let [node (mf/ref-val node-ref)
|
||||
{:keys [r g b h v]} current-color
|
||||
rgb [r g b]
|
||||
hue-rgb (cc/hsv->rgb [h 1.0 255])
|
||||
hsl-from (cc/hsv->hsl [h 0.0 v])
|
||||
hsl-to (cc/hsv->hsl [h 1.0 v])
|
||||
|
||||
format-hsl (fn [[h s l]]
|
||||
(str/fmt "hsl(%s, %s, %s)"
|
||||
h
|
||||
(str (* s 100) "%")
|
||||
(str (* l 100) "%")))]
|
||||
(dom/set-css-property! node "--color" (str/join ", " rgb))
|
||||
(dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
|
||||
(dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
|
||||
(dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
|
||||
|
||||
(mf/defc colorpicker
|
||||
{::mf/props :obj}
|
||||
[{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}]
|
||||
|
|
@ -220,23 +239,7 @@
|
|||
(st/emit! (dc/update-colorpicker data)))
|
||||
|
||||
;; Updates the CSS color variable when there is a change in the color
|
||||
(mf/with-effect [current-color]
|
||||
(let [node (mf/ref-val node-ref)
|
||||
{:keys [r g b h v]} current-color
|
||||
rgb [r g b]
|
||||
hue-rgb (cc/hsv->rgb [h 1.0 255])
|
||||
hsl-from (cc/hsv->hsl [h 0.0 v])
|
||||
hsl-to (cc/hsv->hsl [h 1.0 v])
|
||||
|
||||
format-hsl (fn [[h s l]]
|
||||
(str/fmt "hsl(%s, %s, %s)"
|
||||
h
|
||||
(str (* s 100) "%")
|
||||
(str (* l 100) "%")))]
|
||||
(dom/set-css-property! node "--color" (str/join ", " rgb))
|
||||
(dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
|
||||
(dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
|
||||
(dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))
|
||||
(use-color-picker-css-variables! node-ref current-color)
|
||||
|
||||
;; Updates color when pixel picker is used
|
||||
(mf/with-effect [picking-color? picked-color picked-color-select]
|
||||
|
|
|
|||
|
|
@ -7,18 +7,20 @@
|
|||
(ns app.main.ui.workspace.tokens.form
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.workspace.tokens.errors :as wte]
|
||||
["lodash.debounce" :as debounce]
|
||||
[app.common.colors :as cc]
|
||||
[app.common.colors :as c]
|
||||
[app.common.data :as d]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||
[app.main.ui.workspace.colorpicker :as colorpicker]
|
||||
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
|
||||
[app.main.ui.workspace.tokens.common :as tokens.common]
|
||||
[app.main.ui.workspace.tokens.errors :as wte]
|
||||
[app.main.ui.workspace.tokens.style-dictionary :as sd]
|
||||
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[app.main.ui.workspace.tokens.update :as wtu]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -26,8 +28,7 @@
|
|||
[malli.core :as m]
|
||||
[malli.error :as me]
|
||||
[promesa.core :as p]
|
||||
[rumext.v2 :as mf]
|
||||
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]))
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
;; Schemas ---------------------------------------------------------------------
|
||||
|
||||
|
|
@ -155,21 +156,30 @@ Token names should only contain letters and digits separated by . characters.")}
|
|||
|
||||
(mf/defc ramp
|
||||
[{:keys [color on-change]}]
|
||||
(let [dragging? (mf/use-state)
|
||||
[r g b] (cc/hex->rgb color)
|
||||
[h s v] (cc/hex->hsv color)
|
||||
value (mf/use-state {:hex color
|
||||
:r r :g g :b b
|
||||
:h h :s s :v v})
|
||||
on-change' (fn [color]
|
||||
(swap! value merge color)
|
||||
(when-not (and @dragging? (:hex color))
|
||||
(on-change (:hex color))))]
|
||||
[:& ramp-selector {:color @value
|
||||
:disable-opacity true
|
||||
:on-start-drag #(reset! dragging? true)
|
||||
:on-finish-drag #(reset! dragging? false)
|
||||
:on-change on-change'}]))
|
||||
(let [wrapper-node-ref (mf/use-ref nil)
|
||||
dragging? (mf/use-state)
|
||||
hex->value (fn [hex]
|
||||
(when-let [tc (tinycolor/valid-color hex)]
|
||||
(let [hex (str "#" (tinycolor/->hex tc))
|
||||
[r g b] (c/hex->rgb hex)
|
||||
[h s v] (c/hex->hsv hex)]
|
||||
{:hex hex
|
||||
:r r :g g :b b
|
||||
:h h :s s :v v
|
||||
:alpha 1})))
|
||||
value (mf/use-state (hex->value color))
|
||||
on-change' (fn [{:keys [hex]}]
|
||||
(reset! value (hex->value hex))
|
||||
(when-not (and @dragging? hex)
|
||||
(on-change hex)))]
|
||||
(colorpicker/use-color-picker-css-variables! wrapper-node-ref @value)
|
||||
[:div {:ref wrapper-node-ref}
|
||||
[:& ramp-selector
|
||||
{:color @value
|
||||
:disable-opacity true
|
||||
:on-start-drag #(reset! dragging? true)
|
||||
:on-finish-drag #(reset! dragging? false)
|
||||
:on-change on-change'}]]))
|
||||
|
||||
(mf/defc token-value-or-errors
|
||||
[{:keys [result-or-errors]}]
|
||||
|
|
@ -343,8 +353,7 @@ Token names should only contain letters and digits separated by . characters.")}
|
|||
[:div {:class (stl/css :color-bullet-placeholder)}])]))}]
|
||||
(when @color-ramp-open?
|
||||
[:& ramp {:color (some-> (or @token-resolve-result (:value token))
|
||||
(tinycolor/valid-color)
|
||||
(tinycolor/->hex))
|
||||
(tinycolor/valid-color))
|
||||
:on-change on-update-color}])
|
||||
[:& token-value-or-errors {:result-or-errors @token-resolve-result}]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue