Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 14:12:36 -05:00
Code Issues Activity

Add spacing/row options

Browse source
This commit is contained in:
Florian Schroedl 2024-05-29 09:37:24 +02:00
parent 1ad998de23
commit c2c0fbf40a
1 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -509,7 +509,7 @@
(mf/defc gap-section (mf/defc gap-section
{::mf/props :obj} {::mf/props :obj}
[{:keys [is-column wrap-type on-change value options] [{:keys [is-column wrap-type on-change value spacing-column-options spacing-row-options]
:or {wrap-type :none} :or {wrap-type :none}
:as props}] :as props}]
(let [nowrap? (= :nowrap wrap-type) (let [nowrap? (= :nowrap wrap-type)
@ -549,7 +549,7 @@
:on-change on-change' :on-change on-change'
:on-blur on-gap-blur :on-blur on-gap-blur
:on-token-remove js/console.log :on-token-remove js/console.log
:options options :options spacing-column-options
:position :left :position :left
:value (:row-gap value) :value (:row-gap value)
:input-props {:type "number" :input-props {:type "number"
@ -571,7 +571,7 @@
:on-change on-change' :on-change on-change'
:on-blur on-gap-blur :on-blur on-gap-blur
:on-token-remove js/console.log :on-token-remove js/console.log
:options options :options spacing-row-options
:position :right :position :right
:value (:column-gap value) :value (:column-gap value)
:input-props {:type "number" :input-props {:type "number"
@ -832,9 +832,9 @@
(st/emit! (dom/open-new-window cf/grid-help-uri))) (st/emit! (dom/open-new-window cf/grid-help-uri)))
(mf/defc layout-container-menu (mf/defc layout-container-menu
{::mf/memo #{:ids :values :multiple} {::mf/memo #{:ids :values :multiple :shape}
::mf/props :obj} ::mf/props :obj}
[{:keys [ids values multiple]}] [{:keys [ids values multiple] :as props}]
(let [;; Display (let [;; Display
layout-type (:layout values) layout-type (:layout values)
has-layout? (some? layout-type) has-layout? (some? layout-type)
@ -848,6 +848,29 @@
on-toggle-visibility on-toggle-visibility
(mf/use-fn #(swap! open* not)) (mf/use-fn #(swap! open* not))
shape (when-not multiple
(first (deref (refs/objects-by-id ids))))
tokens (mf/deref refs/workspace-tokens)
spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens)))
spacing-column-options (mf/use-memo
(mf/deps shape spacing-tokens)
#(when shape
(wtc/tokens-name-map->select-options
{:shape shape
:tokens spacing-tokens
:attributes (wtc/token-attributes :spacing)
:selected-attributes #{:spacing-column}})))
spacing-row-options (mf/use-memo
(mf/deps shape spacing-tokens)
#(when shape
(wtc/tokens-name-map->select-options
{:shape shape
:tokens spacing-tokens
:attributes (wtc/token-attributes :spacing)
:selected-attributes #{:spacing-row}})))
on-add-layout on-add-layout
(mf/use-fn (mf/use-fn
(fn [event] (fn [event]
@ -1093,7 +1116,9 @@
[:& gap-section {:is-column is-column [:& gap-section {:is-column is-column
:wrap-type wrap-type :wrap-type wrap-type
:on-change on-gap-change :on-change on-gap-change
:value (:layout-gap values)}] :value (:layout-gap values)
:spacing-column-options spacing-column-options
:spacing-row-options spacing-row-options}]
[:& padding-section {:value (:layout-padding values) [:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values) :type (:layout-padding-type values)