3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-11 16:51:38 +02:00
Code Issues Projects Releases Packages Wiki 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
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-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:group #{:proportion-lock :group #{:proportion-lock
:width :height :width :height
@ -164,7 +166,9 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:circle #{:proportion-lock :circle #{:proportion-lock
:width :height :width :height
@ -217,7 +221,9 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:path #{:proportion-lock :path #{:proportion-lock
:width :height :width :height
@ -270,7 +276,9 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:text #{:proportion-lock :text #{:proportion-lock
:width :height :width :height
@ -347,7 +355,9 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:image #{:proportion-lock :image #{:proportion-lock
:width :height :width :height
@ -383,7 +393,9 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:svg-raw #{:proportion-lock :svg-raw #{:proportion-lock
:width :height :width :height
@ -438,7 +450,9 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-w :layout-item-min-w
:layout-item-align-self} :layout-item-align-self
:layout-item-absolute
:layout-item-z-index}
:bool #{:proportion-lock :bool #{:proportion-lock
:width :height :width :height
@ -492,6 +506,8 @@
:layout-item-min-h :layout-item-min-h
:layout-item-max-w :layout-item-max-w
:layout-item-min-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) min-value (d/parse-double min-value)
max-value (d/parse-double max-value) max-value (d/parse-double max-value)
step-value (d/parse-double step-value 1) 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) 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) :style {:width (str (* 100 (if (> zoom 1)
(* 1 zoom) (* 1 zoom)
(/ 1 zoom))) "%") (/ 1 zoom))) "%")
:height "100%" :height (str (* 100 (if (> zoom 1)
(* 1 zoom)
(/ 1 zoom))) "%")
:transform-origin "left top" :transform-origin "left top"
:transform (str "scale(" zoom ")")}}]]])) :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 :on-focus #(do
(dom/select-target %) (dom/select-target %)
(select-paddings true false true false)) (select-paddings true false true false))
:min 0
:value p1}]] :value p1}]]
[:div {:class (stl/css :padding-simple) [:div {:class (stl/css :padding-simple)
:title "Horizontal padding"} :title "Horizontal padding"}
@ -538,6 +539,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-paddings false true false true)) (select-paddings false true false true))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value p2}]]] :value p2}]]]
(= padding-type :multiple) (= padding-type :multiple)
[:div {:class (stl/css :paddings-multiple)} [:div {:class (stl/css :paddings-multiple)}
@ -553,6 +555,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-padding :p1)) (select-padding :p1))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value (:p1 (:layout-padding values))}]] :value (:p1 (:layout-padding values))}]]
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
@ -566,6 +569,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-padding :p2)) (select-padding :p2))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value (:p2 (:layout-padding values))}]] :value (:p2 (:layout-padding values))}]]
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
@ -579,6 +583,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-padding :p3)) (select-padding :p3))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value (:p3 (:layout-padding values))}]] :value (:p3 (:layout-padding values))}]]
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
@ -592,6 +597,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-padding :p4)) (select-padding :p4))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value (:p4 (:layout-padding values))}]]])] :value (:p4 (:layout-padding values))}]]])]
[:button {:class (stl/css-case :padding-toggle true [:button {:class (stl/css-case :padding-toggle true
:selected (= padding-type :multiple)) :selected (= padding-type :multiple))
@ -612,6 +618,7 @@
:on-focus #(do :on-focus #(do
(dom/select-target %) (dom/select-target %)
(select-paddings true false true false)) (select-paddings true false true false))
:min 0
:value p1}]] :value p1}]]
[:div.padding-item.tooltip.tooltip-bottom-left [:div.padding-item.tooltip.tooltip-bottom-left
@ -623,6 +630,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-paddings false true false true)) (select-paddings false true false true))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value p2}]]] :value p2}]]]
(= padding-type :multiple) (= padding-type :multiple)
@ -642,6 +650,7 @@
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
(select-padding num)) (select-padding num))
:on-blur #(select-paddings false false false false) :on-blur #(select-paddings false false false false)
:min 0
:value (num (:layout-padding values))}]]])]) :value (num (:layout-padding values))}]]])])
[:div.padding-icons [:div.padding-icons
@ -682,6 +691,7 @@
:on-blur (fn [_] :on-blur (fn [_]
(select-gap nil) (select-gap nil)
(reset! gap-selected? :none)) (reset! gap-selected? :none))
:min 0
:value (:row-gap gap-value) :value (:row-gap gap-value)
:disabled (and (= :nowrap wrap-type) (not is-col?))}]] :disabled (and (= :nowrap wrap-type) (not is-col?))}]]
[:div {:class (stl/css-case :column-gap true [:div {:class (stl/css-case :column-gap true
@ -700,6 +710,7 @@
:on-blur (fn [_] :on-blur (fn [_]
(select-gap nil) (select-gap nil)
(reset! gap-selected? :none)) (reset! gap-selected? :none))
:min 0
:value (:column-gap gap-value) :value (:column-gap gap-value)
:disabled (and (= :nowrap wrap-type) is-col?)}]]] :disabled (and (= :nowrap wrap-type) is-col?)}]]]
@ -720,6 +731,7 @@
:on-blur (fn [_] :on-blur (fn [_]
(select-gap nil) (select-gap nil)
(reset! gap-selected? :none)) (reset! gap-selected? :none))
:min 0
:value (:column-gap gap-value) :value (:column-gap gap-value)
:disabled (and (= :nowrap wrap-type) is-col?)}]] :disabled (and (= :nowrap wrap-type) is-col?)}]]
@ -737,6 +749,7 @@
:on-blur (fn [_] :on-blur (fn [_]
(select-gap nil) (select-gap nil)
(reset! gap-selected? :none)) (reset! gap-selected? :none))
:min 0
:value (:row-gap gap-value) :value (:row-gap gap-value)
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]]))) :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) (let [new-css-system (mf/use-ctx ctx/new-css-system)
margin-type (or (:layout-item-margin-type values) :simple) 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 :m1])
(dm/get-in values [:layout-item-margin :m3]))) (dm/get-in values [:layout-item-margin :m3])))
(dm/get-in values [:layout-item-margin :m1]) (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 :m2])
(dm/get-in values [:layout-item-margin :m4]))) (dm/get-in values [:layout-item-margin :m4])))
(dm/get-in values [:layout-item-margin :m2]) (dm/get-in values [:layout-item-margin :m2])
"--") )
select-margins select-margins
(fn [m1? m2? m3? m4?] (fn [m1? m2? m3? m4?]
(st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?}))) (st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?})))
select-margin #(select-margins (= % :m1) (= % :m2) (= % :m3) (= % :m4))] select-margin #(select-margins (= % :m1) (= % :m2) (= % :m3) (= % :m4))]
(mf/use-effect (mf/use-effect
(fn [] (fn []
(fn [] (fn []
@ -77,12 +78,12 @@
i/margin-top-bottom-refactor] i/margin-top-bottom-refactor]
[:> numeric-input* {:className (stl/css :numeric-input) [:> numeric-input* {:className (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:nillable true
:value m1 :value m1
:on-focus (fn [event] :on-focus (fn [event]
(select-margins true false true false) (select-margins true false true false)
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :simple :m1) :on-change (partial on-margin-change :simple :m1)
:on-blur #(select-margins false false false false)}]] :on-blur #(select-margins false false false false)}]]
[:div {:class (stl/css :horizontal-margin) [:div {:class (stl/css :horizontal-margin)
@ -96,6 +97,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :simple :m2) :on-change (partial on-margin-change :simple :m2)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value m2}]]] :value m2}]]]
(= margin-type :multiple) (= margin-type :multiple)
@ -111,6 +113,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :multiple :m1) :on-change (partial on-margin-change :multiple :m1)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value (:m1 (:layout-item-margin values))}]] :value (:m1 (:layout-item-margin values))}]]
[:div {:class (stl/css :right-margin) [:div {:class (stl/css :right-margin)
:title "Right margin"} :title "Right margin"}
@ -123,6 +126,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :multiple :m2) :on-change (partial on-margin-change :multiple :m2)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value (:m2 (:layout-item-margin values))}]] :value (:m2 (:layout-item-margin values))}]]
[:div {:class (stl/css :bottom-margin) [:div {:class (stl/css :bottom-margin)
@ -136,6 +140,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :multiple :m3) :on-change (partial on-margin-change :multiple :m3)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value (:m3 (:layout-item-margin values))}]] :value (:m3 (:layout-item-margin values))}]]
[:div {:class (stl/css :left-margin) [:div {:class (stl/css :left-margin)
:title "Left margin"} :title "Left margin"}
@ -148,6 +153,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :multiple :m4) :on-change (partial on-margin-change :multiple :m4)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value (:m4 (:layout-item-margin values))}]]])] :value (:m4 (:layout-item-margin values))}]]])]
[:button {:class (stl/css-case :margin-mode true [:button {:class (stl/css-case :margin-mode true
:selected (= margin-type :multiple)) :selected (= margin-type :multiple))
@ -169,6 +175,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :simple :m1) :on-change (partial on-margin-change :simple :m1)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value m1}]] :value m1}]]
[:div.margin-item.tooltip.tooltip-bottom-left [:div.margin-item.tooltip.tooltip-bottom-left
@ -181,6 +188,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :simple :m2) :on-change (partial on-margin-change :simple :m2)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value m2}]]] :value m2}]]]
(= margin-type :multiple) (= margin-type :multiple)
@ -201,6 +209,7 @@
(dom/select-target event)) (dom/select-target event))
:on-change (partial on-margin-change :multiple num) :on-change (partial on-margin-change :multiple num)
:on-blur #(select-margins false false false false) :on-blur #(select-margins false false false false)
:nillable true
:value (num (:layout-item-margin values))}]]])]) :value (num (:layout-item-margin values))}]]])])
[:div.margin-item-icons [:div.margin-item-icons