mirror
/
penpot
mirror of https://github.com/penpot/penpot.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 Fixes some problems with dropdowns and token inputs (#7640) 

* 🐛 Fix apply color token on strokes

* 🐛 Fix size and position of some numeric inputs

* 🐛 Fix padding token application

* ♻️ Fix ci

* 🐛 Fix selected color tick

* 🐛 Fix comments and design review
This commit is contained in:
Eva Marco 2025-11-04 12:39:41 +01:00 committed by GitHub
parent 69bbdad570
commit 21fb38e5bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 82 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/main/data/workspace/tokens/application.cljs
View File

@ -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)

9
frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
View File

@ -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)]

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

@ -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

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View File

@ -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)}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View File

@ -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;
}

108
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View File

@ -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

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View File

@ -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)})]

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View File

@ -205,6 +205,7 @@
@extend .button-icon;
}
// TODO: Add a proper variable to this sizing
.numeric-input-measures {
--dropdown-width: 247px;
}

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View File

@ -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}])])])]))

2
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View File

@ -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;