From 598959cd3ff78f064d5bfa06bd9637903c5ab7e4 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 3 Jan 2023 16:34:50 +0100 Subject: [PATCH 1/2] :bug: Fix some bugs reported on flex feedback --- .../styles/main/partials/context-menu.scss | 1 + .../partials/sidebar-element-options.scss | 123 +++++++++++------ .../app/main/data/workspace/shape_layout.cljs | 11 +- .../app/main/data/workspace/shortcuts.cljs | 6 +- .../app/main/ui/workspace/context_menu.cljs | 6 +- .../options/menus/layout_container.cljs | 125 +++++++----------- .../sidebar/options/menus/layout_item.cljs | 24 ++-- .../sidebar/options/shapes/bool.cljs | 4 + .../sidebar/options/shapes/circle.cljs | 4 + .../sidebar/options/shapes/frame.cljs | 2 +- .../sidebar/options/shapes/group.cljs | 2 +- .../sidebar/options/shapes/image.cljs | 4 + .../sidebar/options/shapes/multiple.cljs | 2 +- .../sidebar/options/shapes/path.cljs | 4 + .../sidebar/options/shapes/rect.cljs | 4 +- .../sidebar/options/shapes/svg_raw.cljs | 4 + .../sidebar/options/shapes/text.cljs | 3 + frontend/translations/en.po | 3 + frontend/translations/es.po | 3 + 19 files changed, 192 insertions(+), 143 deletions(-) diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss index 828e0bd82d..616cdfa899 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 3174aa77e9..0b6c026dfe 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 b0eb038125..ab1a180706 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 1a77a546d2..d7e81b0c41 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 550b68556a..d80eba18a8 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 bb1d404723..cb216fd4de 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 8403c0b5cb..af4f796d29 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 ff84041d0a..f386b58a69 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 812e3c8d98..6e0a78ebf6 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 2d4e1f6dd7..01b5262201 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 9ed4ad8b90..016e4742d0 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 0f99ca9790..862dba5877 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 5579183e2e..ae30372b43 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 5b1a894264..c1803daa6f 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 582f476d84..e133f7a225 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 e05bf68d81..bae8546791 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 7c84cdeb57..9105e8ac85 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 9f177f8c48..ddc9b37435 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 252c88ffc6..049f79aa86 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" From 985d5cc20c586dd7835622d6f9b912287df307e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Fri, 16 Dec 2022 16:05:26 +0100 Subject: [PATCH 2/2] :bug: Fix group/ungroup shapes inside a component --- CHANGES.md | 1 + common/src/app/common/types/component.cljc | 19 +++++++++ .../src/app/main/data/workspace/groups.cljs | 39 +++++++++---------- .../data/workspace/libraries_helpers.cljs | 2 +- 4 files changed, 39 insertions(+), 22 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7574474342..20006ae442 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -38,6 +38,7 @@ - Fix incorrect color in properties of multiple bool shapes [Taiga #4355](https://tree.taiga.io/project/penpot/issue/4355) - Fix pressing the enter key gives you an internal error [Github 2675](https://github.com/penpot/penpot/issues/2675) [Github 2577](https://github.com/penpot/penpot/issues/2577) - Fix confirm group name with enter doesn't work in assets modal [Taiga #4506](https://tree.taiga.io/project/penpot/issue/4506) +- Fix group/ungroup shapes inside a component [Taiga #4052](https://tree.taiga.io/project/penpot/issue/4052) ### :arrow_up: Deps updates diff --git a/common/src/app/common/types/component.cljc b/common/src/app/common/types/component.cljc index d84befc448..7177a52f95 100644 --- a/common/src/app/common/types/component.cljc +++ b/common/src/app/common/types/component.cljc @@ -49,3 +49,22 @@ [shape] (some? (:shape-ref shape))) +(defn in-component-instance-not-root? + "Check if the shape is inside a component instance and + is not the root shape." + [shape] + (and (some? (:shape-ref shape)) + (nil? (:component-id shape)))) + +(defn detach-shape + "Remove the links and leave it as a plain shape, detached from any component." + [shape] + (dissoc shape + :component-id + :component-file + :component-root? + :remote-synced? + :shape-ref + :touched)) + + diff --git a/frontend/src/app/main/data/workspace/groups.cljs b/frontend/src/app/main/data/workspace/groups.cljs index e009b6f26e..aec9cc0db2 100644 --- a/frontend/src/app/main/data/workspace/groups.cljs +++ b/frontend/src/app/main/data/workspace/groups.cljs @@ -10,8 +10,9 @@ [app.common.geom.shapes :as gsh] [app.common.pages.changes-builder :as pcb] [app.common.pages.helpers :as cph] + [app.common.types.component :as ctk] [app.common.types.shape :as cts] - [app.common.types.shape-tree :as ctt] + [app.common.types.shape-tree :as ctst] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.selection :as dws] [app.main.data.workspace.state-helpers :as wsh] @@ -71,8 +72,8 @@ (= (count shapes) 1) (= (:type (first shapes)) :group)) (:name (first shapes)) - (-> (ctt/retrieve-used-names objects) - (ctt/generate-unique-name base-name))) + (-> (ctst/retrieve-used-names objects) + (ctst/generate-unique-name base-name))) selrect (gsh/selection-rect shapes) group (-> (cts/make-minimal-group frame-id selrect gname) @@ -82,6 +83,10 @@ :frame-id frame-id :index (::index (first shapes)))) + ;; Shapes that are in a component, but are not root, must be detached, + ;; because they will be now children of a non instance group. + shapes-to-detach (filter ctk/in-component-instance-not-root? shapes) + ;; Look at the `get-empty-groups-after-group-creation` ;; docstring to understand the real purpose of this code ids-to-delete (get-empty-groups-after-group-creation objects parent-id shapes) @@ -90,6 +95,7 @@ (pcb/with-objects objects) (pcb/add-object group {:index (::index (first shapes))}) (pcb/change-parent (:id group) shapes) + (pcb/update-shapes (map :id shapes-to-detach) ctk/detach-shape) (pcb/remove-objects ids-to-delete))] [group changes])) @@ -106,25 +112,16 @@ (filter #(#{(:id group)} (second %))) (ffirst)) - ids-to-detach (when (:component-id group) - (cph/get-children-ids objects (:id group))) + ;; Shapes that are in a component (including root) must be detached, + ;; because cannot be easyly synchronized back to the main component. + shapes-to-detach (filter ctk/in-component-instance? + (cph/get-children-with-self objects (:id group)))] - detach-fn (fn [attrs] - (dissoc attrs - :component-id - :component-file - :component-root? - :remote-synced? - :shape-ref - :touched))] - - (cond-> (-> (pcb/empty-changes it page-id) - (pcb/with-objects objects) - (pcb/change-parent parent-id children index-in-parent) - (pcb/remove-objects [(:id group)])) - - (some? ids-to-detach) - (pcb/update-shapes ids-to-detach detach-fn)))) + (-> (pcb/empty-changes it page-id) + (pcb/with-objects objects) + (pcb/change-parent parent-id children index-in-parent) + (pcb/remove-objects [(:id group)]) + (pcb/update-shapes (map :id shapes-to-detach) ctk/detach-shape)))) (defn remove-frame-changes [it page-id frame objects] diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index 5c803f5647..be91726d2d 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -945,7 +945,7 @@ changes' (reduce add-undo-change changes' - (map :id children))] + children)] (if (and (cph/touched-group? parent :shapes-group) omit-touched?) changes