mirror of
https://github.com/penpot/penpot.git
synced 2025-03-16 01:31:22 -05:00
🐛 Fix problem with multiple elements in flex
This commit is contained in:
parent
641f8fb250
commit
9994b705d4
5 changed files with 55 additions and 15 deletions
|
@ -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}})
|
||||
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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 ")")}}]]]))
|
||||
|
|
|
@ -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?))}]]]])))
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue