github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 19:28:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Convert layout-item-menu and sub-components to * suffix, update all call sites

Browse Source
This commit is contained in:
Andrey Antukh 2026-04-02 21:39:54 +00:00
parent b2f08f52e7
commit 70155c2e79
10 changed files with 128 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View File

@ -423,9 +423,8 @@
:on-click on-type-change'}
deprecated-icon/margin]]))
(mf/defc element-behaviour-horizontal
{::mf/props :obj
::mf/private true}
(mf/defc element-behaviour-horizontal*
{::mf/private true}
[{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
[:div {:class (stl/css-case
:horizontal-behaviour true
@ -457,9 +456,8 @@
:title "Fit content (Horizontal)"
:id "behaviour-h-auto"}])]])
(mf/defc element-behaviour-vertical
{::mf/props :obj
::mf/private true}
(mf/defc element-behaviour-vertical*
{::mf/private true}
[{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
[:div {:class (stl/css-case
:vertical-behaviour true
@ -493,8 +491,7 @@
:title "Fit content (Vertical)"
:id "behaviour-v-auto"}])]])
(mf/defc align-self-row
{::mf/props :obj}
(mf/defc align-self-row*
[{:keys [^boolean is-col value on-change]}]
[:& radio-buttons {:selected (d/name value)
:decode-fn keyword
@ -723,16 +720,15 @@
:value (get values :layout-item-max-h)
:nillable true}]])])]))
(mf/defc layout-item-menu
{::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent? :is-grid-layout? :is-flex-layout? :applied-tokens}
::mf/props :obj}
(mf/defc layout-item-menu*
{::mf/wrap [mf/memo]}
[{:keys [ids values
^boolean is-layout-child?
^boolean is-layout-container?
^boolean is-grid-parent?
^boolean is-flex-parent?
^boolean is-flex-layout?
^boolean is-grid-layout?
^boolean is-layout-child
^boolean is-layout-container
^boolean is-grid-parent
^boolean is-flex-parent
^boolean is-flex-layout
^boolean is-grid-layout
applied-tokens]}]
(let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
@ -745,16 +741,16 @@
is-col? (every? ctl/col? selection-parents)
^boolean
is-layout-child? (and is-layout-child? (not is-absolute?))
is-layout-child (and is-layout-child (not is-absolute?))
state* (mf/use-state true)
open? (deref state*)
toggle-content (mf/use-fn #(swap! state* not))
has-content? (or is-layout-child?
is-flex-parent?
is-grid-parent?
is-layout-container?)
has-content? (or is-layout-child
is-flex-parent
is-grid-parent
is-layout-container)
;; Align self
align-self (:layout-item-align-self values)
@ -763,24 +759,24 @@
title
(cond
(and is-layout-container?
is-flex-layout?
(not is-layout-child?))
(and is-layout-container
is-flex-layout
(not is-layout-child))
"Flex board"
(and is-layout-container?
is-grid-layout?
(not is-layout-child?))
(and is-layout-container
is-grid-layout
(not is-layout-child))
"Grid board"
(and is-layout-container?
(not is-layout-child?))
(and is-layout-container
(not is-layout-child))
"Layout board"
is-flex-parent?
is-flex-parent
"Flex element"
is-grid-parent?
is-grid-parent
"Grid element"
:else
@ -855,7 +851,7 @@
:title-spacing-empty (not has-content?))}]]
(when open?
[:div {:class (stl/css :flex-element-menu)}
(when (or is-layout-child? is-absolute?)
(when (or is-layout-child is-absolute?)
[:div {:class (stl/css :position-row)}
[:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
@ -883,26 +879,26 @@
[:div {:class (stl/css :behavior-row)}
[:div {:class (stl/css-case
:behaviour-menu true
:wrap (and ^boolean is-layout-child?
^boolean is-layout-container?))}
[:& element-behaviour-horizontal
{:is-auto is-layout-container?
:has-fill is-layout-child?
:wrap (and ^boolean is-layout-child
^boolean is-layout-container))}
[:> element-behaviour-horizontal*
{:is-auto is-layout-container
:has-fill is-layout-child
:value (:layout-item-h-sizing values)
:on-change on-behaviour-h-change}]
[:& element-behaviour-vertical
{:is-auto is-layout-container?
:has-fill is-layout-child?
[:> element-behaviour-vertical*
{:is-auto is-layout-container
:has-fill is-layout-child
:value (:layout-item-v-sizing values)
:on-change on-behaviour-v-change}]]]
(when (and is-layout-child? is-flex-parent?)
(when (and is-layout-child is-flex-parent)
[:div {:class (stl/css :align-row)}
[:& align-self-row {:is-col is-col?
:value align-self
:on-change on-align-self-change}]])
[:> align-self-row* {:is-col is-col?
:value align-self
:on-change on-align-self-change}]])
(when is-layout-child?
(when is-layout-child
[:> margin-section* {:value (:layout-item-margin values)
:type (:layout-item-margin-type values)
:on-type-change on-margin-type-change

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View File

@ -16,7 +16,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -107,15 +107,14 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
[:> layout-item-menu* {:ids ids
:type type
:values layout-item-values
:is-layout-child true
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids ids

20
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View File

@ -16,7 +16,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -106,15 +106,15 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-layout-container? false
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
[:> layout-item-menu* {:ids ids
:type type
:values layout-item-values
:is-layout-child true
:is-layout-container false
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids ids

25
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View File

@ -20,7 +20,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -126,18 +126,17 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when (or is-layout-child? is-layout-container?)
[:& layout-item-menu
{:ids ids
:type shape-type
:values layout-item-values
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:is-flex-layout? is-flex-layout?
:is-grid-layout? is-grid-layout?
:is-layout-child? is-layout-child?
:applied-tokens applied-tokens
:is-layout-container? is-layout-container?
:shape shape}])
[:> layout-item-menu* {:ids ids
:type shape-type
:values layout-item-values
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:is-flex-layout is-flex-layout?
:is-grid-layout is-grid-layout?
:is-layout-child is-layout-child?
:applied-tokens applied-tokens
:is-layout-container is-layout-container?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids ids

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View File

@ -19,7 +19,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.shadow :refer [shadow-menu*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu*]]
@ -132,15 +132,14 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu
{:type type
:ids layout-item-ids
:is-layout-child? true
:is-layout-container? false
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens applied-tokens
:values layout-item-values}])
[:> layout-item-menu* {:type type
:ids layout-item-ids
:is-layout-child true
:is-layout-container false
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens applied-tokens
:values layout-item-values}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids constraint-ids :values constraint-values}])

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View File

@ -28,7 +28,7 @@
[app.main.ui.workspace.sidebar.options.menus.fill :as fill]
[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.layout-item :refer [layout-item-attrs layout-item-menu*]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measure-attrs measures-menu*]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -464,15 +464,14 @@
:multiple true}]
(when (or is-layout-child? has-flex-layout-container?)
[:& layout-item-menu
{:type type
:ids layout-item-ids
:is-layout-child? all-layout-child?
:is-layout-container? all-flex-layout-container?
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens layout-item-tokens
:values layout-item-values}])
[:> layout-item-menu* {:type type
:ids layout-item-ids
:is-layout-child all-layout-child?
:is-layout-container all-flex-layout-container?
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens layout-item-tokens
:values layout-item-values}])
(when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
[:> constraints-menu* {:ids constraint-ids :values constraint-values}])

20
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View File

@ -16,7 +16,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -106,15 +106,15 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-layout-container? false
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
[:> layout-item-menu* {:ids ids
:type type
:values layout-item-values
:is-layout-child true
:is-layout-container false
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids ids

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View File

@ -16,7 +16,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -106,15 +106,14 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when ^boolean is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-flex-parent? is-flex-parent?
:applied-tokens applied-tokens
:is-grid-parent? is-grid-parent?
:shape shape}])
[:> layout-item-menu* {:ids ids
:type type
:values layout-item-values
:is-layout-child true
:is-flex-parent is-flex-parent?
:applied-tokens applied-tokens
:is-grid-parent is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids ids

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View File

@ -17,7 +17,7 @@
[app.main.ui.workspace.sidebar.options.menus.fill :as fill]
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -173,15 +173,14 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
[:> layout-item-menu* {:ids ids
:type type
:values layout-item-values
:is-layout-child true
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu* {:ids ids

19
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View File

@ -22,7 +22,7 @@
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[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.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*]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]]
@ -161,15 +161,14 @@
:cell (ctl/get-cell-by-shape-id (first parents) (first ids))}])
(when is-layout-child?
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-flex-parent? is-flex-parent?
:is-grid-parent? is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
[:> layout-item-menu* {:ids ids
:type type
:values layout-item-values
:is-layout-child true
:is-flex-parent is-flex-parent?
:is-grid-parent is-grid-parent?
:applied-tokens applied-tokens
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:> constraints-menu*