3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add color ramp

Browse source
This commit is contained in:
Florian Schroedl 2024-09-16 16:57:01 +02:00
parent ac51309f81
commit 3c4e0e2447
2 changed files with 34 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View file

@ -52,6 +52,7 @@
(mf/defc ramp-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}] (mf/defc ramp-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
(js/console.log "color" color)
(let [{hex :hex (let [{hex :hex
hue :h saturation :s value :v alpha :alpha} color hue :h saturation :s value :v alpha :alpha} color

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

@ -8,13 +8,13 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
["lodash.debounce" :as debounce] ["lodash.debounce" :as debounce]
[app.common.colors :as cc]
[app.common.data :as d] [app.common.data :as d]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.workspace.colorpicker :refer [colorpicker]]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
[app.main.ui.workspace.tokens.common :as tokens.common] [app.main.ui.workspace.tokens.common :as tokens.common]
[app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.style-dictionary :as sd]
@ -127,16 +127,15 @@ Token names should only contain letters and digits separated by . characters.")}
debounced-resolver-callback debounced-resolver-callback
(mf/use-callback (mf/use-callback
(mf/deps token callback tokens) (mf/deps token callback tokens)
(fn [event] (fn [value]
(let [input (dom/get-target-val event) (let [timeout-id (js/Symbol)
timeout-id (js/Symbol)
;; Dont execute callback when the timout-id-ref is outdated because this function got called again ;; Dont execute callback when the timout-id-ref is outdated because this function got called again
timeout-outdated-cb? #(not= (mf/ref-val timeout-id-ref) timeout-id)] timeout-outdated-cb? #(not= (mf/ref-val timeout-id-ref) timeout-id)]
(mf/set-ref-val! timeout-id-ref timeout-id) (mf/set-ref-val! timeout-id-ref timeout-id)
(js/setTimeout (js/setTimeout
(fn [] (fn []
(when (not (timeout-outdated-cb?)) (when (not (timeout-outdated-cb?))
(-> (validate-token-value+ {:input input (-> (validate-token-value+ {:input value
:name-value @name-ref :name-value @name-ref
:token token :token token
:tokens tokens}) :tokens tokens})
@ -150,12 +149,22 @@ Token names should only contain letters and digits separated by . characters.")}
(mf/defc ramp (mf/defc ramp
[{:keys [color on-change]}] [{:keys [color on-change]}]
(let [value (mf/use-state nil)] (js/console.log "color" color)
(js/console.log "@value" @value) (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 [:& ramp-selector {:color @value
:on-start-drag js/console.log :disable-opacity true
:on-finish-drag js/console.log :on-start-drag #(reset! dragging? true)
:on-change #(reset! value (:hex %))}])) :on-finish-drag #(reset! dragging? false)
:on-change on-change'}]))
(mf/defc form (mf/defc form
{::mf/wrap-props false} {::mf/wrap-props false}
@ -201,6 +210,7 @@ Token names should only contain letters and digits separated by . characters.")}
;; Value ;; Value
color (mf/use-state (when color? (:value token))) color (mf/use-state (when color? (:value token)))
color-ramp-open? (mf/use-state false)
value-ref (mf/use-var (:value token)) value-ref (mf/use-var (:value token))
token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
set-resolve-value (mf/use-callback set-resolve-value (mf/use-callback
@ -215,8 +225,14 @@ Token names should only contain letters and digits separated by . characters.")}
on-update-value (mf/use-callback on-update-value (mf/use-callback
(mf/deps on-update-value-debounced) (mf/deps on-update-value-debounced)
(fn [e] (fn [e]
(reset! value-ref (dom/get-target-val e)) (let [value (dom/get-target-val e)]
(on-update-value-debounced e))) (reset! value-ref value)
(on-update-value-debounced value))))
on-update-color (mf/use-callback
(mf/deps on-update-value-debounced)
(fn [hex-value]
(reset! value-ref hex-value)
(on-update-value-debounced hex-value)))
value-error? (when (keyword? @token-resolve-result) value-error? (when (keyword? @token-resolve-result)
(= (namespace @token-resolve-result) "error")) (= (namespace @token-resolve-result) "error"))
valid-value-field? (and valid-value-field? (and
@ -291,20 +307,21 @@ Token names should only contain letters and digits separated by . characters.")}
[:p {:key error [:p {:key error
:class (stl/css :error)} :class (stl/css :error)}
error])] error])]
;; (when color?
;; [:& ramp {:color @value-ref
;; :on-change on-update-value}])
[:& tokens.common/labeled-input {:label "Value" [:& tokens.common/labeled-input {:label "Value"
:input-props {:default-value @value-ref :input-props {:default-value @value-ref
:on-blur on-update-value :on-blur on-update-value
:on-change on-update-value} :on-change on-update-value}
:render-right (when color? :render-right (when color?
(mf/fnc [] (mf/fnc []
[:div {:class (stl/css :color-bullet)} [:div {:class (stl/css :color-bullet)
:on-click #(swap! color-ramp-open? not)}
(if @color (if @color
[:& color-bullet {:color @color [:& color-bullet {:color @color
:mini? true}] :mini? true}]
[:div {:class (stl/css :color-bullet-placeholder)}])]))}] [:div {:class (stl/css :color-bullet-placeholder)}])]))}]
(when @color-ramp-open?
[:& ramp {:color (or @token-resolve-result (:value token))
:on-change on-update-color}])
[:div {:class (stl/css-case :resolved-value true [:div {:class (stl/css-case :resolved-value true
:resolved-value-placeholder (nil? @token-resolve-result) :resolved-value-placeholder (nil? @token-resolve-result)
:resolved-value-error value-error?)} :resolved-value-error value-error?)}