From 21fb38e5bd8eb94ca69b3fa090b1547ae3963229 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 4 Nov 2025 12:39:41 +0100 Subject: [PATCH] :bug: Fixes some problems with dropdowns and token inputs (#7640) * :bug: Fix apply color token on strokes * :bug: Fix size and position of some numeric inputs * :bug: Fix padding token application * :recycle: Fix ci * :bug: Fix selected color tick * :bug: Fix comments and design review --- .../data/workspace/tokens/application.cljs | 4 +- .../src/app/main/ui/ds/tooltip/tooltip.cljs | 9 +- .../workspace/colorpicker/color_tokens.cljs | 11 +- .../options/menus/layout_container.cljs | 10 +- .../options/menus/layout_container.scss | 5 + .../sidebar/options/menus/layout_item.cljs | 108 +++++++++--------- .../sidebar/options/menus/measures.cljs | 2 +- .../sidebar/options/menus/measures.scss | 1 + .../sidebar/options/menus/stroke.cljs | 1 + .../sidebar/options/rows/color_row.scss | 2 +- 10 files changed, 82 insertions(+), 71 deletions(-) diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index c9d75d0957..af08421052 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/frontend/src/app/main/data/workspace/tokens/application.cljs @@ -496,7 +496,6 @@ (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 @@ -609,8 +608,7 @@ {: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)] + (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))] (if unapply-tokens? (rx/of (unapply-token {:attributes (or attrs all-attributes attributes) diff --git a/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs b/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs index 440bd7ee23..3dc5b71d66 100644 --- a/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs +++ b/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs @@ -36,6 +36,9 @@ (defn- hide-popover [node] + (dom/unset-css-property! node "block-size") + (dom/unset-css-property! node "inset-block-start") + (dom/unset-css-property! node "inset-inline-start") (.hidePopover ^js node)) (defn- calculate-placement-bounding-rect @@ -154,10 +157,8 @@ the dom with the result." [tooltip placement origin-brect offset] (show-popover tooltip) - (let [saved-height (dom/get-data tooltip "height") - saved-width (dom/get-data tooltip "width") - tooltip-brect (dom/get-bounding-rect tooltip) - tooltip-brect (assoc tooltip-brect :height (or saved-height (:height tooltip-brect)) :width (or saved-width (:width tooltip-brect))) + (let [tooltip-brect (dom/get-bounding-rect tooltip) + tooltip-brect (assoc tooltip-brect :height (:height tooltip-brect) :width (:width tooltip-brect)) window-size (dom/get-window-size)] (when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)] (let [height (:height placement-rect)] diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs index 9d21c3dbc5..30721b2dfe 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs @@ -41,7 +41,6 @@ (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) @@ -139,7 +138,6 @@ (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 @@ -206,9 +204,12 @@ :grid-view (= list-style :grid))} (for [token (:tokens group-or-set)] - (let [selected? (if (= color-origin :fill) - (= has-color-tokens? (:name token)) - (= has-stroke-tokens? (:name token)))] + (let [selected? (case color-origin + :fill (= has-color-tokens? (:name token)) + :stroke-color (= has-stroke-tokens? (:name token)) + :color-selection (or (= has-color-tokens? (:name token)) + (= has-stroke-tokens? (:name token))) + false)] (if (= :grid list-style) [:> grid-item* {:key (str "token-grid-" (:id token)) :on-token-pill-click on-token-pill-click diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index cae46bfd60..ca32217c40 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -378,9 +378,10 @@ (if (or (string? value) (int? value)) (on-change :simple attr value event) (do - (let [resolved-value (:resolved-value (first value))] + (let [resolved-value (:resolved-value (first value)) + updated-attr (if (= :p1 attr) #{:p1 :p3} #{:p2 :p4})] (st/emit! (dwta/toggle-token {:token (first value) - :attrs #{attr} + :attrs updated-attr :shape-ids ids})) (on-change :simple attr resolved-value event)))))) @@ -453,6 +454,7 @@ :icon i/padding-left-right :min 0 :name :p2 + :align :right :property (tr "workspace.layout_grid.editor.padding.horizontal") :nillable true :applied-tokens {:p2 applied-to-p2} @@ -573,6 +575,7 @@ :icon i/padding-right :min 0 :name :p2 + :align :right :property (tr "workspace.layout_grid.editor.padding.right") :applied-tokens applied-tokens :values value}] @@ -628,6 +631,7 @@ :on-focus on-focus-p4 :icon i/padding-left :min 0 + :align :right :name :p4 :property (tr "workspace.layout_grid.editor.padding.left") :applied-tokens applied-tokens @@ -733,7 +737,6 @@ (mf/use-fn (mf/deps ids) (fn [token attr] - (prn ids) (st/emit! (dwta/unapply-token {:token (first token) :attributes #{attr} :shape-ids ids})))) @@ -801,6 +804,7 @@ :nillable true :min 0 :name :column-gap + :align :right :applied-tokens applied-tokens :property "Column gap" :values {:column-gap (:column-gap value)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 9385a6a3c3..d53e012245 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -469,3 +469,8 @@ grid-column: 1 / -1; align-items: center; } + +// TODO: Add a proper variable to this sizing +.numeric-input-measures { + --dropdown-width: 247px; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index b55fe5de01..b1f919d4d4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -13,7 +13,7 @@ [app.main.data.workspace.shape-layout :as dwsl] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.numeric-input :refer [numeric-input*]] + [app.main.ui.components.numeric-input :as deprecated-input] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.icons :as deprecated-icon] @@ -82,27 +82,27 @@ :title "Vertical margin"} [:span {:class (stl/css :icon)} deprecated-icon/margin-top-bottom] - [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder m1-placeholder - :data-name "m1" - :on-focus on-focus - :on-change on-change' - :on-blur on-blur - :nillable true - :value m1}]] + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) + :placeholder m1-placeholder + :data-name "m1" + :on-focus on-focus + :on-change on-change' + :on-blur on-blur + :nillable true + :value m1}]] [:div {:class (stl/css :horizontal-margin) :title "Horizontal margin"} [:span {:class (stl/css :icon)} deprecated-icon/margin-left-right] - [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder m2-placeholder - :data-name "m2" - :on-focus on-focus - :on-change on-change' - :on-blur on-blur - :nillable true - :value m2}]]])) + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) + :placeholder m2-placeholder + :data-name "m2" + :on-focus on-focus + :on-change on-change' + :on-blur on-blur + :nillable true + :value m2}]]])) (mf/defc margin-multiple* [{:keys [value on-change on-blur]}] @@ -134,52 +134,52 @@ :title "Top margin"} [:span {:class (stl/css :icon)} deprecated-icon/margin-top] - [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder "--" - :data-name "m1" - :on-focus on-focus - :on-change on-change' - :on-blur on-blur - :nillable true - :value m1}]] + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) + :placeholder "--" + :data-name "m1" + :on-focus on-focus + :on-change on-change' + :on-blur on-blur + :nillable true + :value m1}]] [:div {:class (stl/css :right-margin) :title "Right margin"} [:span {:class (stl/css :icon)} deprecated-icon/margin-right] - [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder "--" - :data-name "m2" - :on-focus on-focus - :on-change on-change' - :on-blur on-blur - :nillable true - :value m2}]] + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) + :placeholder "--" + :data-name "m2" + :on-focus on-focus + :on-change on-change' + :on-blur on-blur + :nillable true + :value m2}]] [:div {:class (stl/css :bottom-margin) :title "Bottom margin"} [:span {:class (stl/css :icon)} deprecated-icon/margin-bottom] - [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder "--" - :data-name "m3" - :on-focus on-focus - :on-change on-change' - :on-blur on-blur - :nillable true - :value m3}]] + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) + :placeholder "--" + :data-name "m3" + :on-focus on-focus + :on-change on-change' + :on-blur on-blur + :nillable true + :value m3}]] [:div {:class (stl/css :left-margin) :title "Left margin"} [:span {:class (stl/css :icon)} deprecated-icon/margin-left] - [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder "--" - :data-name "m4" - :on-focus on-focus - :on-change on-change' - :on-blur on-blur - :nillable true - :value m4}]]])) + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) + :placeholder "--" + :data-name "m4" + :on-focus on-focus + :on-change on-change' + :on-blur on-blur + :nillable true + :value m4}]]])) (mf/defc margin-section* @@ -466,7 +466,7 @@ :title "z-index"} [:span {:class (stl/css :icon-text)} "Z"] - [:> numeric-input* + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :on-focus #(dom/select-target %) @@ -511,7 +511,7 @@ :title (tr "workspace.options.layout-item.layout-item-min-w")} [:span {:class (stl/css :icon-text)} "MIN W"] - [:> numeric-input* + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) :no-validate true :min 0 @@ -526,7 +526,7 @@ [:div {:class (stl/css :layout-item-max-w) :title (tr "workspace.options.layout-item.layout-item-max-w")} [:span {:class (stl/css :icon-text)} "MAX W"] - [:> numeric-input* + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) :no-validate true :min 0 @@ -544,7 +544,7 @@ :title (tr "workspace.options.layout-item.layout-item-min-h")} [:span {:class (stl/css :icon-text)} "MIN H"] - [:> numeric-input* + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) :no-validate true :min 0 @@ -560,7 +560,7 @@ :title (tr "workspace.options.layout-item.layout-item-max-h")} [:span {:class (stl/css :icon-text)} "MAX H"] - [:> numeric-input* + [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input) :no-validate true :min 0 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 03ae048983..cdf3c82534 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -111,7 +111,7 @@ (tr "settings.multiple") "--") :class (stl/css :numeric-input-measures) :applied-token (get applied-tokens name) - :tokens tokens + :tokens (if (delay? tokens) @tokens tokens) :align align :on-detach on-detach-attr :value (get values name)})] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index a5a34abec8..7c7323532b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -205,6 +205,7 @@ @extend .button-icon; } +// TODO: Add a proper variable to this sizing .numeric-input-measures { --dropdown-width: 247px; } 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 68ee26257e..6c95c16f67 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 @@ -229,4 +229,5 @@ :on-focus on-focus :select-on-focus (not @disable-drag) :on-blur on-blur + :ids ids :disable-stroke-style disable-stroke-style}])])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 8ec0ff0c6b..8e88e54ed6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -146,7 +146,7 @@ display: flex; align-items: center; position: relative; - block-size: $sz-28; + block-size: $sz-32; padding: 0 var(--sp-xxs) 0 var(--sp-s); border-radius: $br-8 0 0 $br-8; background-color: transparent;