Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 15:41:25 -05:00
Code Issues Activity

🐛 Fix problem with grid layout paddings

Browse source
This commit is contained in:
alonso.torres 2024-03-04 15:52:24 +01:00 • committed by Andrey Antukh
parent f36410da87
commit fb2c4c9c3a
3 changed files with 29 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
common/src/app/common/types/shape/layout.cljc
View file

@ -1076,14 +1076,13 @@
(->> (cells-seq parent :sort? true)
(reduce
(fn [[parent auto?] cell]
(let [[cell auto?]
(cond
(and (empty? (:shapes cell))
(= :manual (:position cell))
(= (:row-span cell) 1)
(= (:column-span cell) 1))
[(assoc cell :position :auto) false]
[cell false]
(and (or (not= (:row-span cell) 1)
(not= (:column-span cell) 1))

2
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -573,6 +573,7 @@
(> (:row-span cell) 1)
(> (:column-span cell) 1))
(-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
(d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
(ctl/resize-cell-area (:row cell) (:column cell) (:row cell) (:column cell) 1 1)
(ctl/assign-cells objects)))))
shape))
@ -585,6 +586,7 @@
(cond-> shape
(contains? #{:area :auto} (:position cell))
(-> (d/assoc-in-when [:layout-grid-cells cell-id :position] :manual)
(d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
(ctl/assign-cells objects)))))
shape))

47
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -918,8 +918,11 @@
on-gap-change
(fn [multiple? type val]
(let [val (mth/finite val 0)]
(if ^boolean multiple?
(cond
^boolean multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(some? type)
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
;; Padding
@ -941,7 +944,7 @@
(and (= type :simple) (= prop :p2))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
:else
(some? prop)
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))))
;; Grid-direction
@ -1126,16 +1129,16 @@
:on-change on-column-justify-change}]
[:& justify-grid-row {:is-column false
:value grid-justify-content-row
:on-change on-row-justify-change}]]]
[:div {:class (stl/css :row)}
[:& gap-section {:on-change on-gap-change
:value (:layout-gap values)}]]
:on-change on-row-justify-change}]]
[:div {:class (stl/css :row :padding-section)}
[:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-change-style on-padding-type-change
:on-change on-padding-change}]]
[:div {:class (stl/css :row)}
[:& gap-section {:on-change on-gap-change
:value (:layout-gap values)}]]
[:div {:class (stl/css :row :padding-section)}
[:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-change-style on-padding-type-change
:on-change on-padding-change}]]]
nil))]))
@ -1156,9 +1159,10 @@
(mf/use-fn
(mf/deps ids)
(fn [multiple? type val]
(if multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
(let [val (mth/finite val 0)]
(if multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))))
;; Padding
on-padding-type-change
@ -1169,15 +1173,16 @@
on-padding-change
(fn [type prop val]
(cond
(and (= type :simple) (= prop :p1))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
(let [val (mth/finite val 0)]
(cond
(and (= type :simple) (= prop :p1))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
(and (= type :simple) (= prop :p2))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
(and (= type :simple) (= prop :p2))
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
:else
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))
:else
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))
;; Align grid
align-items-row (:layout-align-items values)