From 5a7ba7ee7ec19a807db8975153ccf9b92c407ea8 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 24 Apr 2026 09:47:44 +0200 Subject: [PATCH] :bug: Fix multiple selection on shapes with token applied to stroke-color (#9110) * :sparkles: Remove the need to navigate to page for deletion operation * :bug: Fix multiple selection with applied-tokens on stroke-color * :bug: Fix button position on page header --------- Co-authored-by: Andrey Antukh --- CHANGES.md | 1 + .../app/main/ui/workspace/left_header.scss | 3 ++- .../options/menus/color_selection.cljs | 21 ++++++++----------- .../sidebar/options/menus/stroke.cljs | 4 +++- .../sidebar/options/rows/color_row.cljs | 8 ++++++- .../sidebar/options/rows/stroke_row.cljs | 2 ++ .../main/ui/workspace/sidebar/sitemap.cljs | 12 ++++++----- 7 files changed, 31 insertions(+), 20 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index f9fb9fe1a7..df2e133b71 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -37,6 +37,7 @@ - Fix wrong `mapcat` call in `collect-main-shapes` - Fix stale accumulator in `get-children-in-instance` recursion - Fix typo `:podition` in swap-shapes grid cell +- Fix multiple selection on shapes with token applied to stroke color ## 2.14.2 diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index a096c8144a..5ecac0793c 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -29,9 +29,10 @@ .project-tree { position: relative; flex-grow: 1; + flex-shrink: 1; + min-width: 0; height: deprecated.$s-32; min-height: deprecated.$s-32; - max-width: calc(100% - deprecated.$s-64); } .project-name, diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index eac46af116..a74d9f6203 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -49,16 +49,16 @@ • :prop → the property type (:fill, :stroke, :shadow, etc.) • :shape-id → the UUID of the shape using this color • :index → index of the color in the shape's fill/stroke list - + Example of groups: { {:color \"#9f2929\", :opacity 0.3, :token-name \"asd2\" :has-token-applied true} [{:prop :fill, :shape-id #uuid \"d0231035-25c9-80d5-8006-eae4c3dff32e\", :index 0}] - + {:color \"#1b54b6\", :opacity 1} [{:prop :fill, :shape-id #uuid \"aab34f9a-98c1-801a-8006-eae5e8236f1b\", :index 0}] } - + This structure allows fast lookups of all shapes using the same visual color, regardless of whether it comes from local fills, strokes or shadow-colors." @@ -69,12 +69,10 @@ ;; Unique color attribute maps all-colors (distinct (mapv :attrs data)) - ;; Split into: library colors, token colors, and plain colors - library-colors (filterv :ref-id all-colors) + ;; ;; Split into: library colors, token colors, and plain colors token-colors (filterv :token-name all-colors) - colors (filterv #(and (nil? (:ref-id %)) - (not (:token-name %))) - all-colors)] + library-colors (filterv (fn [c] (and (some? (:ref-id c)) (nil? (:token-name c)))) all-colors) + colors (filterv (fn [c] (and (nil? (:ref-id c)) (nil? (:token-name c)))) all-colors)] {:groups groups :all-colors all-colors :colors colors @@ -107,12 +105,11 @@ open? (deref open*) has-colors? (or (some? (seq colors)) (some? (seq library-colors))) - toggle-content (mf/use-fn #(swap! open* not)) - expand-lib-color (mf/use-state false) - expand-color (mf/use-state false) - expand-token-color (mf/use-state false) + expand-lib-color (mf/use-state false) + expand-color (mf/use-state false) + expand-token-color (mf/use-state false) ;; TODO: Review if this is still necessary. prev-colors-ref (mf/use-ref nil) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index c35bac471e..b3d08a9eed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -194,7 +194,9 @@ [:div {:class (stl/css-case :stroke-content true :stroke-content-empty (not has-strokes?))} (cond - (= :multiple strokes) + (or (= :multiple (:stroke-color applied-tokens)) + (= :multiple (:stroke-width applied-tokens)) + (= :multiple strokes)) [:div {:class (stl/css :stroke-multiple)} [:div {:class (stl/css :stroke-multiple-label)} (tr "settings.multiple")] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 71e6ec2eb9..4cac27324e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -71,12 +71,13 @@ [{:keys [active-tokens applied-token-name color on-swatch-click-token detach-token open-modal-from-token]}] (let [;; `active-tokens` may be provided as a `delay` (lazy computation). ;; In that case we must deref it (`@active-tokens`) to force evaluation - ;; and obtain the actual value. If it’s already realized (not a delay), + ;; and obtain the actual value. If it's already realized (not a delay), ;; we just use it directly. active-tokens (if (delay? active-tokens) @active-tokens active-tokens) + active-color-tokens (:color active-tokens) token (some #(when (= (:name %) applied-token-name) %) active-color-tokens) @@ -345,9 +346,14 @@ :dnd-over-top (= (:over dprops) :top) :dnd-over-bot (= (:over dprops) :bot))] + (when (= applied-token :multiple) + ;; (js/console.trace "color-row*") + (prn "color-row*" index color applied-token)) + (mf/with-effect [color prev-color disable-picker] (when (and (not disable-picker) (not= prev-color color)) (modal/update-props! :colorpicker {:data (parse-color color)}))) + [:div {:class [class row-class]} ;; Drag handler (when (some? on-reorder) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index 7cb0956d11..64f34b7927 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -192,6 +192,8 @@ (when (some? on-reorder) [:> reorder-handler* {:ref dref}]) + (prn "stroke-row*" applied-tokens) + ;; Stroke Color ;; FIXME: memorize stroke color [:> color-row* {:color (ctc/stroke->color stroke) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index a58e1512ba..4934066f7a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -89,11 +89,13 @@ on-delete (mf/use-fn (mf/deps id) - #(st/emit! (modal/show - {:type :confirm - :title (tr "modals.delete-page.title") - :message (tr "modals.delete-page.body") - :on-accept delete-fn}))) + (fn [event] + (dom/stop-propagation event) + (st/emit! (modal/show + {:type :confirm + :title (tr "modals.delete-page.title") + :message (tr "modals.delete-page.body") + :on-accept delete-fn})))) on-double-click (mf/use-fn