Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 18:51:29 -05:00
Code Issues Activity

🐛 Fix some bugs reported on flex feedback

Browse source
This commit is contained in:
Eva 2023-01-03 16:34:50 +01:00
parent 644854a651
commit 598959cd3f
19 changed files with 192 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/context-menu.scss
View file

@ -56,6 +56,7 @@
&:hover {
color: $color-black;
background-color: $color-primary-lighter;
text-decoration: none;
}
&.submenu {

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

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

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

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

6
frontend/src/app/main/data/workspace/shortcuts.cljs
View file

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

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

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

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

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

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

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

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

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

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

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

2
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View file

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

3
frontend/translations/en.po
View file

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

3
frontend/translations/es.po
View file

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