Merge pull request #2728 from penpot/eva-bugfixin-flex

🐛 Fix some bugs reported on flex feedback

frontend/resources/styles/main/partials/context-menu.scss

@@ -56,6 +56,7 @@
   &:hover {
     color: $color-black;
     background-color: $color-primary-lighter;
+    text-decoration: none;
   }
 
   &.submenu {

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1613,7 +1613,8 @@
       margin-right: 5px;
       font-family: "worksans", sans-serif;
 
-      &.justify-content {
+      &.justify-content,
+      &.sizing {
         align-items: start;
         margin-top: 4px;
       }
@@ -1622,6 +1623,10 @@
       display: flex;
       width: 100%;
       max-width: 185px;
+      &.wrap {
+        flex-direction: column;
+        gap: 5px;
+      }
 
       &.justify-content {
         display: flex;
@@ -1717,21 +1722,88 @@
     padding: 1px;
   }
 
-  .gap-group,
+  .gap-group {
-  .margin-item-group {
+    display: grid;
-    display: flex;
+    grid-template-columns: 1fr 1fr;
+    gap: 7px;
     margin-top: 3px;
     margin-bottom: 8px;
     height: 26px;
-
+    max-width: 166px;
-    .gap-row,
+    .gap-row {
-    .gap-column,
-    .margin-item-row,
-    .margin-item-column,
-    .padding-row {
       display: flex;
       justify-content: center;
       align-items: center;
+      .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 7px;
+        svg {
+          height: 14px;
+          width: 14px;
+        }
+        &.rotated {
+          transform: rotate(90deg);
+        }
+        &.activated {
+          svg {
+            fill: $color-primary;
+          }
+        }
+      }
+      input {
+        font-size: 0.75rem;
+        min-width: 0;
+        padding: 0.25rem;
+        height: 20px;
+        margin: 0;
+      }
+    }
+    button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: none;
+      border: none;
+      cursor: pointer;
+      border-radius: $br-small;
+
+      &.lock {
+        border: 1px solid $color-gray-60;
+        border-radius: $br-small;
+        width: 30px;
+        height: 30px;
+      }
+      &.active {
+        svg {
+          fill: $color-primary;
+        }
+      }
+      &:hover {
+        background-color: $color-primary;
+        svg {
+          fill: $color-gray-60;
+        }
+      }
+    }
+  }
+
+  .padding-row,
+  .margin-row {
+    display: grid;
+    grid-template-columns: auto 30px;
+    max-width: 226px;
+    .padding-group,
+    .margin-item-group {
+      display: flex;
+      margin-top: 3px;
+      margin-bottom: 3px;
+      height: 26px;
+      .padding-item,
+      .margin-item {
+        display: flex;
+        align-items: center;
         flex-grow: 1;
         .icon {
           display: flex;
@@ -1788,30 +1860,16 @@
         }
       }
     }
-
-  .padding-row {
-    grid-template-columns: auto 30px;
-  }
-
-  .margin-item-row {
-    grid-template-columns: auto 30px;
-    margin-bottom: 1rem;
-  }
-
-  .margin-row {
-    grid-template-columns: 65px auto;
-  }
-
-  .padding-row,
-  .margin-item-row {
-    display: grid;
-    height: 26px;
     .padding-icons,
     .margin-item-icons {
-      display: flex;
       padding: 0;
       border: 1px solid $color-gray-60;
       border-radius: 3px;
+      margin-bottom: 8px;
+      margin-top: 3px;
+      margin-right: 1px;
+      height: 30px;
+      width: 30px;
 
       .padding-icon,
       .margin-item-icon {
@@ -1841,15 +1899,6 @@
       }
     }
 
-    .padding-icons,
-    .margin-item-icons {
-      margin-bottom: 8px;
-      margin-top: 3px;
-      margin-right: 1px;
-      height: 30px;
-      width: 30px;
-    }
-
     .wrapper {
       display: flex;
       height: 26px;

frontend/src/app/main/data/workspace/shape_layout.cljs

@@ -229,9 +229,9 @@
            (create-layout-from-selection :flex)
            (dwu/commit-undo-transaction undo-id)))))))
 
-(defn toogle-layout-flex
+(defn toggle-layout-flex
   []
-  (ptk/reify ::toogle-layout-flex
+  (ptk/reify ::toggle-layout-flex
     ptk/WatchEvent
     (watch [_ state _]
       (let [page-id          (:current-page-id state)
@@ -241,9 +241,10 @@
             single?          (= (count selected-shapes) 1)
             has-flex-layout? (and single? (ctl/layout? objects (:id (first selected-shapes))))]
 
+        (when (not= 0 (count selected))
           (if has-flex-layout?
             (rx/of (remove-layout selected))
-          (rx/of (create-layout)))))))
+            (rx/of (create-layout))))))))
 
 (defn update-layout
   [ids changes]

frontend/src/app/main/data/workspace/shortcuts.cljs

@@ -214,10 +214,10 @@
                           :subsections [:modify-layers]
                           :fn #(emit-when-no-readonly (dws/create-artboard-from-selection))}
 
-   :toogle-layout-flex   {:tooltip (ds/shift "F")
+   :toggle-layout-flex   {:tooltip (ds/shift "A")
-                          :command "shift+f"
+                          :command "shift+a"
                           :subsections [:modify-layers]
-                          :fn #(emit-when-no-readonly (dwsl/toogle-layout-flex))}
+                          :fn #(emit-when-no-readonly (dwsl/toggle-layout-flex))}
 
    ;; TOOLS
 

frontend/src/app/main/ui/workspace/context_menu.cljs

@@ -380,18 +380,18 @@
                                         (dwsl/create-layout-from-selection :flex)))
         remove-flex        #(st/emit! (dwsl/remove-layout ids))]
     (cond
-      (or (not single?) (and is-frame? (not is-flex-container?)) is-group?)
+      (or single? (and is-frame? (not is-flex-container?)) is-group?)
       [:*
        [:& menu-separator]
        [:& menu-entry {:title (tr "workspace.shape.menu.add-flex")
-                       :shortcut (sc/get-tooltip :toogle-layout-flex)
+                       :shortcut (sc/get-tooltip :toggle-layout-flex)
                        :on-click add-flex}]]
 
       is-flex-container?
       [:*
        [:& menu-separator]
        [:& menu-entry {:title (tr "workspace.shape.menu.remove-flex")
-                       :shortcut (sc/get-tooltip :toogle-layout-flex)
+                       :shortcut (sc/get-tooltip :toggle-layout-flex)
                        :on-click remove-flex}]])))
 
 (mf/defc context-menu-component

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -168,14 +168,13 @@
     (for [justify [:space-around :space-between]]
       [:button.justify.tooltip
        {:class    (dom/classnames :active  (= justify-content justify)
-                                  :tooltip-bottom-left (not= justify :start)
+                                  :tooltip-bottom-left (not= justify :space-around)
-                                  :tooltip-bottom (= justify :start))
+                                  :tooltip-bottom (= justify :space-around))
         :alt      (dm/str "Justify content " (d/name justify))
         :on-click #(set-justify justify)
         :key (dm/str "justify-content" (d/name justify))}
        (get-layout-flex-icon :justify-content justify is-col?)])]])
 
-
 (mf/defc padding-section
   [{:keys [values on-change-style on-change] :as props}]
 
@@ -196,8 +195,8 @@
      (cond
        (= padding-type :simple)
 
-       [:div.gap-group
+       [:div.padding-group
-        [:div.gap-row.tooltip.tooltip-bottom-left
+        [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Vertical padding"}
          [:span.icon.rotated i/auto-padding-both-sides]
          [:> numeric-input
@@ -206,7 +205,7 @@
            :on-change (partial on-change :simple :p1)
            :value p1}]]
 
-        [:div.gap-column.tooltip.tooltip-bottom-left
+        [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal padding"}
          [:span.icon i/auto-padding-both-sides]
          [:> numeric-input
@@ -233,57 +232,48 @@
               :value (num (:layout-padding values))}]]])])
 
      [:div.padding-icons
-      [:div.padding-icon.tooltip.tooltip-bottom
+      [:div.padding-icon.tooltip.tooltip-bottom-left
        {:class (dom/classnames :selected (= padding-type :multiple))
         :alt "Padding - multiple"
         :on-click #(on-change-style (if (= padding-type :multiple) :simple :multiple))}
        i/auto-padding-side]]]))
 
 (mf/defc gap-section
-  [{:keys [gap-selected? set-gap gap-value toggle-gap-type gap-type]}]
+  [{:keys [is-col? wrap-type gap-selected? set-gap gap-value]}]
-  (let [gap-locked?          (= gap-type :simple)
+  [:div.layout-row
-        some-gap-selected    (not= @gap-selected? :none)
+   [:div.gap.row-title "Gap"]
-        is-row-activated?    (or (and (not gap-locked?) (= @gap-selected? :row-gap)) (and gap-locked? some-gap-selected))
-        is-column-activated? (or (and (not gap-locked?) (= @gap-selected? :column-gap)) (and gap-locked? some-gap-selected))]
-
    [:div.gap-group
     [:div.gap-row.tooltip.tooltip-bottom-left
-      {:alt "Row gap"}
+     {:alt "Column gap"}
      [:span.icon
-       {:class (dom/classnames :activated is-row-activated?)}
       i/auto-gap]
      [:> numeric-input {:no-validate true
                         :placeholder "--"
                         :on-click (fn [event]
                                     (reset! gap-selected? :row-gap)
                                     (dom/select-target event))
-                         :on-change (partial set-gap gap-locked? :row-gap)
+                        :on-change (partial set-gap (= :no-wrap wrap-type) :row-gap)
                         :on-blur #(reset! gap-selected? :none)
-                         :value (:row-gap gap-value)}]]
+                        :value (:row-gap gap-value)
+                        :disabled (and (= :no-wrap wrap-type) (not is-col?))}]]
 
-     [:div.gap-column.tooltip.tooltip-bottom-left
+    [:div.gap-row.tooltip.tooltip-bottom-left
-      {:alt "Column gap"}
+     {:alt "Row gap"}
      [:span.icon.rotated
-       {:class (dom/classnames
-                :activated is-column-activated?)}
       i/auto-gap]
      [:> numeric-input {:no-validate true
                         :placeholder "--"
                         :on-click (fn [event]
                                     (reset! gap-selected? :column-gap)
                                     (dom/select-target event))
-                         :on-change (partial set-gap gap-locked? :column-gap)
+                        :on-change (partial set-gap (= :no-wrap wrap-type) :column-gap)
                         :on-blur #(reset! gap-selected? :none)
-                         :value (:column-gap gap-value)}]]
+                        :value (:column-gap gap-value)
-     [:button.lock {:on-click toggle-gap-type
+                        :disabled (and (= :no-wrap wrap-type) is-col?)}]]]])
-                    :class (dom/classnames :active gap-locked?)}
-      (if gap-locked?
-        i/lock
-        i/unlock)]]))
 
 (mf/defc layout-container-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
-  [{:keys [ids _type values] :as props}]
+  [{:keys [ids _type values  multiple] :as props}]
   (let [open?               (mf/use-state false)
 
         ;; Display
@@ -344,36 +334,14 @@
 
         ;; Gap
 
-        change-gap-type
-        (fn [type]
-          (st/emit! (dwsl/update-layout ids {:layout-gap-type type})))
-
-        gap-type (:layout-gap-type values)
-
         gap-selected?       (mf/use-state :none)
-        gap-locked?         (= gap-type :simple)
+
-        toggle-gap-type     (fn []
-                              (let [layout-gap (:layout-gap values)
-                                    row-gap (:row-gap layout-gap)
-                                    column-gap (:column-gap layout-gap)
-                                    max (max row-gap column-gap)
-                                    new-type (if (= gap-type :simple)
-                                               :multiple
-                                               :simple)]
-                                (when (and (not= row-gap column-gap) (= gap-type :multiple))
-                                  (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap max :column-gap max}})))
-                                (change-gap-type new-type)))
         set-gap
-        (fn [gap-locked? type val]
+        (fn [gap-multiple? type val]
-          (if gap-locked?
+          (if gap-multiple?
             (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
             (st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))
 
-        select-all-gap
-        (fn [event]
-          (when gap-locked?
-            (dom/select-target event)))
-
         ;; Padding
 
         change-padding-type
@@ -396,7 +364,7 @@
      [:div.element-set-title
       [:*
        [:span "Layout"]
-       (if (:layout values)
+       (if (and (not multiple)(:layout values))
          [:div.title-actions
           #_[:div.layout-btns
            [:button {:on-click set-flex
@@ -448,12 +416,11 @@
             [:& justify-content-row {:is-col? is-col?
                                      :justify-content justify-content
                                      :set-justify set-justify-content}]]]
-          [:& gap-section {:gap-selected? gap-selected?
+          [:& gap-section {:is-col? is-col?
-                           :select-all-gap select-all-gap
+                           :wrap-type wrap-type
+                           :gap-selected? gap-selected?
                            :set-gap set-gap
-                           :gap-value (:layout-gap values)
+                           :gap-value (:layout-gap values)}]
-                           :toggle-gap-type toggle-gap-type
-                           :gap-type gap-type}]
 
 
           [:& padding-section {:values values

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs

@@ -47,12 +47,12 @@
              (dm/get-in values [:layout-item-margin :m2])
              "--")]
 
-    [:div.layout-row.margin-item-row
+    [:div.margin-row
      (cond
        (= margin-type :simple)
 
        [:div.margin-item-group
-        [:div.margin-item-row.tooltip.tooltip-bottom-left
+        [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Vertical margin"}
          [:span.icon i/auto-margin-both-sides]
          [:> numeric-input
@@ -61,7 +61,7 @@
            :on-change (partial on-margin-change :simple :m1)
            :value m1}]]
 
-        [:div.margin-item-column.tooltip.tooltip-bottom-left
+        [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal margin"}
          [:span.icon.rotated i/auto-margin-both-sides]
          [:> numeric-input
@@ -88,7 +88,7 @@
               :value (num (:layout-item-margin values))}]]])])
 
      [:div.margin-item-icons
-      [:div.margin-item-icon.tooltip.tooltip-bottom
+      [:div.margin-item-icon.tooltip.tooltip-bottom-left
        {:class (dom/classnames :selected (= margin-type :multiple))
         :alt "Margin - multiple"
         :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))}
@@ -100,6 +100,7 @@
         auto? is-layout-container?]
 
     [:div.btn-wrapper
+     {:class (when (and fill? auto?) "wrap")}
      [:div.layout-behavior.horizontal
       [:button.behavior-btn.tooltip.tooltip-bottom
        {:alt "Fix width"
@@ -200,19 +201,13 @@
 
      [:div.element-set-content.layout-item-menu
       [:div.layout-row
-       [:div.row-title "Sizing"]
+       [:div.row-title.sizing "Sizing"]
        [:& element-behavior {:is-layout-child? is-layout-child?
                              :is-layout-container? is-layout-container?
                              :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
                              :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
                              :on-change-behavior on-change-behavior}]]
       
-
-      (when is-layout-child?
-        [:& margin-section {:values values
-                            :change-margin-style change-margin-style
-                            :on-margin-change on-margin-change}])
-
       (when is-layout-child?
         [:div.layout-row
          [:div.row-title "Align"]
@@ -221,6 +216,11 @@
                               :align-self align-self
                               :set-align-self set-align-self}]]])
 
+      (when is-layout-child?
+        [:& margin-section {:values values
+                            :change-margin-style change-margin-style
+                            :on-margin-change on-margin-change}])
+
       [:div.advanced-ops-body
        [:div.input-wrapper
         (for  [item (cond-> []

frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs

@@ -11,6 +11,7 @@
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] 
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -26,6 +27,7 @@
         layer-values (select-keys shape layer-attrs)
         constraint-values (select-keys shape constraint-attrs)
         layout-item-values (select-keys shape layout-item-attrs)
+        layout-container-values (select-keys shape layout-container-flex-attrs)
 
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)]
@@ -34,6 +36,8 @@
                         :type type
                         :values measure-values
                         :shape shape}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+     
      (when is-layout-child?
        [:& layout-item-menu
         {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs

@@ -11,6 +11,7 @@
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] 
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -28,6 +29,7 @@
         layer-values (select-keys shape layer-attrs)
         constraint-values (select-keys shape constraint-attrs)
         layout-item-values (select-keys shape layout-item-attrs)
+        layout-container-values (select-keys shape layout-container-flex-attrs)
 
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)]
@@ -36,6 +38,8 @@
                         :type type
                         :values measure-values
                         :shape shape}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+     
      (when is-layout-child?
        [:& layout-item-menu {:ids ids
                              :type type

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -43,7 +43,7 @@
      (when (not is-layout-child?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
      (when (or is-layout-child? is-layout-container?)
        [:& layout-item-menu

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -54,7 +54,7 @@
     [:div.options
      [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
      [:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}]
-     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
      (when is-layout-child?
        [:& layout-item-menu

frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs

@@ -11,6 +11,7 @@
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -28,6 +29,7 @@
         fill-values (select-keys shape fill-attrs)
         stroke-values (select-keys shape stroke-attrs)
         layout-item-values (select-keys shape layout-item-attrs)
+        layout-container-values (select-keys shape layout-container-flex-attrs)
 
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)]
@@ -36,6 +38,8 @@
                         :type type
                         :values measure-values
                         :shape shape}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+     
      (when is-layout-child?
        [:& layout-item-menu
         {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -327,7 +327,7 @@
      (when-not (empty? measure-ids)
        [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}])
 
-     [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values}]
+     [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
 
      (when is-layout-child?
        [:& layout-item-menu

frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs

@@ -11,6 +11,7 @@
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -28,6 +29,7 @@
         layer-values (select-keys shape layer-attrs)
         constraint-values (select-keys shape constraint-attrs)
         layout-item-values (select-keys shape layout-item-attrs)
+        layout-container-values (select-keys shape layout-container-flex-attrs)
 
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)]
@@ -36,6 +38,8 @@
                         :type type
                         :values measure-values
                         :shape shape}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
      (when is-layout-child?
        [:& layout-item-menu {:ids ids
                              :type type

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -11,6 +11,7 @@
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -29,7 +30,7 @@
         fill-values (select-keys shape fill-attrs)
         stroke-values (select-keys shape stroke-attrs)
         layout-item-values (select-keys shape layout-item-attrs)
-
+        layout-container-values (select-keys shape layout-container-flex-attrs)
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)]
     [:*
@@ -37,6 +38,7 @@
                         :type type
                         :values measure-values
                         :shape shape}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
      (when is-layout-child?
        [:& layout-item-menu
         {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs

@@ -12,6 +12,7 @@
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -102,6 +103,7 @@
         fill-values    (get-fill-values shape)
         stroke-values  (get-stroke-values shape)
         layout-item-values (select-keys shape layout-item-attrs)
+        layout-container-values (select-keys shape layout-container-flex-attrs)
 
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)]
@@ -112,6 +114,8 @@
                           :type type
                           :values measure-values
                           :shape shape}]
+       [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
+
        (when is-layout-child?
          [:& layout-item-menu
           {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs

@@ -14,6 +14,7 @@
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu fill-attrs]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -28,6 +29,7 @@
 
         is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)
+        layout-container-values (select-keys shape layout-container-flex-attrs)
         state-map    (mf/deref refs/workspace-editor-state)
         shared-libs  (mf/deref refs/workspace-libraries)
 
@@ -70,6 +72,7 @@
        :type type
        :values (select-keys shape measure-attrs)
        :shape shape}]
+     [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
      (when is-layout-child?
        [:& layout-item-menu

frontend/translations/en.po

@@ -2508,6 +2508,9 @@ msgstr "Toggle history"
 msgid "shortcuts.toggle-layers"
 msgstr "Toggle layers"
 
+msgid "shortcuts.toggle-layout-flex"
+msgstr "Add/remove layout flex"
+
 msgid "shortcuts.toggle-lock"
 msgstr "Lock selected"
 

frontend/translations/es.po

@@ -2846,6 +2846,9 @@ msgstr "Mostrar/ocultar histórico"
 msgid "shortcuts.toggle-layers"
 msgstr "Mostrar/ocultar capas"
 
+msgid "shortcuts.toggle-layout-flex"
+msgstr "Añadir/eliminar layout flex"
+
 msgid "shortcuts.toggle-lock"
 msgstr "Bloquear/Desbloquear"