diff --git a/common/src/app/common/types/shape/attrs.cljc b/common/src/app/common/types/shape/attrs.cljc index 100861cf25..1f787c44a4 100644 --- a/common/src/app/common/types/shape/attrs.cljc +++ b/common/src/app/common/types/shape/attrs.cljc @@ -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}}) diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index e501a85f75..a5b23b45d5 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -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) diff --git a/frontend/src/app/main/ui/frame_preview.cljs b/frontend/src/app/main/ui/frame_preview.cljs index 67cd88e676..9188edb51f 100644 --- a/frontend/src/app/main/ui/frame_preview.cljs +++ b/frontend/src/app/main/ui/frame_preview.cljs @@ -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 ")")}}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 0207f372be..dd62d15a55 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -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?))}]]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index a9187e95cb..7a54130e98 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -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