johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix applying color tokens on a row from colorpicker (#7524)

Browse Source
This commit is contained in:
Eva Marco
2025-10-17 11:10:10 +02:00
committed by GitHub
parent 2f27a78bc0
commit bbc6709943
20 changed files with 58 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/app/main/data/workspace/tokens/application.cljs
View File

@@ -466,6 +466,7 @@
(ptk/reify ::apply-token
ptk/WatchEvent
(watch [_ state _]
(prn "apply token" token attributes shape-ids)
;; We do not allow to apply tokens while text editor is open.
(when (empty? (get state :workspace-editor-state))
(let [attributes-to-remove
@@ -560,13 +561,23 @@
(update shape :applied-tokens remove-token))))))))
(defn toggle-token
[{:keys [token shapes attrs]}]
[{:keys [token attrs shape-ids expand-with-children]}]
(ptk/reify ::on-toggle-token
ptk/WatchEvent
(watch [_ _ _]
(let [{:keys [attributes all-attributes on-update-shape]}
(watch [_ state _]
(let [objects (dsh/lookup-page-objects state)
shapes (into [] (keep (d/getf objects)) shape-ids)
shapes
(if expand-with-children
(into []
(mapcat (fn [shape]
(if (= (:type shape) :group)
(keep objects (:shapes shape))
[shape])))
shapes)
shapes)
{:keys [attributes all-attributes on-update-shape]}
(get token-properties (:type token))
unapply-tokens?
(cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
shape-ids (map :id shapes)]

2
frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
View File

@@ -41,6 +41,7 @@
(mf/use-fn
(mf/deps token on-token-pill-click)
(fn [event]
(prn "entro en el on-click")
(on-token-pill-click event token)))
id-tooltip (mf/use-id)
resolved (:resolved-value token)
@@ -138,6 +139,7 @@
(fn [event token]
(dom/stop-propagation event)
(when (seq selected-shapes)
(prn "entro en on-token-pill-click")
(on-token-change event token))))
create-token-on-set

1
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View File

@@ -143,7 +143,6 @@
edit-grid?
[:& layout-container/grid-layout-edition
{:ids [edition]
:shapes shapes
:values (get objects edition)}]
(some? sp-panel)

25
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View File

@@ -56,20 +56,17 @@
n-vals (unchecked-get n-props "values")
o-fills (get o-vals :fills)
n-fills (get n-vals :fills)
o-objects (get o-vals :objects)
n-objects (get n-vals :objects)
o-applied-tokens (get o-vals :applied-tokens)
n-applied-tokens (get n-vals :applied-tokens)
o-hide (get o-vals :hide-fill-on-export)
n-hide (get n-vals :hide-fill-on-export)]
(and (identical? o-hide n-hide)
(identical? o-applied-tokens n-applied-tokens)
(identical? o-fills n-fills)
(identical? o-objects n-objects)))))
(identical? o-fills n-fills)))))
(mf/defc fill-menu*
{::mf/wrap [#(mf/memo' % check-props)]}
[{:keys [ids type values applied-tokens shapes objects]}]
[{:keys [ids type values applied-tokens]}]
(let [fills (get values :fills)
hide-on-export (get values :hide-fill-on-export false)
@@ -175,25 +172,13 @@
on-token-change
(mf/use-fn
(mf/deps shapes objects)
(mf/deps ids)
(fn [_ token]
(let [expanded-shapes
(if (= 1 (count shapes))
(let [shape (first shapes)]
(if (= (:type shape) :group)
(keep objects (:shapes shape))
[shape]))
(mapcat (fn [shape]
(if (= (:type shape) :group)
(keep objects (:shapes shape))
[shape]))
shapes))]
(st/emit!
(dwta/toggle-token {:token token
:attrs #{:fill}
:shapes expanded-shapes})))))
:shape-ids ids
:expand-with-children true}))))
on-detach-token
(mf/use-fn

29
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View File

@@ -340,7 +340,7 @@
(select-padding false false false false))
(mf/defc simple-padding-selection*
[{:keys [value on-change shapes applied-tokens ids]}]
[{:keys [value on-change applied-tokens ids]}]
(let [token-numeric-inputs
(features/use-feature "tokens/numeric-input")
@@ -373,7 +373,7 @@
nil)
on-change'
(mf/use-fn
(mf/deps on-change shapes)
(mf/deps on-change ids)
(fn [value attr event]
(if (or (string? value) (int? value))
(on-change :simple attr value event)
@@ -381,7 +381,7 @@
(let [resolved-value (:resolved-value (first value))]
(st/emit! (dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
:shape-ids ids}))
(on-change :simple attr resolved-value event))))))
on-detach-token
@@ -474,7 +474,7 @@
:value p2}]])]))
(mf/defc multiple-padding-selection*
[{:keys [value on-change shapes applied-tokens ids]}]
[{:keys [value on-change applied-tokens ids]}]
(let [token-numeric-inputs
(features/use-feature "tokens/numeric-input")
@@ -485,7 +485,7 @@
on-change'
(mf/use-fn
(mf/deps on-change shapes)
(mf/deps on-change ids)
(fn [value attr event]
(if (or (string? value) (int? value))
(on-change :multiple attr value event)
@@ -493,7 +493,7 @@
(let [resolved-value (:resolved-value (first value))]
(st/emit! (dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
:shape-ids ids}))
(on-change :multiple attr resolved-value event))))))
on-focus
@@ -701,7 +701,7 @@
(select-gap! nil))
(mf/defc gap-section*
[{:keys [is-column wrap-type on-change value applied-tokens shapes ids]
[{:keys [is-column wrap-type on-change value applied-tokens ids]
:as props}]
(let [token-numeric-inputs
(features/use-feature "tokens/numeric-input")
@@ -718,7 +718,7 @@
on-change'
(mf/use-fn
(mf/deps on-change wrap-type)
(mf/deps on-change wrap-type ids)
(fn [value attr event]
(if (or (string? value) (int? value))
@@ -727,7 +727,7 @@
(let [resolved-value (:resolved-value (first value))]
(st/emit! (dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
:shape-ids ids}))
(on-change (= "nowrap" wrap-type) attr resolved-value event))))))
on-detach-token
@@ -1083,7 +1083,7 @@
(mf/defc layout-container-menu
{::mf/memo #{:ids :values :multiple :shapes :applied-tokens}}
[{:keys [ids values multiple shapes applied-tokens]}]
[{:keys [ids values multiple applied-tokens]}]
(let [;; Display
layout-type (:layout values)
has-layout? (some? layout-type)
@@ -1339,14 +1339,12 @@
[:> gap-section* {:is-column is-column
:wrap-type wrap-type
:on-change on-gap-change
:shapes shapes
:ids ids
:applied-tokens applied-tokens
:value (:layout-gap values)}]
[:> padding-section* {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-type-change on-padding-type-change
:shapes shapes
:ids ids
:applied-tokens applied-tokens
:on-change on-padding-change}]]]
@@ -1384,14 +1382,12 @@
[:div {:class (stl/css :gap-row)}
[:> gap-section* {:on-change on-gap-change
:shapes shapes
:ids ids
:applied-tokens applied-tokens
:value (:layout-gap values)}]]
[:div {:class (stl/css :padding-row)}
[:> padding-section* {:value (:layout-padding values)
:type (:layout-padding-type values)
:shapes shapes
:applied-tokens applied-tokens
:on-type-change on-padding-type-change
:on-change on-padding-change}]]]
@@ -1399,8 +1395,8 @@
nil))]))
(mf/defc grid-layout-edition
{::mf/memo #{:ids :values :shapes :applied-tokens}}
[{:keys [ids values shapes applied-tokens]}]
{::mf/memo #{:ids :values :applied-tokens}}
[{:keys [ids values applied-tokens]}]
(let [;; Gap
saved-grid-dir (:layout-grid-dir values)
@@ -1584,7 +1580,6 @@
[:div {:class (stl/css :gap-row)}
[:> gap-section* {:on-change on-gap-change
:shapes shapes
:ids ids
:applied-tokens applied-tokens
:value (:layout-gap values)}]]

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View File

@@ -313,7 +313,7 @@
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
:shape-ids ids}))
(binding [cts/*wasm-sync* true]
(run! #(do-size-change resolved-value attr) shapes)))))))
@@ -344,7 +344,7 @@
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
:shape-ids ids}))
(binding [cts/*wasm-sync* true]
(run! #(do-position-change %1 resolved-value attr) shapes)))))))
@@ -369,7 +369,7 @@
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(dwta/toggle-token {:token (first value)
:attrs #{:rotation}
:shapes shapes}))
:shape-ids ids}))
(binding [cts/*wasm-sync* true]
(run! #(do-rotation-change resolved-value) shapes)))))))

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View File

@@ -38,8 +38,8 @@
:stroke-cap-end])
(mf/defc stroke-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps" "applied-tokens" "shapes" "objects"]))]}
[{:keys [ids type values show-caps disable-stroke-style applied-tokens shapes objects] :as props}]
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps" "applied-tokens"]))]}
[{:keys [ids type values show-caps disable-stroke-style applied-tokens] :as props}]
(let [label (case type
:multiple (tr "workspace.options.selection-stroke")
:group (tr "workspace.options.group-stroke")
@@ -209,8 +209,7 @@
:stroke value
:title (tr "workspace.options.stroke-color")
:index index
:shapes shapes
:objects objects
:ids ids
:show-caps show-caps
:on-color-change on-color-change
:on-color-detach on-color-detach

21
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
View File

@@ -43,8 +43,7 @@
on-detach-token
disable-stroke-style
select-on-focus
shapes
objects]}]
ids]}]
(let [on-drop
(fn [_ data]
@@ -105,25 +104,13 @@
on-token-change
(mf/use-fn
(mf/deps shapes objects)
(mf/deps ids)
(fn [_ token]
(let [expanded-shapes
(if (= 1 (count shapes))
(let [shape (first shapes)]
(if (= (:type shape) :group)
(keep objects (:shapes shape))
[shape]))
(mapcat (fn [shape]
(if (= (:type shape) :group)
(keep objects (:shapes shape))
[shape]))
shapes))]
(st/emit!
(dwta/toggle-token {:token token
:attrs #{:stroke-color}
:shapes expanded-shapes})))))
:shape-ids ids
:expand-with-children true}))))
stroke-style (or (:stroke-style stroke) :solid)

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View File

@@ -98,7 +98,6 @@
:ids [(:id shape)]
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -124,14 +123,12 @@
{:ids ids
:type type
:values shape
:shapes shapes
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type type
:show-caps true
:values stroke-values
:shapes shapes
:applied-tokens applied-tokens}]
[:> shadow-menu* {:ids ids :values (get shape :shadow)}]

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View File

@@ -97,7 +97,6 @@
:ids [(:id shape)]
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -123,13 +122,11 @@
{:ids ids
:type type
:values shape
:shapes shapes
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type type
:values stroke-values
:shapes shapes
:applied-tokens applied-tokens}]
[:> shadow-menu* {:ids ids :values (get shape :shadow)}]
[:& blur-menu {:ids ids

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View File

@@ -115,7 +115,6 @@
[:& layout-container-menu
{:type shape-type
:ids ids
:shapes shapes
:applied-tokens applied-tokens
:values layout-container-values
:multiple false}]
@@ -146,13 +145,11 @@
{:ids ids
:type shape-type
:values shape
:shapes shapes
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type shape-type
:values stroke-values
:shapes shapes
:applied-tokens applied-tokens}]
[:> color-selection-menu* {:type shape-type
:shapes shapes-with-children

5
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View File

@@ -123,7 +123,6 @@
:ids [(:id shape)]
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -149,16 +148,12 @@
{:type type
:ids fill-ids
:values fill-values
:shapes shapes
:objects objects
:applied-tokens fill-tokens}])
(when-not (empty? stroke-ids)
[:& stroke-menu {:type type
:ids stroke-ids
:values stroke-values
:shapes shapes
:objects objects
:applied-tokens stroke-tokens}])
[:> color-selection-menu*

5
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View File

@@ -462,7 +462,6 @@
:ids layout-container-ids
:values layout-container-values
:applied-tokens layout-contianer-tokens
:shapes shapes
:multiple true}]
(when (or is-layout-child? has-flex-layout-container?)
@@ -485,8 +484,6 @@
[:> fill/fill-menu* {:type type
:ids fill-ids
:values fill-values
:shapes shapes
:objects objects
:applied-tokens fill-tokens}])
(when-not (empty? stroke-ids)
@@ -494,8 +491,6 @@
:ids stroke-ids
:show-caps show-caps?
:values stroke-values
:shapes shapes
:objects objects
:disable-stroke-style has-text?
:applied-tokens stroke-tokens}])

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View File

@@ -97,7 +97,6 @@
:ids [(:id shape)]
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -123,14 +122,12 @@
{:ids ids
:type type
:values shape
:shapes shapes
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type type
:show-caps true
:values stroke-values
:shapes shapes
:applied-tokens applied-tokens}]
[:> shadow-menu* {:ids ids :values (get shape :shadow)}]
[:& blur-menu {:ids ids

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View File

@@ -97,7 +97,6 @@
:ids ids
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -122,13 +121,11 @@
[:> fill/fill-menu*
{:ids ids
:type type
:shapes shapes
:values shape
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type type
:shapes shapes
:values stroke-values
:applied-tokens applied-tokens}]

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View File

@@ -165,7 +165,6 @@
:ids [(:id shape)]
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -191,13 +190,11 @@
{:ids ids
:type type
:values fill-values
:shapes shapes
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type type
:values stroke-values
:shapes shapes
:applied-tokens applied-tokens}]
[:> shadow-menu* {:ids ids :values (get shape :shadow)}]

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View File

@@ -138,7 +138,6 @@
:ids ids
:values layout-container-values
:applied-tokens applied-tokens
:shapes shapes
:multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)
@@ -170,13 +169,11 @@
{:ids ids
:type type
:values fill-values
:shapes shapes
:applied-tokens applied-tokens}]
[:& stroke-menu {:ids ids
:type type
:values stroke-values
:shapes shapes
:disable-stroke-style true
:applied-tokens applied-tokens}]

1
frontend/src/app/main/ui/workspace/tokens/management.cljs
View File

@@ -145,6 +145,7 @@
[:> token-group* {:key (name type)
:is-open (get open-status type false)
:type type
:selected-ids selected
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens resolved-active-tokens

6
frontend/src/app/main/ui/workspace/tokens/management/group.cljs
View File

@@ -47,7 +47,7 @@
(mf/defc token-group*
{::mf/private true}
[{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens is-open]}]
[{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens is-open selected-ids]}]
(let [{:keys [modal title]}
(get dwta/token-properties type)
editing-ref (mf/deref refs/workspace-editor-state)
@@ -93,12 +93,12 @@
on-token-pill-click
(mf/use-fn
(mf/deps selected-shapes not-editing?)
(mf/deps not-editing? selected-ids)
(fn [event token]
(dom/stop-propagation event)
(when (and not-editing? (seq selected-shapes) (not= (:type token) :number))
(st/emit! (dwta/toggle-token {:token token
:shapes selected-shapes})))))]
:shape-ids selected-ids})))))]
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
[:> cmm/asset-section* {:icon (token-section-icon type)

8
frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs
View File

@@ -722,7 +722,7 @@
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2)
events [(dwta/toggle-token {:shapes [rect-1 rect-2]
events [(dwta/toggle-token {:shape-ids [(:id rect-1) (:id rect-2)]
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}
:on-update-shape dwta/update-shape-radius-all}
:token (toht/get-token file "borderRadius.md")})]]
@@ -753,7 +753,7 @@
rect-without-token (cths/get-shape file :rect-2)
rect-with-other-token (cths/get-shape file :rect-3)
events [(dwta/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token]
events [(dwta/toggle-token {:shape-ids [(:id rect-with-token) (:id rect-without-token) (:id rect-with-other-token)]
:token (toht/get-token file "borderRadius.sm")
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async
@@ -786,7 +786,7 @@
rect-without-token (cths/get-shape file :rect-2)
rect-with-other-token-2 (cths/get-shape file :rect-3)
events [(dwta/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2]
events [(dwta/toggle-token {:shape-ids [(:id rect-with-other-token-1) (:id rect-without-token) (:id rect-with-other-token-2)]
:token (toht/get-token file "borderRadius.sm")
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async
@@ -822,7 +822,7 @@
rect-in-layout (cths/get-shape file :rect-in-layout)
rect-regular (cths/get-shape file :rect-regular)
events [(dwta/toggle-token {:token (toht/get-token file "spacing.md")
:shapes [frame-layout rect-in-layout rect-regular]})]]
:shape-ids [(:id frame-layout) (:id rect-in-layout) (:id rect-regular)]})]]
(tohs/run-store-async
store done events
(fn [new-state]