3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-31 12:28:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add padding editable select

Browse source
This commit is contained in:
Florian Schroedl 2024-05-29 14:21:33 +02:00
parent 28bdf62454
commit 0e7e37afc2
2 changed files with 53 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -297,7 +297,7 @@
(mf/defc simple-padding-selection (mf/defc simple-padding-selection
{::mf/props :obj} {::mf/props :obj}
[{:keys [value on-change]}] [{:keys [value on-change padding-x-options padding-y-options]}]
(let [p1 (:p1 value) (let [p1 (:p1 value)
p2 (:p2 value) p2 (:p2 value)
p3 (:p3 value) p3 (:p3 value)
@ -316,15 +316,12 @@
on-change' on-change'
(mf/use-fn (mf/use-fn
(mf/deps on-change) (mf/deps on-change)
(fn [value event] (fn [value attr]
(let [attr (-> (dom/get-current-target event) (on-change :simple attr value)))
(dom/get-data "attr")
(keyword))]
(on-change :simple attr value event))))
on-focus on-focus
(mf/use-fn (mf/use-fn
(fn [event] (fn [attr event]
(let [attr (-> (dom/get-current-target event) (let [attr (-> (dom/get-current-target event)
(dom/get-data "attr") (dom/get-data "attr")
(keyword))] (keyword))]
@ -340,30 +337,39 @@
:title "Vertical padding"} :title "Vertical padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-top-bottom] i/padding-top-bottom]
[:> numeric-input* [:& editable-select
{:class (stl/css :numeric-input) {:placeholder "--"
:placeholder "--" :on-change #(on-change' %1 :p1)
:data-attr "p1" :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) :p1)
:on-change on-change' :options padding-x-options
:on-focus on-focus :position :left
:nillable true :value p1
:min 0 :input-props {:type "number"
:value p1}]] :data-attr "p1"
:onFocus on-focus
:no-validate true
:nillable true
:min 0
:class (stl/css :numeric-input)}}]]
[:div {:class (stl/css :padding-simple) [:div {:class (stl/css :padding-simple)
:title "Horizontal padding"} :title "Horizontal padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-left-right] i/padding-left-right]
[:> numeric-input* [:& editable-select
{:className (stl/css :numeric-input) {:placeholder "--"
:placeholder "--" :on-change #(on-change' %1 :p2)
:data-attr "p2" :on-token-remove #(on-change' (wtc/maybe-resolve-token-value %) :p2)
:on-change on-change' :options padding-x-options
:on-focus on-focus :position :right
:on-blur on-padding-blur :value p2
:nillable true :input-props {:type "number"
:min 0 :data-attr "p2"
:value p2}]]])) :onFocus on-focus
:no-validate true
:nillable true
:min 0
:class (stl/css :numeric-input)}}]]]))
(mf/defc multiple-padding-selection (mf/defc multiple-padding-selection
{::mf/props :obj} {::mf/props :obj}
@ -870,6 +876,23 @@
:attributes (wtc/token-attributes :spacing) :attributes (wtc/token-attributes :spacing)
:selected-attributes #{:spacing-row}}))) :selected-attributes #{:spacing-row}})))
padding-x-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 #{:position-x}})))
padding-y-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 #{:position-y}})))
on-add-layout on-add-layout
(mf/use-fn (mf/use-fn
@ -1130,7 +1153,9 @@
[:& padding-section {:value (:layout-padding values) [:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values) :type (:layout-padding-type values)
:on-type-change on-padding-type-change :on-type-change on-padding-type-change
:on-change on-padding-change}]]] :on-change on-padding-change
:padding-x-options padding-x-options
:padding-y-options padding-y-options}]]]
:grid :grid
[:div {:class (stl/css :grid-layout-menu)} [:div {:class (stl/css :grid-layout-menu)}

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -115,6 +115,7 @@
.padding-simple { .padding-simple {
@extend .input-element; @extend .input-element;
position: relative;
max-width: $s-108; max-width: $s-108;
} }
} }