github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-13 07:30:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 🐛 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/reify ::apply-token
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(prn "apply token" token attributes shape-ids)
;; We do not allow to apply tokens while text editor is open. ;; We do not allow to apply tokens while text editor is open.
(when (empty? (get state :workspace-editor-state)) (when (empty? (get state :workspace-editor-state))
(let [attributes-to-remove (let [attributes-to-remove
@ -609,8 +608,7 @@
{:keys [attributes all-attributes on-update-shape]} {:keys [attributes all-attributes on-update-shape]}
(get token-properties (:type token)) (get token-properties (:type token))
unapply-tokens? unapply-tokens?
(cft/shapes-token-applied? token shapes (or attrs all-attributes attributes)) (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))]
shape-ids (map :id shapes)]
(if unapply-tokens? (if unapply-tokens?
(rx/of (rx/of
(unapply-token {:attributes (or attrs all-attributes attributes) (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 (defn- hide-popover
[node] [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)) (.hidePopover ^js node))
(defn- calculate-placement-bounding-rect (defn- calculate-placement-bounding-rect
@ -154,10 +157,8 @@
the dom with the result." the dom with the result."
[tooltip placement origin-brect offset] [tooltip placement origin-brect offset]
(show-popover tooltip) (show-popover tooltip)
(let [saved-height (dom/get-data tooltip "height") (let [tooltip-brect (dom/get-bounding-rect tooltip)
saved-width (dom/get-data tooltip "width") tooltip-brect (assoc tooltip-brect :height (:height tooltip-brect) :width (:width tooltip-brect))
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)))
window-size (dom/get-window-size)] window-size (dom/get-window-size)]
(when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)] (when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)]
(let [height (:height placement-rect)] (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/use-fn
(mf/deps token on-token-pill-click) (mf/deps token on-token-pill-click)
(fn [event] (fn [event]
(prn "entro en el on-click")
(on-token-pill-click event token))) (on-token-pill-click event token)))
id-tooltip (mf/use-id) id-tooltip (mf/use-id)
resolved (:resolved-value token) resolved (:resolved-value token)
@ -139,7 +138,6 @@
(fn [event token] (fn [event token]
(dom/stop-propagation event) (dom/stop-propagation event)
(when (seq selected-shapes) (when (seq selected-shapes)
(prn "entro en on-token-pill-click")
(on-token-change event token)))) (on-token-change event token))))
create-token-on-set create-token-on-set
@ -206,9 +204,12 @@
:grid-view (= list-style :grid))} :grid-view (= list-style :grid))}
(for [token (:tokens group-or-set)] (for [token (:tokens group-or-set)]
(let [selected? (if (= color-origin :fill) (let [selected? (case color-origin
(= has-color-tokens? (:name token)) :fill (= has-color-tokens? (:name token))
(= has-stroke-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) (if (= :grid list-style)
[:> grid-item* {:key (str "token-grid-" (:id token)) [:> grid-item* {:key (str "token-grid-" (:id token))
:on-token-pill-click on-token-pill-click :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)) (if (or (string? value) (int? value))
(on-change :simple attr value event) (on-change :simple attr value event)
(do (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) (st/emit! (dwta/toggle-token {:token (first value)
:attrs #{attr} :attrs updated-attr
:shape-ids ids})) :shape-ids ids}))
(on-change :simple attr resolved-value event)))))) (on-change :simple attr resolved-value event))))))
@ -453,6 +454,7 @@
:icon i/padding-left-right :icon i/padding-left-right
:min 0 :min 0
:name :p2 :name :p2
:align :right
:property (tr "workspace.layout_grid.editor.padding.horizontal") :property (tr "workspace.layout_grid.editor.padding.horizontal")
:nillable true :nillable true
:applied-tokens {:p2 applied-to-p2} :applied-tokens {:p2 applied-to-p2}
@ -573,6 +575,7 @@
:icon i/padding-right :icon i/padding-right
:min 0 :min 0
:name :p2 :name :p2
:align :right
:property (tr "workspace.layout_grid.editor.padding.right") :property (tr "workspace.layout_grid.editor.padding.right")
:applied-tokens applied-tokens :applied-tokens applied-tokens
:values value}] :values value}]
@ -628,6 +631,7 @@
:on-focus on-focus-p4 :on-focus on-focus-p4
:icon i/padding-left :icon i/padding-left
:min 0 :min 0
:align :right
:name :p4 :name :p4
:property (tr "workspace.layout_grid.editor.padding.left") :property (tr "workspace.layout_grid.editor.padding.left")
:applied-tokens applied-tokens :applied-tokens applied-tokens
@ -733,7 +737,6 @@
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [token attr] (fn [token attr]
(prn ids)
(st/emit! (dwta/unapply-token {:token (first token) (st/emit! (dwta/unapply-token {:token (first token)
:attributes #{attr} :attributes #{attr}
:shape-ids ids})))) :shape-ids ids}))))
@ -801,6 +804,7 @@
:nillable true :nillable true
:min 0 :min 0
:name :column-gap :name :column-gap
:align :right
:applied-tokens applied-tokens :applied-tokens applied-tokens
:property "Column gap" :property "Column gap"
:values {:column-gap (:column-gap value)} :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; grid-column: 1 / -1;
align-items: center; 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.data.workspace.shape-layout :as dwsl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [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.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as deprecated-icon] [app.main.ui.icons :as deprecated-icon]
@ -82,27 +82,27 @@
:title "Vertical margin"} :title "Vertical margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
deprecated-icon/margin-top-bottom] deprecated-icon/margin-top-bottom]
[:> numeric-input* {:class (stl/css :numeric-input) [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
:placeholder m1-placeholder :placeholder m1-placeholder
:data-name "m1" :data-name "m1"
:on-focus on-focus :on-focus on-focus
:on-change on-change' :on-change on-change'
:on-blur on-blur :on-blur on-blur
:nillable true :nillable true
:value m1}]] :value m1}]]
[:div {:class (stl/css :horizontal-margin) [:div {:class (stl/css :horizontal-margin)
:title "Horizontal margin"} :title "Horizontal margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
deprecated-icon/margin-left-right] deprecated-icon/margin-left-right]
[:> numeric-input* {:class (stl/css :numeric-input) [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
:placeholder m2-placeholder :placeholder m2-placeholder
:data-name "m2" :data-name "m2"
:on-focus on-focus :on-focus on-focus
:on-change on-change' :on-change on-change'
:on-blur on-blur :on-blur on-blur
:nillable true :nillable true
:value m2}]]])) :value m2}]]]))
(mf/defc margin-multiple* (mf/defc margin-multiple*
[{:keys [value on-change on-blur]}] [{:keys [value on-change on-blur]}]
@ -134,52 +134,52 @@
:title "Top margin"} :title "Top margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
deprecated-icon/margin-top] deprecated-icon/margin-top]
[:> numeric-input* {:class (stl/css :numeric-input) [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m1" :data-name "m1"
:on-focus on-focus :on-focus on-focus
:on-change on-change' :on-change on-change'
:on-blur on-blur :on-blur on-blur
:nillable true :nillable true
:value m1}]] :value m1}]]
[:div {:class (stl/css :right-margin) [:div {:class (stl/css :right-margin)
:title "Right margin"} :title "Right margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
deprecated-icon/margin-right] deprecated-icon/margin-right]
[:> numeric-input* {:class (stl/css :numeric-input) [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m2" :data-name "m2"
:on-focus on-focus :on-focus on-focus
:on-change on-change' :on-change on-change'
:on-blur on-blur :on-blur on-blur
:nillable true :nillable true
:value m2}]] :value m2}]]
[:div {:class (stl/css :bottom-margin) [:div {:class (stl/css :bottom-margin)
:title "Bottom margin"} :title "Bottom margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
deprecated-icon/margin-bottom] deprecated-icon/margin-bottom]
[:> numeric-input* {:class (stl/css :numeric-input) [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m3" :data-name "m3"
:on-focus on-focus :on-focus on-focus
:on-change on-change' :on-change on-change'
:on-blur on-blur :on-blur on-blur
:nillable true :nillable true
:value m3}]] :value m3}]]
[:div {:class (stl/css :left-margin) [:div {:class (stl/css :left-margin)
:title "Left margin"} :title "Left margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
deprecated-icon/margin-left] deprecated-icon/margin-left]
[:> numeric-input* {:class (stl/css :numeric-input) [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m4" :data-name "m4"
:on-focus on-focus :on-focus on-focus
:on-change on-change' :on-change on-change'
:on-blur on-blur :on-blur on-blur
:nillable true :nillable true
:value m4}]]])) :value m4}]]]))
(mf/defc margin-section* (mf/defc margin-section*
@ -466,7 +466,7 @@
:title "z-index"} :title "z-index"}
[:span {:class (stl/css :icon-text)} "Z"] [:span {:class (stl/css :icon-text)} "Z"]
[:> numeric-input* [:> deprecated-input/numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:on-focus #(dom/select-target %) :on-focus #(dom/select-target %)
@ -511,7 +511,7 @@
:title (tr "workspace.options.layout-item.layout-item-min-w")} :title (tr "workspace.options.layout-item.layout-item-min-w")}
[:span {:class (stl/css :icon-text)} "MIN W"] [:span {:class (stl/css :icon-text)} "MIN W"]
[:> numeric-input* [:> deprecated-input/numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:no-validate true :no-validate true
:min 0 :min 0
@ -526,7 +526,7 @@
[:div {:class (stl/css :layout-item-max-w) [:div {:class (stl/css :layout-item-max-w)
:title (tr "workspace.options.layout-item.layout-item-max-w")} :title (tr "workspace.options.layout-item.layout-item-max-w")}
[:span {:class (stl/css :icon-text)} "MAX W"] [:span {:class (stl/css :icon-text)} "MAX W"]
[:> numeric-input* [:> deprecated-input/numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:no-validate true :no-validate true
:min 0 :min 0
@ -544,7 +544,7 @@
:title (tr "workspace.options.layout-item.layout-item-min-h")} :title (tr "workspace.options.layout-item.layout-item-min-h")}
[:span {:class (stl/css :icon-text)} "MIN H"] [:span {:class (stl/css :icon-text)} "MIN H"]
[:> numeric-input* [:> deprecated-input/numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:no-validate true :no-validate true
:min 0 :min 0
@ -560,7 +560,7 @@
:title (tr "workspace.options.layout-item.layout-item-max-h")} :title (tr "workspace.options.layout-item.layout-item-max-h")}
[:span {:class (stl/css :icon-text)} "MAX H"] [:span {:class (stl/css :icon-text)} "MAX H"]
[:> numeric-input* [:> deprecated-input/numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:no-validate true :no-validate true
:min 0 :min 0

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

@ -111,7 +111,7 @@
(tr "settings.multiple") "--") (tr "settings.multiple") "--")
:class (stl/css :numeric-input-measures) :class (stl/css :numeric-input-measures)
:applied-token (get applied-tokens name) :applied-token (get applied-tokens name)
:tokens tokens :tokens (if (delay? tokens) @tokens tokens)
:align align :align align
:on-detach on-detach-attr :on-detach on-detach-attr
:value (get values name)})] :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; @extend .button-icon;
} }
// TODO: Add a proper variable to this sizing
.numeric-input-measures { .numeric-input-measures {
--dropdown-width: 247px; --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 :on-focus on-focus
:select-on-focus (not @disable-drag) :select-on-focus (not @disable-drag)
:on-blur on-blur :on-blur on-blur
:ids ids
:disable-stroke-style disable-stroke-style}])])])])) :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; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
block-size: $sz-28; block-size: $sz-32;
padding: 0 var(--sp-xxs) 0 var(--sp-s); padding: 0 var(--sp-xxs) 0 var(--sp-s);
border-radius: $br-8 0 0 $br-8; border-radius: $br-8 0 0 $br-8;
background-color: transparent; background-color: transparent;