Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-17 18:21:23 -05:00
Code Issues Activity

🐛 Fix problem with multiple elements in flex

Browse source
This commit is contained in:
alonso.torres 2023-09-25 15:26:33 +02:00
parent 641f8fb250
commit 9994b705d4
5 changed files with 55 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
common/src/app/common/types/shape/attrs.cljc
View file

@ -73,7 +73,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:group #{:proportion-lock
:width :height
@ -164,7 +166,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:circle #{:proportion-lock
:width :height
@ -217,7 +221,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:path #{:proportion-lock
:width :height
@ -270,7 +276,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:text #{:proportion-lock
:width :height
@ -347,7 +355,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:image #{:proportion-lock
:width :height
@ -383,7 +393,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:svg-raw #{:proportion-lock
:width :height
@ -438,7 +450,9 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:bool #{:proportion-lock
:width :height
@ -492,6 +506,8 @@
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}})
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index}})

2
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -41,7 +41,7 @@
min-value (d/parse-double min-value)
max-value (d/parse-double max-value)
step-value (d/parse-double step-value 1)
default (d/parse-double default 0)
default (d/parse-double default (when-not nillable? 0))
select-on-focus? (d/nilv (unchecked-get props "selectOnFocus") true)

4
frontend/src/app/main/ui/frame_preview.cljs
View file

@ -68,6 +68,8 @@
:style {:width (str (* 100 (if (> zoom 1)
(* 1 zoom)
(/ 1 zoom))) "%")
:height "100%"
:height (str (* 100 (if (> zoom 1)
(* 1 zoom)
(/ 1 zoom))) "%")
:transform-origin "left top"
:transform (str "scale(" zoom ")")}}]]]))

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

@ -525,6 +525,7 @@
:on-focus #(do
(dom/select-target %)
(select-paddings true false true false))
:min 0
:value p1}]]
[:div {:class (stl/css :padding-simple)
:title "Horizontal padding"}
@ -538,6 +539,7 @@
:on-focus #(do (dom/select-target %)
(select-paddings false true false true))
:on-blur #(select-paddings false false false false)
:min 0
:value p2}]]]
(= padding-type :multiple)
[:div {:class (stl/css :paddings-multiple)}
@ -553,6 +555,7 @@
:on-focus #(do (dom/select-target %)
(select-padding :p1))
:on-blur #(select-paddings false false false false)
:min 0
:value (:p1 (:layout-padding values))}]]
[:div {:class (stl/css :padding-multiple)
@ -566,6 +569,7 @@
:on-focus #(do (dom/select-target %)
(select-padding :p2))
:on-blur #(select-paddings false false false false)
:min 0
:value (:p2 (:layout-padding values))}]]
[:div {:class (stl/css :padding-multiple)
@ -579,6 +583,7 @@
:on-focus #(do (dom/select-target %)
(select-padding :p3))
:on-blur #(select-paddings false false false false)
:min 0
:value (:p3 (:layout-padding values))}]]
[:div {:class (stl/css :padding-multiple)
@ -592,6 +597,7 @@
:on-focus #(do (dom/select-target %)
(select-padding :p4))
:on-blur #(select-paddings false false false false)
:min 0
:value (:p4 (:layout-padding values))}]]])]
[:button {:class (stl/css-case :padding-toggle true
:selected (= padding-type :multiple))
@ -612,6 +618,7 @@
:on-focus #(do
(dom/select-target %)
(select-paddings true false true false))
:min 0
:value p1}]]
[:div.padding-item.tooltip.tooltip-bottom-left
@ -623,6 +630,7 @@
:on-focus #(do (dom/select-target %)
(select-paddings false true false true))
:on-blur #(select-paddings false false false false)
:min 0
:value p2}]]]
(= padding-type :multiple)
@ -642,6 +650,7 @@
:on-focus #(do (dom/select-target %)
(select-padding num))
:on-blur #(select-paddings false false false false)
:min 0
:value (num (:layout-padding values))}]]])])
[:div.padding-icons
@ -682,6 +691,7 @@
:on-blur (fn [_]
(select-gap nil)
(reset! gap-selected? :none))
:min 0
:value (:row-gap gap-value)
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]
[:div {:class (stl/css-case :column-gap true
@ -700,6 +710,7 @@
:on-blur (fn [_]
(select-gap nil)
(reset! gap-selected? :none))
:min 0
:value (:column-gap gap-value)
:disabled (and (= :nowrap wrap-type) is-col?)}]]]
@ -720,6 +731,7 @@
:on-blur (fn [_]
(select-gap nil)
(reset! gap-selected? :none))
:min 0
:value (:column-gap gap-value)
:disabled (and (= :nowrap wrap-type) is-col?)}]]
@ -737,6 +749,7 @@
:on-blur (fn [_]
(select-gap nil)
(reset! gap-selected? :none))
:min 0
:value (:row-gap gap-value)
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])))

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

@ -42,23 +42,24 @@
(let [new-css-system (mf/use-ctx ctx/new-css-system)
margin-type (or (:layout-item-margin-type values) :simple)
m1 (if (and (not (= :multiple (:layout-item-margin values)))
m1 (when (and (not (= :multiple (:layout-item-margin values)))
(= (dm/get-in values [:layout-item-margin :m1])
(dm/get-in values [:layout-item-margin :m3])))
(dm/get-in values [:layout-item-margin :m1])
"--")
)
m2 (if (and (not (= :multiple (:layout-item-margin values)))
m2 (when (and (not (= :multiple (:layout-item-margin values)))
(= (dm/get-in values [:layout-item-margin :m2])
(dm/get-in values [:layout-item-margin :m4])))
(dm/get-in values [:layout-item-margin :m2])
"--")
)
select-margins
(fn [m1? m2? m3? m4?]
(st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?})))
select-margin #(select-margins (= % :m1) (= % :m2) (= % :m3) (= % :m4))]
(mf/use-effect
(fn []
(fn []
@ -77,12 +78,12 @@
i/margin-top-bottom-refactor]
[:> numeric-input* {:className (stl/css :numeric-input)
:placeholder "--"
:nillable true
:value m1
:on-focus (fn [event]
(select-margins true false true false)
(dom/select-target event))
:on-change (partial on-margin-change :simple :m1)
:on-blur #(select-margins false false false false)}]]
[:div {:class (stl/css :horizontal-margin)
@ -96,6 +97,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :simple :m2)
:on-blur #(select-margins false false false false)
:nillable true
:value m2}]]]
(= margin-type :multiple)
@ -111,6 +113,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :multiple :m1)
:on-blur #(select-margins false false false false)
:nillable true
:value (:m1 (:layout-item-margin values))}]]
[:div {:class (stl/css :right-margin)
:title "Right margin"}
@ -123,6 +126,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :multiple :m2)
:on-blur #(select-margins false false false false)
:nillable true
:value (:m2 (:layout-item-margin values))}]]
[:div {:class (stl/css :bottom-margin)
@ -136,6 +140,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :multiple :m3)
:on-blur #(select-margins false false false false)
:nillable true
:value (:m3 (:layout-item-margin values))}]]
[:div {:class (stl/css :left-margin)
:title "Left margin"}
@ -148,6 +153,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :multiple :m4)
:on-blur #(select-margins false false false false)
:nillable true
:value (:m4 (:layout-item-margin values))}]]])]
[:button {:class (stl/css-case :margin-mode true
:selected (= margin-type :multiple))
@ -169,6 +175,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :simple :m1)
:on-blur #(select-margins false false false false)
:nillable true
:value m1}]]
[:div.margin-item.tooltip.tooltip-bottom-left
@ -181,6 +188,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :simple :m2)
:on-blur #(select-margins false false false false)
:nillable true
:value m2}]]]
(= margin-type :multiple)
@ -201,6 +209,7 @@
(dom/select-target event))
:on-change (partial on-margin-change :multiple num)
:on-blur #(select-margins false false false false)
:nillable true
:value (num (:layout-item-margin values))}]]])])
[:div.margin-item-icons