diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index 181cf32cf..3a47fdcd5 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -71,7 +71,26 @@ :constraints-h :constraints-group :constraints-v :constraints-group :fixed-scroll :constraints-group - :exports :exports-group}) + :exports :exports-group + + :layout :layout-container + :layout-dir :layout-container + :layout-gap :layout-container + :layout-type :layout-container + :layout-wrap-type :layout-container + :layout-padding-type :layout-container + :layout-padding :layout-container + :layout-h-orientation :layout-container + :layout-v-orientation :layout-container + + :layout-margin :layout-item + :layout-margin-type :layout-item + :layout-h-behavior :layout-item + :layout-v-behavior :layout-item + :layout-max-h :layout-item + :layout-min-h :layout-item + :layout-max-w :layout-item + :layout-min-w :layout-item}) ;; Attributes that may directly be edited by the user with forms (def editable-attrs @@ -111,10 +130,29 @@ :stroke-cap-start :stroke-cap-end - :exports} + :exports - :group #{:proportion-lock - :width :height + :layout + :layout-dir + :layout-gap + :layout-type + :layout-wrap-type + :layout-padding-type + :layout-padding + :layout-h-orientation + :layout-v-orientation + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} + + :group #{:proportion-lock + :width :height :x :y :rotation :selrect @@ -135,7 +173,16 @@ :blur - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :rect #{:proportion-lock :width :height @@ -180,7 +227,16 @@ :blur - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :circle #{:proportion-lock :width :height @@ -223,7 +279,16 @@ :blur - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :path #{:proportion-lock :width :height @@ -266,7 +331,16 @@ :blur - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :text #{:proportion-lock :width :height @@ -332,7 +406,16 @@ :grow-type - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :image #{:proportion-lock :width :height @@ -358,7 +441,16 @@ :blur - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :svg-raw #{:proportion-lock :width :height @@ -403,7 +495,16 @@ :blur - :exports} + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w} :bool #{:proportion-lock :width :height @@ -446,5 +547,14 @@ :blur - :exports}}) + :exports + + :layout-margin + :layout-margin-type + :layout-h-behavior + :layout-v-behavior + :layout-max-h + :layout-min-h + :layout-max-w + :layout-min-w}}) 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 78b9ccbd4..d27cb93a5 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 @@ -136,7 +136,8 @@ (mf/defc layout-item-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} - [{:keys [ids _type values is-layout-child? is-layout-container?] :as props}] + [{:keys [ids values is-layout-child? is-layout-container?] :as props}] + (let [open? (mf/use-state false) toggle-open (fn [] (swap! open? not)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 09a34eb25..17f5f7051 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -34,116 +34,134 @@ ;; - text: read it from all the content nodes, and then merging it. (def type->read-mode {:frame - {:measure :shape - :layer :shape - :constraint :shape - :fill :shape - :shadow :children - :blur :children - :stroke :shape - :text :children - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :shape + :shadow :children + :blur :children + :stroke :shape + :text :children + :exports :shape + :layout-container :shape + :layout-item :shape} :group - {:measure :shape - :layer :shape - :constraint :shape - :fill :children - :shadow :shape - :blur :shape - :stroke :children - :text :children - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :children + :shadow :shape + :blur :shape + :stroke :children + :text :children + :exports :shape + :layout-container :ignore + :layout-item :shape} :path - {:measure :shape - :layer :shape - :constraint :shape - :fill :shape - :shadow :shape - :blur :shape - :stroke :shape - :text :ignore - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :shape + :shadow :shape + :blur :shape + :stroke :shape + :text :ignore + :exports :shape + :layout-container :ignore + :layout-item :shape} :text - {:measure :shape - :layer :shape - :constraint :shape - :fill :text - :shadow :shape - :blur :shape - :stroke :shape - :text :text - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :text + :shadow :shape + :blur :shape + :stroke :shape + :text :text + :exports :shape + :layout-container :ignore + :layout-item :shape} :image - {:measure :shape - :layer :shape - :constraint :shape - :fill :ignore - :shadow :shape - :blur :shape - :stroke :ignore - :text :ignore - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :ignore + :shadow :shape + :blur :shape + :stroke :ignore + :text :ignore + :exports :shape + :layout-container :ignore + :layout-item :shape} :rect - {:measure :shape - :layer :shape - :constraint :shape - :fill :shape - :shadow :shape - :blur :shape - :stroke :shape - :text :ignore - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :shape + :shadow :shape + :blur :shape + :stroke :shape + :text :ignore + :exports :shape + :layout-container :ignore + :layout-item :shape} :circle - {:measure :shape - :layer :shape - :constraint :shape - :fill :shape - :shadow :shape - :blur :shape - :stroke :shape - :text :ignore - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :shape + :shadow :shape + :blur :shape + :stroke :shape + :text :ignore + :exports :shape + :layout-container :ignore + :layout-item :shape} :svg-raw - {:measure :shape - :layer :shape - :constraint :shape - :fill :shape - :shadow :shape - :blur :shape - :stroke :shape - :text :ignore - :exports :shape} + {:measure :shape + :layer :shape + :constraint :shape + :fill :shape + :shadow :shape + :blur :shape + :stroke :shape + :text :ignore + :exports :shape + :layout-container :ignore + :layout-item :shape} :bool - {:measure :shape - :layer :shape - :constraint :shape - :fill :shape - :shadow :shape - :blur :shape - :stroke :shape - :text :ignore - :exports :shape}}) + {:measure :shape + :layer :shape + :constraint :shape + :fill :shape + :shadow :shape + :blur :shape + :stroke :shape + :text :ignore + :exports :shape + :layout-container :ignore + :layout-item :shape}}) (def group->attrs - {:measure measure-attrs - :layer layer-attrs - :constraint constraint-attrs - :fill fill-attrs - :shadow shadow-attrs - :blur blur-attrs - :stroke stroke-attrs - :text ot/attrs - :exports exports-attrs - :layout layout-container-flex-attrs - :layout-item layout-item-attrs}) + {:measure measure-attrs + :layer layer-attrs + :constraint constraint-attrs + :fill fill-attrs + :shadow shadow-attrs + :blur blur-attrs + :stroke stroke-attrs + :text ot/attrs + :exports exports-attrs + :layout-container layout-container-flex-attrs + :layout-item layout-item-attrs}) (def shadow-keys [:style :color :offset-x :offset-y :blur :spread]) @@ -254,20 +272,20 @@ is-layout-child? (mf/deref is-layout-child-ref) has-text? (contains? all-types :text) - + [measure-ids measure-values] (get-attrs shapes objects :measure) - [layer-ids layer-values - constraint-ids constraint-values - fill-ids fill-values - shadow-ids shadow-values - blur-ids blur-values - stroke-ids stroke-values - text-ids text-values - exports-ids exports-values - layout-ids layout-container-values - layout-item-ids layout-item-values] + [layer-ids layer-values + constraint-ids constraint-values + fill-ids fill-values + shadow-ids shadow-values + blur-ids blur-values + stroke-ids stroke-values + text-ids text-values + exports-ids exports-values + layout-container-ids layout-container-values + layout-item-ids layout-item-values] (mf/use-memo (mf/deps objects-no-measures) (fn [] @@ -282,7 +300,7 @@ (get-attrs shapes objects-no-measures :stroke) (get-attrs shapes objects-no-measures :text) (get-attrs shapes objects-no-measures :exports) - (get-attrs shapes objects-no-measures :layout) + (get-attrs shapes objects-no-measures :layout-container) (get-attrs shapes objects-no-measures :layout-item) ])))] @@ -291,8 +309,8 @@ [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}]) (when (:layout layout-container-values) - [:& layout-container-menu {:type type :ids layout-ids :values layout-container-values}]) - + [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values}]) + (when is-layout-child? [:& layout-item-menu {:type type