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