✨ Visual adjustments

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))

frontend/resources/images/icons/layout-columns.svg

@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="806.295 634 53.403 53.403" version="1.1">
+  <path d="M859.697,634L806.295,634L806.295,687.403L859.697,687.403L859.697,634ZM855.374,638.555L855.374,682.847L810.617,682.847L810.617,638.555L855.374,638.555ZM817.491,644.294L848.491,644.294L848.491,657.294L817.491,657.294L817.491,644.294ZM817.491,664.294L848.491,664.294L848.491,677.294L817.491,677.294L817.491,664.294Z"/>
+</svg>

frontend/resources/images/icons/layout-rows.svg

@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="694 635 53 53" version="1.1">
+  <path d="M694,635L694,688L747,688L747,635L694,635ZM698.521,639.29L742.479,639.29L742.479,683.71L698.521,683.71L698.521,639.29ZM704.455,677.303L704.455,646.537L717.358,646.537L717.358,677.303L704.455,677.303ZM723.312,677.303L723.312,646.537L736.214,646.537L736.214,677.303L723.312,677.303Z" />
+</svg>

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 {

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

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

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))

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]

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)}]]])