Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-11 22:41:23 -05:00
Code Issues 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
Show stats 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 {
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;

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

@ -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]

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

@ -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

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

@ -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

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

@ -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)

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
(: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

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

@ -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