diff --git a/common/src/app/common/geom/shapes/flex_layout/lines.cljc b/common/src/app/common/geom/shapes/flex_layout/lines.cljc index 3692e9fb4..1aa12f6e9 100644 --- a/common/src/app/common/geom/shapes/flex_layout/lines.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/lines.cljc @@ -162,7 +162,6 @@ (defn add-lines-positions [parent layout-bounds layout-lines] - (let [row? (ctl/row? parent) col? (ctl/col? parent) auto-width? (ctl/auto-width? parent) @@ -410,6 +409,9 @@ reverse? (ctl/reverse? shape) children (cond->> children (not reverse?) reverse) + ;; Don't take into account absolute children + children (->> children (remove (comp ctl/layout-absolute? second))) + ;; Creates the layout lines information layout-lines (->> (init-layout-lines shape children layout-bounds) diff --git a/frontend/src/app/main/ui/formats.cljs b/frontend/src/app/main/ui/formats.cljs index c4867a9b5..76fac5eda 100644 --- a/frontend/src/app/main/ui/formats.cljs +++ b/frontend/src/app/main/ui/formats.cljs @@ -46,12 +46,16 @@ (defn format-padding-margin-shorthand [values] ;; Values come in [p1 p2 p3 p4] - (let [[p1 p2 p3 p4] values] + (let [[p1 p2 p3 p4] values + p1 (format-number p1) + p2 (format-number p2) + p3 (format-number p3) + p4 (format-number p4)] (cond - (apply = values) + (= p1 p2 p3 p4) {:p1 p1} - (= 4 (count (set values))) + (= 4 (count (set [p1 p2 p3 p4]))) {:p1 p1 :p2 p2 :p3 p3 :p4 p4} (and (= p1 p3) (= p2 p4)) @@ -59,7 +63,6 @@ (and (not= p1 p3) (= p2 p4)) {:p1 p1 :p2 p2 :p3 p3} - :else {:p1 p1 :p2 p2 :p3 p3 :p4 p4}))) @@ -71,7 +74,7 @@ (= sizing :fill) "100%" (= sizing :auto) "auto" (number? value) (format-pixels value) - :else value))) + :else value))) (defn format-padding [padding-values type] @@ -92,5 +95,5 @@ (let [row-gap (:row-gap gap-values) column-gap (:column-gap gap-values)] (if (= row-gap column-gap) - (str/fmt "%spx" row-gap) - (str/fmt "%spx %spx" row-gap column-gap)))) \ No newline at end of file + (str/fmt "%spx" (format-number row-gap)) + (str/fmt "%spx %spx" (format-number row-gap) (format-number column-gap))))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs index 92ae1521e..4e4430f3c 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs @@ -107,13 +107,13 @@ [:& copy-button {:data (copy-data shape :layout-align-content)}]]) [:div.attributes-unit-row - [:div.attributes-label "Gap"] - (if (= (:row-gap (:layout-gap shape)) (:column-gap (:layout-gap shape))) + [:div.attributes-label "Gaps"] + (if (= (:row-gap (:layout-gap shape)) (:column-gap (:layout-gap shape))) [:div.attributes-value - [:span (str/capital (d/name (:row-gap (:layout-gap shape)))) "px"]] + [:span (-> shape :layout-gap :row-gap fm/format-pixels)]] [:div.attributes-value - [:span.items (:row-gap (:layout-gap shape)) "px"] - [:span (:column-gap (:layout-gap shape)) "px"]]) + [:span.items (-> shape :layout-gap :row-gap fm/format-pixels)] + [:span (-> shape :layout-gap :column-gap fm/format-pixels)]]) [:& copy-button {:data (copy-data shape :layout-gap)}]] [:div.attributes-unit-row diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index dff59ed74..2d97af2ed 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -72,7 +72,9 @@ page-id (:page-id (:query-params route)) flex-items (get-flex-elements page-id shapes from) objects (get-objects from) - shapes (map #(assoc % :flex-items flex-items) shapes) + shapes (->> shapes + (map #(assoc % :parent (get objects (:parent-id %)))) + (map #(assoc % :flex-items flex-items))) style-code (-> (cg/generate-style-code @style-type shapes) (format-code "css")) diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs index acbd5ebfc..321119509 100644 --- a/frontend/src/app/util/code_gen.cljs +++ b/frontend/src/app/util/code_gen.cljs @@ -10,6 +10,7 @@ [app.common.data.macros :as dm] [app.common.pages.helpers :as cph] [app.common.text :as txt] + [app.common.types.shape.layout :as ctl] [app.main.ui.formats :as fmt] [app.util.color :as uc] [cuerdas.core :as str])) @@ -21,12 +22,6 @@ (if (= style :inner-shadow) "inset " "") (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color)))) -(defn format-gap - [{row-gap :row-gap column-gap :column-gap}] - (if (= row-gap column-gap) - (str/fmt "%spx" row-gap) - (str/fmt "%spx %spx" row-gap column-gap))) - (defn fill-color->background [fill] (uc/color->background {:color (:fill-color fill) @@ -58,10 +53,15 @@ (str/format "%spx %s %s" width style (uc/color->background color))))) (defn format-position [_ shape] - (cond - (cph/frame-shape? shape) "relative" - (empty? (:flex-items shape)) "absolute" - :else "static")) + (let [relative? (cph/frame-shape? shape) + absolute? (or (empty? (:flex-items shape)) + (and (ctl/any-layout? (:parent shape)) (ctl/layout-absolute? shape)))] + (cond + absolute? "absolute" + relative? "relative" + + ;; static is default value in css + :else nil))) (defn get-size [type values] @@ -80,7 +80,8 @@ {:position {:props [:type] :to-prop {:type "position"} :format {:type format-position}} - :layout {:props (if (empty? (:flex-items shape)) + :layout {:props (if (or (empty? (:flex-items shape)) + (ctl/layout-absolute? shape)) [:width :height :x :y :radius :rx :r1] [:width :height :radius :rx :r1]) :to-prop {:x "left" @@ -89,7 +90,7 @@ :rx "border-radius" :r1 "border-radius"} :format {:rotation #(str/fmt "rotate(%sdeg)" %) - :r1 #(apply str/fmt "%spx, %spx, %spx, %spx" %) + :r1 #(apply str/fmt "%spx %spx %spx %spx" %) :width #(get-size :width %) :height #(get-size :height %)} :multi {:r1 [:r1 :r2 :r3 :r4]}} @@ -124,7 +125,7 @@ :layout-align-items d/name :layout-justify-content d/name :layout-wrap-type d/name - :layout-gap format-gap + :layout-gap fmt/format-gap :layout-padding fmt/format-padding}}}) (def style-text