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

🐛 Fix review selected colors (#7715)

Browse Source 
* 🐛 Fix gap between token sets

* 🐛 Show token selected on color selecction modal
This commit is contained in:
Eva Marco
2025-11-12 10:04:29 +01:00
committed by GitHub
parent f2f8a488ad
commit 05bea14a88
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,7 @@
(dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))) (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
(mf/defc colorpicker (mf/defc colorpicker
[{:keys [data disable-gradient disable-opacity disable-image on-change on-accept origin combined-tokens color-origin on-token-change tab]}] [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept origin combined-tokens color-origin on-token-change tab applied-token]}]
(let [state (mf/deref refs/colorpicker) (let [state (mf/deref refs/colorpicker)
node-ref (mf/use-ref) node-ref (mf/use-ref)
@@ -542,6 +542,7 @@
[:> token-section* {:combined-tokens combined-tokens [:> token-section* {:combined-tokens combined-tokens
:on-token-change on-token-change :on-token-change on-token-change
:applied-token applied-token
:color-origin color-origin}])] :color-origin color-origin}])]
(when (fn? on-accept) (when (fn? on-accept)
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
@@ -728,6 +729,7 @@
on-token-change on-token-change
on-close on-close
tab tab
applied-token
on-accept]}] on-accept]}]
(let [vport (mf/deref viewport) (let [vport (mf/deref viewport)
dirty? (mf/use-var false) dirty? (mf/use-var false)
@@ -790,6 +792,7 @@
:disable-opacity disable-opacity :disable-opacity disable-opacity
:disable-image disable-image :disable-image disable-image
:on-token-change on-token-change :on-token-change on-token-change
:applied-token applied-token
:on-change on-change' :on-change on-change'
:origin origin :origin origin
:tab tab :tab tab

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

@@ -103,7 +103,7 @@
(mf/defc set-section* (mf/defc set-section*
{::mf/private true} {::mf/private true}
[{:keys [collapsed toggle-sets-open group-or-set name color-origin on-token-change] :rest props}] [{:keys [collapsed toggle-sets-open group-or-set name color-origin on-token-change applied-token] :rest props}]
(let [list-style* (mf/use-state :list) (let [list-style* (mf/use-state :list)
list-style (deref list-style*) list-style (deref list-style*)
@@ -207,8 +207,7 @@
(let [selected? (case color-origin (let [selected? (case color-origin
:fill (= has-color-tokens? (:name token)) :fill (= has-color-tokens? (:name token))
:stroke-color (= has-stroke-tokens? (:name token)) :stroke-color (= has-stroke-tokens? (:name token))
:color-selection (or (= has-color-tokens? (:name token)) :color-selection (= applied-token (:name token))
(= has-stroke-tokens? (:name token)))
false)] false)]
(if (= :grid list-style) (if (= :grid list-style)
[:> grid-item* {:key (str "token-grid-" (:id token)) [:> grid-item* {:key (str "token-grid-" (:id token))
@@ -266,7 +265,7 @@
(mf/defc token-section* (mf/defc token-section*
{} {}
[{:keys [combined-tokens color-origin on-token-change] :rest props}] [{:keys [combined-tokens color-origin on-token-change applied-token] :rest props}]
(let [sets (set (mapv label-group-or-set combined-tokens)) (let [sets (set (mapv label-group-or-set combined-tokens))
filter-term* (mf/use-state "") filter-term* (mf/use-state "")
filter-term (deref filter-term*) filter-term (deref filter-term*)
@@ -311,6 +310,7 @@
:color-origin color-origin :color-origin color-origin
:on-token-change on-token-change :on-token-change on-token-change
:name name :name name
:applied-token applied-token
:group-or-set combined-sets}]))] :group-or-set combined-sets}]))]
[:> token-empty-state*])] [:> token-empty-state*])]
[:> token-empty-state*]))) [:> token-empty-state*])))

3
frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss
View File

@@ -88,6 +88,9 @@
.color-tokens-inputs { .color-tokens-inputs {
overflow: auto; overflow: auto;
display: flex;
flex-direction: column;
gap: var(--sp-s);
} }
// Title bar // Title bar

3
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View File

@@ -239,7 +239,7 @@
open-modal open-modal
(mf/use-fn (mf/use-fn
(mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens index) (mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens index applied-token)
(fn [color pos tab] (fn [color pos tab]
(let [color (cond (let [color (cond
^boolean has-multiple-colors ^boolean has-multiple-colors
@@ -263,6 +263,7 @@
(when on-close (when on-close
(on-close value opacity id file-id))) (on-close value opacity id file-id)))
:active-tokens tokens :active-tokens tokens
:applied-token applied-token
:color-origin origin :color-origin origin
:tab tab :tab tab
:origin :sidebar :origin :sidebar