github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-18 18:06:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix broken layout when multiple fill/strokes with tokens

Browse Source
This commit is contained in:
Xavier Julian 2025-10-07 13:37:28 +02:00 committed by Andrey Antukh
parent a44f1bb09c
commit 3d1933411b
2 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/app/main/ui/inspect/styles/panels/fill.cljs
View File

@ -7,7 +7,6 @@
(ns app.main.ui.inspect.styles.panels.fill (ns app.main.ui.inspect.styles.panels.fill
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm]
[app.common.types.fills :as types.fills] [app.common.types.fills :as types.fills]
[app.main.ui.inspect.attributes.common :as cmm] [app.main.ui.inspect.attributes.common :as cmm]
[app.main.ui.inspect.styles.rows.color-properties-row :refer [color-properties-row*]] [app.main.ui.inspect.styles.rows.color-properties-row :refer [color-properties-row*]]
@ -25,25 +24,36 @@
token (get resolved-tokens applied-tokens-in-shape)] token (get resolved-tokens applied-tokens-in-shape)]
token)) token))
;; Current token implementation on fills only supports one token per shape and has to be the first fill
;; This must be improved in the future
(defn- has-token?
"Returns true if the resolved token matches the color and is the first fill (idx = 0)."
[resolved-token color-type idx]
(and (= (:resolved-value resolved-token) (:color color-type))
(= 0 idx)))
(mf/defc fill-panel* (mf/defc fill-panel*
[{:keys [shapes resolved-tokens color-space]}] [{:keys [shapes resolved-tokens color-space]}]
[:div {:class (stl/css :fill-panel)} [:div {:class (stl/css :fill-panel)}
(for [shape shapes] (for [shape shapes]
[:div {:key (:id shape) :class "fill-shape"} [:div {:key (:id shape) :class "fill-shape"}
(for [fill (:fills shape [])] (for [[idx fill] (map-indexed vector (:fills shape))]
(let [property :background (let [property :background
color-type (types.fills/fill->color fill) ;; can be :color, :gradient or :image color-type (types.fills/fill->color fill) ;; can be :color, :gradient or :image
property-name (cmm/get-css-rule-humanized property) property-name (cmm/get-css-rule-humanized property)
resolved-token (get-resolved-token shape resolved-tokens)] resolved-token (get-resolved-token shape resolved-tokens)
has-token (has-token? resolved-token color-type idx)]
(if (:color color-type) (if (:color color-type)
[:> color-properties-row* {:key (dm/str "fill-property-" (:id shape) (:color color-type)) [:> color-properties-row* {:key idx
:term property-name :term property-name
:color color-type :color color-type
:token resolved-token :token (when has-token resolved-token)
:format color-space :format color-space
:copiable true}] :copiable true}]
(if (or (:gradient color-type) (:image color-type)) (if (or (:gradient color-type) (:image color-type))
[:> color-properties-row* {:term property-name [:> color-properties-row* {:key idx
:term property-name
:color color-type :color color-type
:copiable true}] :copiable true}]
[:span "background-image"]))))])]) [:span "background-image"]))))])])

23
frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs
View File

@ -15,7 +15,7 @@
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private properties [:border-style :border-width :border-color]) (def ^:private properties [:border-color :border-style :border-width])
(defn- stroke->color [shape] (defn- stroke->color [shape]
{:color (:stroke-color shape) {:color (:stroke-color shape)
@ -45,29 +45,38 @@
token (get resolved-tokens applied-tokens-in-shape)] token (get resolved-tokens applied-tokens-in-shape)]
token)) token))
;; Current token implementation on fills only supports one token per shape and has to be the first fill
;; This must be improved in the future
(defn- has-token?
"Returns true if the resolved token matches the color and is the first fill (idx = 0)."
[resolved-token stroke-type idx]
(and (= (:resolved-value resolved-token) (:color stroke-type))
(= 0 idx)))
(mf/defc stroke-panel* (mf/defc stroke-panel*
[{:keys [shapes objects resolved-tokens color-space]}] [{:keys [shapes objects resolved-tokens color-space]}]
[:div {:class (stl/css :stroke-panel)} [:div {:class (stl/css :stroke-panel)}
(for [shape shapes] (for [shape shapes]
[:div {:key (:id shape) :class "stroke-shape"} [:div {:key (:id shape) :class "stroke-shape"}
(for [stroke (:strokes shape)] (for [[idx stroke] (map-indexed vector (:strokes shape))]
(for [property properties] (for [property properties]
(let [property property (let [property property
value (css/get-css-value objects stroke property) value (css/get-css-value objects stroke property)
stroke-type (stroke->color stroke) stroke-type (stroke->color stroke)
property-name (cmm/get-css-rule-humanized property) property-name (cmm/get-css-rule-humanized property)
property-value (css/get-css-property objects stroke property) property-value (css/get-css-property objects stroke property)
resolved-token (get-resolved-token property shape resolved-tokens)] resolved-token (get-resolved-token property shape resolved-tokens)
has-token (has-token? resolved-token stroke-type idx)]
(if (= property :border-color) (if (= property :border-color)
[:> color-properties-row* {:key (dm/str "stroke-property-" (:id shape) (:color stroke-type)) [:> color-properties-row* {:key (dm/str "stroke-" property "-" idx (:color stroke-type))
:term property-name :term property-name
:color stroke-type :color stroke-type
:token resolved-token :token (when has-token resolved-token)
:format color-space :format color-space
:copiable true}] :copiable true}]
[:> properties-row* {:key (dm/str "svg-property-" (d/name property)) [:> properties-row* {:key (dm/str "stroke-" property "-" idx (:color stroke-type))
:term (d/name property-name) :term (d/name property-name)
:detail (dm/str value) :detail (dm/str value)
:token resolved-token :token (when has-token resolved-token)
:property property-value :property property-value
:copiable true}]))))])]) :copiable true}]))))])])