Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

✨ Adds layout items options

Browse source
This commit is contained in:
alonso.torres 2022-09-06 13:19:19 +02:00
parent 3c424786a7
commit 5050c35257
3 changed files with 248 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
common/src/app/common/pages/common.cljc
View file

@ -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,10 +130,29 @@
:stroke-cap-start
:stroke-cap-end
:exports}
:exports
:group #{:proportion-lock
:width :height
: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
:x :y
:rotation
:selrect
@ -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}})

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

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

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

@ -34,116 +34,134 @@
;; - text: read it from all the content nodes, and then merging it.
(def type->read-mode
{:frame
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :children
:blur :children
:stroke :shape
:text :children
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :children
:blur :children
:stroke :shape
:text :children
:exports :shape
:layout-container :shape
:layout-item :shape}
:group
{:measure :shape
:layer :shape
:constraint :shape
:fill :children
:shadow :shape
:blur :shape
:stroke :children
:text :children
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :children
:shadow :shape
:blur :shape
:stroke :children
:text :children
:exports :shape
:layout-container :ignore
:layout-item :shape}
:path
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape
:layout-container :ignore
:layout-item :shape}
:text
{:measure :shape
:layer :shape
:constraint :shape
:fill :text
:shadow :shape
:blur :shape
:stroke :shape
:text :text
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :text
:shadow :shape
:blur :shape
:stroke :shape
:text :text
:exports :shape
:layout-container :ignore
:layout-item :shape}
:image
{:measure :shape
:layer :shape
:constraint :shape
:fill :ignore
:shadow :shape
:blur :shape
:stroke :ignore
:text :ignore
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :ignore
:shadow :shape
:blur :shape
:stroke :ignore
:text :ignore
:exports :shape
:layout-container :ignore
:layout-item :shape}
:rect
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape
:layout-container :ignore
:layout-item :shape}
:circle
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape
:layout-container :ignore
:layout-item :shape}
:svg-raw
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape}
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape
:layout-container :ignore
:layout-item :shape}
:bool
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape}})
{:measure :shape
:layer :shape
:constraint :shape
:fill :shape
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore
:exports :shape
:layout-container :ignore
:layout-item :shape}})
(def group->attrs
{:measure measure-attrs
:layer layer-attrs
:constraint constraint-attrs
:fill fill-attrs
:shadow shadow-attrs
:blur blur-attrs
:stroke stroke-attrs
:text ot/attrs
:exports exports-attrs
:layout layout-container-flex-attrs
:layout-item layout-item-attrs})
{:measure measure-attrs
:layer layer-attrs
:constraint constraint-attrs
:fill fill-attrs
:shadow shadow-attrs
:blur blur-attrs
:stroke stroke-attrs
:text ot/attrs
:exports exports-attrs
:layout-container layout-container-flex-attrs
:layout-item layout-item-attrs})
(def shadow-keys [:style :color :offset-x :offset-y :blur :spread])
@ -254,20 +272,20 @@
is-layout-child? (mf/deref is-layout-child-ref)
has-text? (contains? all-types :text)
[measure-ids measure-values] (get-attrs shapes objects :measure)
[layer-ids layer-values
constraint-ids constraint-values
fill-ids fill-values
shadow-ids shadow-values
blur-ids blur-values
stroke-ids stroke-values
text-ids text-values
exports-ids exports-values
layout-ids layout-container-values
layout-item-ids layout-item-values]
[layer-ids layer-values
constraint-ids constraint-values
fill-ids fill-values
shadow-ids shadow-values
blur-ids blur-values
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)
(fn []
@ -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,8 +309,8 @@
[:& 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
{:type type