From 32746a59606f12f7ca4bc2e58e5a23f0c34086d0 Mon Sep 17 00:00:00 2001 From: Eva Date: Mon, 21 Nov 2022 11:59:13 +0100 Subject: [PATCH] :bug: Fix some layout errors --- .../partials/sidebar-element-options.scss | 9 ++- .../app/main/data/workspace/shape_layout.cljs | 64 ++++++++++++++----- .../src/app/main/data/workspace/shapes.cljs | 7 +- .../app/main/ui/workspace/context_menu.cljs | 2 +- .../options/menus/layout_container.cljs | 8 ++- .../sidebar/options/shapes/group.cljs | 24 ++++--- .../sidebar/options/shapes/multiple.cljs | 4 +- 7 files changed, 81 insertions(+), 37 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 7e956838d..1f1c28f30 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -1610,6 +1610,7 @@ .btn-wrapper { display: flex; width: 100%; + max-width: 185px; .direction, .wrap-type, .align-items-style, @@ -1652,7 +1653,7 @@ border: none; cursor: pointer; border-right: 1px solid $color-gray-60; - padding: 4px; + padding: 2px; &.reverse-row { svg { transform: rotate(180deg); @@ -1687,13 +1688,17 @@ align-items: center; justify-content: center; height: 21px; - width: 21px; + width: 17px; svg { height: 0.7rem; width: 0.7rem; } } + .wrap { + padding: 1px; + } + .gap-group { display: flex; margin-top: 3px; diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index 3e7d2a9ac..d71807887 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -6,11 +6,13 @@ (ns app.main.data.workspace.shape-layout (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.pages.helpers :as cph] [app.common.types.shape.layout :as ctl] [app.common.uuid :as uuid] [app.main.data.workspace.changes :as dwc] + [app.main.data.workspace.colors :as cl] [app.main.data.workspace.selection :as dwse] [app.main.data.workspace.shapes :as dws] [app.main.data.workspace.shapes-update-layout :as wsul] @@ -53,9 +55,9 @@ (-> shape (merge shape initial-layout-data))))) -(defn create-layout +(defn create-layout-from-id [ids type] - (ptk/reify ::create-layout + (ptk/reify ::create-layout-from-id ptk/WatchEvent (watch [_ state _] (let [objects (wsh/lookup-page-objects state) @@ -81,15 +83,27 @@ (let [new-shape-id (uuid/next) parent-id (:parent-id (first selected-shapes)) shapes-ids (:shapes (first selected-shapes)) - ordered-ids (into (d/ordered-set) shapes-ids)] - (rx/of (dwse/select-shapes ordered-ids) - (dws/create-artboard-from-selection new-shape-id parent-id) - (create-layout [new-shape-id] type) - (dws/delete-shapes page-id selected))) + ordered-ids (into (d/ordered-set) shapes-ids) + undo-id (uuid/next)] + (rx/of + (dwu/start-undo-transaction undo-id) + (dwse/select-shapes ordered-ids) + (dws/create-artboard-from-selection new-shape-id parent-id) + (cl/remove-all-fills [new-shape-id] {:color clr/black + :opacity 1}) + (create-layout-from-id [new-shape-id] type) + (dws/delete-shapes page-id selected) + (dwu/commit-undo-transaction undo-id))) - (let [new-shape-id (uuid/next)] - (rx/of (dws/create-artboard-from-selection new-shape-id) - (create-layout [new-shape-id] type)))))))) + (let [new-shape-id (uuid/next) + undo-id (uuid/next)] + (rx/of + (dwu/start-undo-transaction undo-id) + (dws/create-artboard-from-selection new-shape-id) + (cl/remove-all-fills [new-shape-id] {:color clr/black + :opacity 1}) + (create-layout-from-id [new-shape-id] type) + (dwu/commit-undo-transaction undo-id)))))))) (defn remove-layout [ids] @@ -99,6 +113,29 @@ (rx/of (dwc/update-shapes ids #(apply dissoc % layout-keys)) (wsul/update-layout-positions ids))))) +(defn create-layout + [] + (ptk/reify ::create-layout + ptk/WatchEvent + (watch [_ state _] + (let [page-id (:current-page-id state) + objects (wsh/lookup-page-objects state page-id) + selected (wsh/lookup-selected state) + selected-shapes (map (d/getf objects) selected) + single? (= (count selected-shapes) 1) + is-frame? (= :frame (:type (first selected-shapes))) + undo-id (uuid/next)] + + (if (and single? is-frame?) + (rx/of + (dwu/start-undo-transaction undo-id) + (create-layout-from-id [(first selected)] :flex) + (dwu/commit-undo-transaction undo-id)) + (rx/of + (dwu/start-undo-transaction undo-id) + (create-layout-from-selection :flex) + (dwu/commit-undo-transaction undo-id))))))) + (defn toogle-layout-flex [] (ptk/reify ::toogle-layout-flex @@ -109,14 +146,11 @@ selected (wsh/lookup-selected state) selected-shapes (map (d/getf objects) selected) single? (= (count selected-shapes) 1) - has-flex-layout? (and single? (= :flex (:layout (first selected-shapes)))) - is-frame? (and single? (= :frame (:type (first selected-shapes))))] + has-flex-layout? (and single? (ctl/layout? objects (:id (first selected-shapes))))] (if has-flex-layout? (rx/of (remove-layout selected)) - (if is-frame? - (rx/of (create-layout [(first selected)] :flex)) - (rx/of (create-layout-from-selection :flex)))))))) + (rx/of (create-layout))))))) (defn update-layout [ids changes] diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index 49bfe4b1c..4143b3152 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/frontend/src/app/main/data/workspace/shapes.cljs @@ -362,12 +362,13 @@ (assoc :frame-id frame-id :parent-id parent-id) (cond-> (not= frame-id uuid/zero) (assoc :fills [] :hide-in-viewer true)) - (cts/setup-rect-selrect))] + (cts/setup-rect-selrect)) + undo-id (uuid/next)] (rx/of - (dwu/start-undo-transaction) + (dwu/start-undo-transaction undo-id) (add-shape shape) (move-shapes-into-frame (:id shape) selected) - (dwu/commit-undo-transaction))))))))) + (dwu/commit-undo-transaction undo-id))))))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Shape Flags diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 1fab9587a..00d120793 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -376,7 +376,7 @@ is-group? (and single? has-group?) ids (->> shapes (map :id)) add-flex #(st/emit! (if is-frame? - (dwsl/create-layout ids :flex) + (dwsl/create-layout-from-id ids :flex) (dwsl/create-layout-from-selection :flex))) remove-flex #(st/emit! (dwsl/remove-layout ids))] (cond 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 68452f9df..e8111f373 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 @@ -267,8 +267,10 @@ layout-type (:layout values) on-add-layout - (fn [type] - (st/emit! (dwsl/create-layout ids type))) + (fn [_] + (st/emit! (dwsl/create-layout)) + (reset! open? true)) + on-remove-layout (fn [_] @@ -376,7 +378,7 @@ :active (= :grid layout-type))} "Grid"]] [:button.remove-layout {:on-click on-remove-layout} i/minus]] - [:button.add-page {:on-click #(on-add-layout :flex)} i/close])]] + [:button.add-page {:on-click on-add-layout} i/close])]] (when (:layout values) (if (= :flex layout-type) 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 6f921a4b0..1876d74d3 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 @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.group (:require [app.common.data :as d] + [app.main.features :as features] [app.main.refs :as refs] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] @@ -14,6 +15,7 @@ [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [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-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] @@ -27,15 +29,16 @@ {::mf/wrap [mf/memo] ::mf/wrap-props false} [props] - (let [shape (unchecked-get props "shape") - shape-with-children (unchecked-get props "shape-with-children") - shared-libs (unchecked-get props "shared-libs") - objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) - file-id (unchecked-get props "file-id") - - ids [(:id shape)] - is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) - is-layout-child? (mf/deref is-layout-child-ref) + (let [shape (unchecked-get props "shape") + shape-with-children (unchecked-get props "shape-with-children") + shared-libs (unchecked-get props "shared-libs") + objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) + file-id (unchecked-get props "file-id") + layout-active? (features/use-feature :auto-layout) + layout-container-values (select-keys shape layout-container-flex-attrs) + ids [(:id shape)] + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref) type :group [measure-ids measure-values] (get-attrs [shape] objects :measure) @@ -53,7 +56,8 @@ [: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)}] - + (when layout-active? + [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]) (when is-layout-child? [:& layout-item-menu {:type type 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 06425fd9e..fd7281e32 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 @@ -288,7 +288,6 @@ stroke-ids stroke-values text-ids text-values exports-ids exports-values - layout-container-ids layout-container-values layout-item-ids layout-item-values] (mf/use-memo (mf/deps objects-no-measures) @@ -312,8 +311,7 @@ (when-not (empty? measure-ids) [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}]) - (when (:layout layout-container-values) - [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values}]) + [:& layout-container-menu {:type type :ids [] :values []}] (when is-layout-child? [:& layout-item-menu