Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

Add groups select

Browse source
This commit is contained in:
Florian Schroedl 2024-09-10 15:37:01 +02:00
parent df16d0c222
commit 21f42021d8
1 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -130,6 +130,7 @@
on-change-field (fn [field]
(fn [e]
(swap! theme-state (fn [st] (assoc-in st field (dom/get-target-val e))))))
group-input-ref (mf/use-ref)
on-update-group (on-change-field [:theme :group])
on-update-name (on-change-field [:theme :name])
on-save-form (mf/use-callback
@ -154,25 +155,29 @@
:on-click on-back}
chevron-icon "Back"]]
[:div {:class (stl/css :edit-theme-inputs-wrapper)}
(when dropdown-open?
[:& wtco/dropdown-select {:id ::groups-dropdown
:shortcuts-key ::groups-dropdown
:options (map (fn [group]
{:label group
:value group})
theme-groups)
:on-select #(on-update-group (:value %))
:on-close on-close-dropdown}])
[:& labeled-input {:label "Group"
:input-props {:default-value (:group theme)
:on-change on-update-group}
:render-right (mf/fnc []
[:button {:class (stl/css :group-drop-down-button)
:type "button"
:on-click (fn [e]
(dom/stop-propagation e)
(on-toggle-dropdown))}
i/arrow])}]
[:div {:class (stl/css :group-input-wrapper)}
(when dropdown-open?
[:& wtco/dropdown-select {:id ::groups-dropdown
:shortcuts-key ::groups-dropdown
:options (map (fn [group]
{:label group
:value group})
theme-groups)
:on-select (fn [{:keys [value]}]
(set! (.-value (mf/ref-val group-input-ref)) value)
(swap! theme-state assoc-in [:theme :group] value))
:on-close on-close-dropdown}])
[:& labeled-input {:label "Group"
:input-props {:ref group-input-ref
:default-value (:group theme)
:on-change on-update-group}
:render-right (mf/fnc []
[:button {:class (stl/css :group-drop-down-button)
:type "button"
:on-click (fn [e]
(dom/stop-propagation e)
(on-toggle-dropdown))}
i/arrow])}]]
[:& labeled-input {:label "Theme"
:input-props {:default-value (:name theme)
:on-change on-update-name}}]]