3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-04 03:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix some layout errors

Browse source
This commit is contained in:
Eva 2022-11-21 11:59:13 +01:00 • committed by Alonso Torres
parent 7c3f87d7b0
commit 32746a5960
7 changed files with 81 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -1610,6 +1610,7 @@
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
width: 100%; width: 100%;
max-width: 185px;
.direction, .direction,
.wrap-type, .wrap-type,
.align-items-style, .align-items-style,
@ -1652,7 +1653,7 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
border-right: 1px solid $color-gray-60; border-right: 1px solid $color-gray-60;
padding: 4px; padding: 2px;
&.reverse-row { &.reverse-row {
svg { svg {
transform: rotate(180deg); transform: rotate(180deg);
@ -1687,13 +1688,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 21px; height: 21px;
width: 21px; width: 17px;
svg { svg {
height: 0.7rem; height: 0.7rem;
width: 0.7rem; width: 0.7rem;
} }
} }
.wrap {
padding: 1px;
}
.gap-group { .gap-group {
display: flex; display: flex;
margin-top: 3px; margin-top: 3px;

64
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -6,11 +6,13 @@
(ns app.main.data.workspace.shape-layout (ns app.main.data.workspace.shape-layout
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.changes :as dwc] [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.selection :as dwse]
[app.main.data.workspace.shapes :as dws] [app.main.data.workspace.shapes :as dws]
[app.main.data.workspace.shapes-update-layout :as wsul] [app.main.data.workspace.shapes-update-layout :as wsul]
@ -53,9 +55,9 @@
(-> shape (-> shape
(merge shape initial-layout-data))))) (merge shape initial-layout-data)))))
(defn create-layout (defn create-layout-from-id
[ids type] [ids type]
(ptk/reify ::create-layout (ptk/reify ::create-layout-from-id
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [objects (wsh/lookup-page-objects state) (let [objects (wsh/lookup-page-objects state)
@ -81,15 +83,27 @@
(let [new-shape-id (uuid/next) (let [new-shape-id (uuid/next)
parent-id (:parent-id (first selected-shapes)) parent-id (:parent-id (first selected-shapes))
shapes-ids (:shapes (first selected-shapes)) shapes-ids (:shapes (first selected-shapes))
ordered-ids (into (d/ordered-set) shapes-ids)] ordered-ids (into (d/ordered-set) shapes-ids)
(rx/of (dwse/select-shapes ordered-ids) undo-id (uuid/next)]
(dws/create-artboard-from-selection new-shape-id parent-id) (rx/of
(create-layout [new-shape-id] type) (dwu/start-undo-transaction undo-id)
(dws/delete-shapes page-id selected))) (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)] (let [new-shape-id (uuid/next)
(rx/of (dws/create-artboard-from-selection new-shape-id) undo-id (uuid/next)]
(create-layout [new-shape-id] type)))))))) (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 (defn remove-layout
[ids] [ids]
@ -99,6 +113,29 @@
(rx/of (dwc/update-shapes ids #(apply dissoc % layout-keys)) (rx/of (dwc/update-shapes ids #(apply dissoc % layout-keys))
(wsul/update-layout-positions ids))))) (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 (defn toogle-layout-flex
[] []
(ptk/reify ::toogle-layout-flex (ptk/reify ::toogle-layout-flex
@ -109,14 +146,11 @@
selected (wsh/lookup-selected state) selected (wsh/lookup-selected state)
selected-shapes (map (d/getf objects) selected) selected-shapes (map (d/getf objects) selected)
single? (= (count selected-shapes) 1) single? (= (count selected-shapes) 1)
has-flex-layout? (and single? (= :flex (:layout (first selected-shapes)))) has-flex-layout? (and single? (ctl/layout? objects (:id (first selected-shapes))))]
is-frame? (and single? (= :frame (:type (first selected-shapes))))]
(if has-flex-layout? (if has-flex-layout?
(rx/of (remove-layout selected)) (rx/of (remove-layout selected))
(if is-frame? (rx/of (create-layout)))))))
(rx/of (create-layout [(first selected)] :flex))
(rx/of (create-layout-from-selection :flex))))))))
(defn update-layout (defn update-layout
[ids changes] [ids changes]

7
frontend/src/app/main/data/workspace/shapes.cljs
View file

@ -362,12 +362,13 @@
(assoc :frame-id frame-id :parent-id parent-id) (assoc :frame-id frame-id :parent-id parent-id)
(cond-> (not= frame-id uuid/zero) (cond-> (not= frame-id uuid/zero)
(assoc :fills [] :hide-in-viewer true)) (assoc :fills [] :hide-in-viewer true))
(cts/setup-rect-selrect))] (cts/setup-rect-selrect))
undo-id (uuid/next)]
(rx/of (rx/of
(dwu/start-undo-transaction) (dwu/start-undo-transaction undo-id)
(add-shape shape) (add-shape shape)
(move-shapes-into-frame (:id shape) selected) (move-shapes-into-frame (:id shape) selected)
(dwu/commit-undo-transaction))))))))) (dwu/commit-undo-transaction undo-id)))))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Shape Flags ;; Shape Flags

2
frontend/src/app/main/ui/workspace/context_menu.cljs
View file

@ -376,7 +376,7 @@
is-group? (and single? has-group?) is-group? (and single? has-group?)
ids (->> shapes (map :id)) ids (->> shapes (map :id))
add-flex #(st/emit! (if is-frame? 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))) (dwsl/create-layout-from-selection :flex)))
remove-flex #(st/emit! (dwsl/remove-layout ids))] remove-flex #(st/emit! (dwsl/remove-layout ids))]
(cond (cond

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -267,8 +267,10 @@
layout-type (:layout values) layout-type (:layout values)
on-add-layout on-add-layout
(fn [type] (fn [_]
(st/emit! (dwsl/create-layout ids type))) (st/emit! (dwsl/create-layout))
(reset! open? true))
on-remove-layout on-remove-layout
(fn [_] (fn [_]
@ -376,7 +378,7 @@
:active (= :grid layout-type))} "Grid"]] :active (= :grid layout-type))} "Grid"]]
[:button.remove-layout {:on-click on-remove-layout} i/minus]] [: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) (when (:layout values)
(if (= :flex layout-type) (if (= :flex layout-type)

24
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.group (ns app.main.ui.workspace.sidebar.options.shapes.group
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.main.features :as features]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-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.constraints :refer [constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-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.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.layout-item :refer [layout-item-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@ -27,15 +29,16 @@
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
shape-with-children (unchecked-get props "shape-with-children") shape-with-children (unchecked-get props "shape-with-children")
shared-libs (unchecked-get props "shared-libs") shared-libs (unchecked-get props "shared-libs")
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
file-id (unchecked-get props "file-id") file-id (unchecked-get props "file-id")
layout-active? (features/use-feature :auto-layout)
ids [(:id shape)] 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)) ids [(:id shape)]
is-layout-child? (mf/deref is-layout-child-ref) 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 type :group
[measure-ids measure-values] (get-attrs [shape] objects :measure) [measure-ids measure-values] (get-attrs [shape] objects :measure)
@ -53,7 +56,8 @@
[:div.options [:div.options
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}] [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
[:& component-menu {:ids comp-ids :values comp-values :shape-name (:name 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? (when is-layout-child?
[:& layout-item-menu [:& layout-item-menu
{:type type {:type type

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -288,7 +288,6 @@
stroke-ids stroke-values stroke-ids stroke-values
text-ids text-values text-ids text-values
exports-ids exports-values exports-ids exports-values
layout-container-ids layout-container-values
layout-item-ids layout-item-values] layout-item-ids layout-item-values]
(mf/use-memo (mf/use-memo
(mf/deps objects-no-measures) (mf/deps objects-no-measures)
@ -312,8 +311,7 @@
(when-not (empty? measure-ids) (when-not (empty? measure-ids)
[:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}]) [:& 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 [] :values []}]
[:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values}])
(when is-layout-child? (when is-layout-child?
[:& layout-item-menu [:& layout-item-menu