mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 07:29:08 -05:00
✨ Adds layout items options
This commit is contained in:
parent
3c424786a7
commit
5050c35257
3 changed files with 248 additions and 119 deletions
|
@ -71,7 +71,26 @@
|
|||
:constraints-h :constraints-group
|
||||
:constraints-v :constraints-group
|
||||
:fixed-scroll :constraints-group
|
||||
:exports :exports-group})
|
||||
:exports :exports-group
|
||||
|
||||
:layout :layout-container
|
||||
:layout-dir :layout-container
|
||||
:layout-gap :layout-container
|
||||
:layout-type :layout-container
|
||||
:layout-wrap-type :layout-container
|
||||
:layout-padding-type :layout-container
|
||||
:layout-padding :layout-container
|
||||
:layout-h-orientation :layout-container
|
||||
:layout-v-orientation :layout-container
|
||||
|
||||
:layout-margin :layout-item
|
||||
:layout-margin-type :layout-item
|
||||
:layout-h-behavior :layout-item
|
||||
:layout-v-behavior :layout-item
|
||||
:layout-max-h :layout-item
|
||||
:layout-min-h :layout-item
|
||||
:layout-max-w :layout-item
|
||||
:layout-min-w :layout-item})
|
||||
|
||||
;; Attributes that may directly be edited by the user with forms
|
||||
(def editable-attrs
|
||||
|
@ -111,7 +130,26 @@
|
|||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout
|
||||
:layout-dir
|
||||
:layout-gap
|
||||
:layout-type
|
||||
:layout-wrap-type
|
||||
:layout-padding-type
|
||||
:layout-padding
|
||||
:layout-h-orientation
|
||||
:layout-v-orientation
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:group #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -135,7 +173,16 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:rect #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -180,7 +227,16 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:circle #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -223,7 +279,16 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:path #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -266,7 +331,16 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:text #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -332,7 +406,16 @@
|
|||
|
||||
:grow-type
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:image #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -358,7 +441,16 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:svg-raw #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -403,7 +495,16 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:bool #{:proportion-lock
|
||||
:width :height
|
||||
|
@ -446,5 +547,14 @@
|
|||
|
||||
:blur
|
||||
|
||||
:exports}})
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}})
|
||||
|
||||
|
|
|
@ -136,7 +136,8 @@
|
|||
|
||||
(mf/defc layout-item-menu
|
||||
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
|
||||
[{:keys [ids _type values is-layout-child? is-layout-container?] :as props}]
|
||||
[{:keys [ids values is-layout-child? is-layout-container?] :as props}]
|
||||
|
||||
(let [open? (mf/use-state false)
|
||||
toggle-open (fn [] (swap! open? not))
|
||||
|
||||
|
|
|
@ -42,7 +42,9 @@
|
|||
:blur :children
|
||||
:stroke :shape
|
||||
:text :children
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :shape
|
||||
:layout-item :shape}
|
||||
|
||||
:group
|
||||
{:measure :shape
|
||||
|
@ -53,7 +55,9 @@
|
|||
:blur :shape
|
||||
:stroke :children
|
||||
:text :children
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:path
|
||||
{:measure :shape
|
||||
|
@ -64,7 +68,9 @@
|
|||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:text
|
||||
{:measure :shape
|
||||
|
@ -75,7 +81,9 @@
|
|||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :text
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:image
|
||||
{:measure :shape
|
||||
|
@ -86,7 +94,9 @@
|
|||
:blur :shape
|
||||
:stroke :ignore
|
||||
:text :ignore
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:rect
|
||||
{:measure :shape
|
||||
|
@ -97,7 +107,9 @@
|
|||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:circle
|
||||
{:measure :shape
|
||||
|
@ -108,7 +120,9 @@
|
|||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:svg-raw
|
||||
{:measure :shape
|
||||
|
@ -119,7 +133,9 @@
|
|||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore
|
||||
:exports :shape}
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}
|
||||
|
||||
:bool
|
||||
{:measure :shape
|
||||
|
@ -130,7 +146,9 @@
|
|||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore
|
||||
:exports :shape}})
|
||||
:exports :shape
|
||||
:layout-container :ignore
|
||||
:layout-item :shape}})
|
||||
|
||||
(def group->attrs
|
||||
{:measure measure-attrs
|
||||
|
@ -142,7 +160,7 @@
|
|||
:stroke stroke-attrs
|
||||
:text ot/attrs
|
||||
:exports exports-attrs
|
||||
:layout layout-container-flex-attrs
|
||||
:layout-container layout-container-flex-attrs
|
||||
:layout-item layout-item-attrs})
|
||||
|
||||
(def shadow-keys [:style :color :offset-x :offset-y :blur :spread])
|
||||
|
@ -266,7 +284,7 @@
|
|||
stroke-ids stroke-values
|
||||
text-ids text-values
|
||||
exports-ids exports-values
|
||||
layout-ids layout-container-values
|
||||
layout-container-ids layout-container-values
|
||||
layout-item-ids layout-item-values]
|
||||
(mf/use-memo
|
||||
(mf/deps objects-no-measures)
|
||||
|
@ -282,7 +300,7 @@
|
|||
(get-attrs shapes objects-no-measures :stroke)
|
||||
(get-attrs shapes objects-no-measures :text)
|
||||
(get-attrs shapes objects-no-measures :exports)
|
||||
(get-attrs shapes objects-no-measures :layout)
|
||||
(get-attrs shapes objects-no-measures :layout-container)
|
||||
(get-attrs shapes objects-no-measures :layout-item)
|
||||
])))]
|
||||
|
||||
|
@ -291,7 +309,7 @@
|
|||
[:& 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-ids :values layout-container-values}])
|
||||
[:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values}])
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
|
|
Loading…
Add table
Reference in a new issue