diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss index 828e0bd82..616cdfa89 100644 --- a/frontend/resources/styles/main/partials/context-menu.scss +++ b/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 { diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 3174aa77e..0b6c026df 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/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,22 +1722,18 @@ padding: 1px; } - .gap-group, - .margin-item-group { - display: flex; + .gap-group { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 7px; margin-top: 3px; margin-bottom: 8px; height: 26px; - - .gap-row, - .gap-column, - .margin-item-row, - .margin-item-column, - .padding-row { + max-width: 166px; + .gap-row { display: flex; justify-content: center; align-items: center; - flex-grow: 1; .icon { display: flex; justify-content: center; @@ -1755,7 +1756,6 @@ font-size: 0.75rem; min-width: 0; padding: 0.25rem; - width: 70px; height: 20px; margin: 0; } @@ -1789,29 +1789,87 @@ } } - .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 { + .margin-row { display: grid; - height: 26px; + 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; + 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; + width: 70px; + 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-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; diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index b0eb03812..ab1a18070 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/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))))] - (if has-flex-layout? - (rx/of (remove-layout selected)) - (rx/of (create-layout))))))) + (when (not= 0 (count selected)) + (if has-flex-layout? + (rx/of (remove-layout selected)) + (rx/of (create-layout)))))))) (defn update-layout [ids changes] diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index 1a77a546d..d7e81b0c4 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/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") - :command "shift+f" + :toggle-layout-flex {:tooltip (ds/shift "A") + :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 diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 550b68556..d80eba18a 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index bb1d40472..cb216fd4d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/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 (= justify :start)) + :tooltip-bottom-left (not= justify :space-around) + :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.gap-row.tooltip.tooltip-bottom-left + [:div.padding-group + [: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]}] - (let [gap-locked? (= gap-type :simple) - some-gap-selected (not= @gap-selected? :none) - 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))] + [{:keys [is-col? wrap-type gap-selected? set-gap gap-value]}] + [:div.layout-row + [:div.gap.row-title "Gap"] + [:div.gap-group + [:div.gap-row.tooltip.tooltip-bottom-left + {:alt "Column gap"} + [:span.icon + 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 (= :no-wrap wrap-type) :row-gap) + :on-blur #(reset! gap-selected? :none) + :value (:row-gap gap-value) + :disabled (and (= :no-wrap wrap-type) (not is-col?))}]] - [:div.gap-group - [:div.gap-row.tooltip.tooltip-bottom-left - {:alt "Row 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-blur #(reset! gap-selected? :none) - :value (:row-gap gap-value)}]] - - [:div.gap-column.tooltip.tooltip-bottom-left - {:alt "Column 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-blur #(reset! gap-selected? :none) - :value (:column-gap gap-value)}]] - [:button.lock {:on-click toggle-gap-type - :class (dom/classnames :active gap-locked?)} - (if gap-locked? - i/lock - i/unlock)]])) + [:div.gap-row.tooltip.tooltip-bottom-left + {:alt "Row gap"} + [:span.icon.rotated + 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 (= :no-wrap wrap-type) :column-gap) + :on-blur #(reset! gap-selected? :none) + :value (:column-gap gap-value) + :disabled (and (= :no-wrap wrap-type) is-col?)}]]]]) (mf/defc layout-container-menu - {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} - [{:keys [ids _type values] :as props}] + {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]} + [{: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] - (if gap-locked? + (fn [gap-multiple? type val] + (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? - :select-all-gap select-all-gap + [:& gap-section {:is-col? is-col? + :wrap-type wrap-type + :gap-selected? gap-selected? :set-gap set-gap - :gap-value (:layout-gap values) - :toggle-gap-type toggle-gap-type - :gap-type gap-type}] + :gap-value (:layout-gap values)}] [:& padding-section {:values values 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 8403c0b5c..af4f796d2 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 @@ -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-> [] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index ff84041d0..f386b58a6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index 812e3c8d9..6e0a78ebf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 2d4e1f6dd..01b526220 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 9ed4ad8b9..016e4742d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 0f99ca979..862dba587 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/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 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 5579183e2..ae30372b4 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 @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 5b1a89426..c1803daa6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index 582f476d8..e133f7a22 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index e05bf68d8..bae854679 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 7c84cdeb5..9105e8ac8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/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 diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 9f177f8c4..ddc9b3743 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 252c88ffc..049f79aa8 100644 --- a/frontend/translations/es.po +++ b/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"