diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc
index 32f54e16e..53aa8fc6e 100644
--- a/common/src/app/common/types/shape/layout.cljc
+++ b/common/src/app/common/types/shape/layout.cljc
@@ -97,6 +97,8 @@
::layout-item-min-w
::layout-item-align-self]))
+(defn layout? [shape]
+ (and (= :frame (:type shape)) (= :flex (:layout shape))))
(defn wrap? [{:keys [layout-wrap-type]}]
(= layout-wrap-type :wrap))
diff --git a/frontend/resources/images/icons/layout-columns.svg b/frontend/resources/images/icons/layout-columns.svg
new file mode 100644
index 000000000..4c9381c99
--- /dev/null
+++ b/frontend/resources/images/icons/layout-columns.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/layout-rows.svg b/frontend/resources/images/icons/layout-rows.svg
new file mode 100644
index 000000000..f09a1ced8
--- /dev/null
+++ b/frontend/resources/images/icons/layout-rows.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 3c785391e..7e956838d 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -182,6 +182,10 @@
&.error {
border-color: $color-danger;
}
+
+ &[disabled] {
+ color: $color-gray-30;
+ }
}
.input-select {
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 4f6015f09..9c5f35f7c 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -265,6 +265,14 @@
[ids]
(l/derived #(into [] (keep (d/getf %)) ids) workspace-page-objects =))
+(defn parents-by-ids
+ [ids]
+ (l/derived
+ (fn [objects]
+ (let [parent-ids (into #{} (keep #(get-in objects [% :parent-id])) ids)]
+ (into [] (keep #(get objects %)) parent-ids)))
+ workspace-page-objects =))
+
(defn children-objects
[id]
(l/derived
diff --git a/frontend/src/app/main/ui/components/shape_icon.cljs b/frontend/src/app/main/ui/components/shape_icon.cljs
index 27a8794b9..ab42a2e4c 100644
--- a/frontend/src/app/main/ui/components/shape_icon.cljs
+++ b/frontend/src/app/main/ui/components/shape_icon.cljs
@@ -6,6 +6,7 @@
(ns app.main.ui.components.shape-icon
(:require
+ [app.common.types.shape.layout :as ctl]
[app.main.ui.icons :as i]
[rumext.v2 :as mf]))
@@ -13,7 +14,15 @@
(mf/defc element-icon
[{:keys [shape main-instance?] :as props}]
(case (:type shape)
- :frame i/artboard
+ :frame (cond
+ (and (ctl/layout? shape) (ctl/col? shape))
+ i/layout-columns
+
+ (and (ctl/layout? shape) (ctl/row? shape))
+ i/layout-rows
+
+ :else
+ i/artboard)
:image i/image
:line i/line
:circle i/circle
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 69dd22c14..e6c073122 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -133,6 +133,8 @@
(def justify-content-row-end (icon-xref :justify-content-row-end))
(def justify-content-row-start (icon-xref :justify-content-row-start))
(def layers (icon-xref :layers))
+(def layout-columns (icon-xref :layout-columns))
+(def layout-rows (icon-xref :layout-rows))
(def letter-spacing (icon-xref :letter-spacing))
(def libraries (icon-xref :libraries))
(def library (icon-xref :library))
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 4ce0b57e3..c36017017 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
@@ -8,7 +8,9 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
+ [app.common.types.shape.layout :as ctl]
[app.main.data.workspace.shape-layout :as dwsl]
+ [app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
@@ -129,7 +131,7 @@
{:class (dom/classnames :active (= align-self align)
:tooltip-bottom-left (not= align :start)
:tooltip-bottom (= align :start))
- :alt (dm/str "Align self " (d/name align)) ;; TODO aƱadir lineas de texto a tradus
+ :alt (dm/str "Align self " (d/name align))
:on-click #(set-align-self align)
:key (str "align-self" align)}
(get-layout-flex-icon :align-self align is-col?)])]))
@@ -141,6 +143,9 @@
(let [open? (mf/use-state false)
toggle-open (fn [] (swap! open? not))
+ selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
+ selection-parents (mf/deref selection-parents-ref)
+
change-margin-style
(fn [type]
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
@@ -151,8 +156,7 @@
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
- saved-dir (:layout-flex-dir values)
- is-col? (or (= :column saved-dir) (= :reverse-column saved-dir))
+ is-col? (every? ctl/col? selection-parents)
on-margin-change
(fn [type val]
@@ -182,7 +186,7 @@
: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}]]
-
+
[:& margin-section {:values values
:change-margin-style change-margin-style
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 2fdea6e9f..cba05bc1e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -8,6 +8,7 @@
(:require
[app.common.data :as d]
[app.common.geom.shapes :as gsh]
+ [app.common.types.shape.layout :as ctl]
[app.common.types.shape.radius :as ctsr]
[app.main.constants :refer [size-presets]]
[app.main.data.workspace :as udw]
@@ -81,6 +82,11 @@
[shape])
frames (map #(deref (refs/object-by-id (:frame-id %))) old-shapes)
+ selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
+ selection-parents (mf/deref selection-parents-ref)
+
+ flex-child? (->> selection-parents (some ctl/layout?))
+
;; To show interactively the measures while the user is manipulating
;; the shape with the mouse, generate a copy of the shapes applying
;; the transient transformations.
@@ -327,11 +333,13 @@
:placeholder "--"
:on-click select-all
:on-change on-pos-x-change
+ :disabled flex-child?
:value (:x values)}]]
[:div.input-element.Yaxis {:title (tr "workspace.options.y")}
[:> numeric-input {:no-validate true
:placeholder "--"
:on-click select-all
+ :disabled flex-child?
:on-change on-pos-y-change
:value (:y values)}]]])