From 3d1933411b416c6b8910b4cfca6969d551478f89 Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Tue, 7 Oct 2025 13:37:28 +0200 Subject: [PATCH] :bug: Fix broken layout when multiple fill/strokes with tokens --- .../main/ui/inspect/styles/panels/fill.cljs | 22 +++++++++++++----- .../main/ui/inspect/styles/panels/stroke.cljs | 23 +++++++++++++------ 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/fill.cljs b/frontend/src/app/main/ui/inspect/styles/panels/fill.cljs index 074c58311a..76111195c9 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/fill.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/fill.cljs @@ -7,7 +7,6 @@ (ns app.main.ui.inspect.styles.panels.fill (:require-macros [app.main.style :as stl]) (:require - [app.common.data.macros :as dm] [app.common.types.fills :as types.fills] [app.main.ui.inspect.attributes.common :as cmm] [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)) +;; 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* [{:keys [shapes resolved-tokens color-space]}] [:div {:class (stl/css :fill-panel)} (for [shape shapes] [:div {:key (:id shape) :class "fill-shape"} - (for [fill (:fills shape [])] + (for [[idx fill] (map-indexed vector (:fills shape))] (let [property :background color-type (types.fills/fill->color fill) ;; can be :color, :gradient or :image 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) - [:> color-properties-row* {:key (dm/str "fill-property-" (:id shape) (:color color-type)) + [:> color-properties-row* {:key idx :term property-name :color color-type - :token resolved-token + :token (when has-token resolved-token) :format color-space :copiable true}] (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 :copiable true}] [:span "background-image"]))))])]) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs b/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs index 0592e8fe15..548a273724 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs @@ -15,7 +15,7 @@ [app.util.code-gen.style-css :as css] [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] {:color (:stroke-color shape) @@ -45,29 +45,38 @@ token (get resolved-tokens applied-tokens-in-shape)] 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* [{:keys [shapes objects resolved-tokens color-space]}] [:div {:class (stl/css :stroke-panel)} (for [shape shapes] [:div {:key (:id shape) :class "stroke-shape"} - (for [stroke (:strokes shape)] + (for [[idx stroke] (map-indexed vector (:strokes shape))] (for [property properties] (let [property property value (css/get-css-value objects stroke property) stroke-type (stroke->color stroke) property-name (cmm/get-css-rule-humanized 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) - [:> 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 :color stroke-type - :token resolved-token + :token (when has-token resolved-token) :format color-space :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) :detail (dm/str value) - :token resolved-token + :token (when has-token resolved-token) :property property-value :copiable true}]))))])])