Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-28 17:56:50 -05:00
Code Issues Activity

Merge pull request #5951 from penpot/juanfran-expand-padding-margin-apply-token

Browse source 
🐛 Expand padding/margin values on apply token and show 'Mixed' placeholder
This commit is contained in:
Juanfran 2025-02-26 11:15:33 +01:00 • committed by GitHub
commit fefb946a25
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -50,6 +50,9 @@
m3 (:m3 value) m3 (:m3 value)
m4 (:m4 value) m4 (:m4 value)
m1-placeholder (if (and (not= value :multiple) (not= m1 m3)) (tr "settings.multiple") "--")
m2-placeholder (if (and (not= value :multiple) (not= m2 m4)) (tr "settings.multiple") "--")
m1 (when (and (not= value :multiple) (= m1 m3)) m1) m1 (when (and (not= value :multiple) (= m1 m3)) m1)
m2 (when (and (not= value :multiple) (= m2 m4)) m2) m2 (when (and (not= value :multiple) (= m2 m4)) m2)
@ -74,14 +77,13 @@
(keyword))] (keyword))]
(on-change :simple attr value))))] (on-change :simple attr value))))]
[:div {:class (stl/css :margin-simple)} [:div {:class (stl/css :margin-simple)}
[:div {:class (stl/css :vertical-margin) [:div {:class (stl/css :vertical-margin)
:title "Vertical margin"} :title "Vertical margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-top-bottom] i/margin-top-bottom]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
: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'
@ -94,7 +96,7 @@
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-left-right] i/margin-left-right]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
: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'

17
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -12,6 +12,7 @@
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[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.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
@ -151,6 +152,18 @@
all-attr-labels)] all-attr-labels)]
(concat multi-items single-items))) (concat multi-items single-items)))
(defn update-shape-layout-padding [value shape-ids attributes]
(st/emit!
(when (= (count attributes) 1)
(dwsl/update-layout shape-ids {:layout-padding-type :multiple}))
(wtch/update-layout-padding value shape-ids attributes)))
(defn update-shape-layout-margin [value shape-ids attributes]
(st/emit!
(when (= (count attributes) 1)
(dwsl/update-layout shape-ids {:layout-item-margin-type :multiple}))
(wtch/update-layout-item-margin value shape-ids attributes)))
(defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}] (defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}]
(let [padding-items (layout-spacing-items {:token token (let [padding-items (layout-spacing-items {:token token
:selected-shapes selected-shapes :selected-shapes selected-shapes
@ -162,7 +175,7 @@
:p4 "Padding left"} :p4 "Padding left"}
:vertical-attr-labels {:p1 "Padding top" :vertical-attr-labels {:p1 "Padding top"
:p3 "Padding bottom"} :p3 "Padding bottom"}
:on-update-shape wtch/update-layout-padding}) :on-update-shape update-shape-layout-padding})
margin-items (layout-spacing-items {:token token margin-items (layout-spacing-items {:token token
:selected-shapes selected-shapes :selected-shapes selected-shapes
:all-attr-labels {:m1 "Margin top" :all-attr-labels {:m1 "Margin top"
@ -173,7 +186,7 @@
:m4 "Margin left"} :m4 "Margin left"}
:vertical-attr-labels {:m1 "Margin top" :vertical-attr-labels {:m1 "Margin top"
:m3 "Margin bottom"} :m3 "Margin bottom"}
:on-update-shape wtch/update-layout-item-margin}) :on-update-shape update-shape-layout-margin})
gap-items (all-or-sepearate-actions {:attribute-labels {:column-gap "Column Gap" gap-items (all-or-sepearate-actions {:attribute-labels {:column-gap "Column Gap"
:row-gap "Row Gap"} :row-gap "Row Gap"}
:on-update-shape wtch/update-layout-spacing} :on-update-shape wtch/update-layout-spacing}