Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

Allow controlling state of theme editing

Browse source
This commit is contained in:
Florian Schroedl 2024-08-26 13:41:02 +02:00
parent fe702988f9
commit a0dd3f63bf
1 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@
(:require (:require
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.workspace.tokens.token-set :as wtts]
[cuerdas.core :as str] [cuerdas.core :as str]
[app.main.ui.workspace.tokens.common :refer [labeled-input]] [app.main.ui.workspace.tokens.common :refer [labeled-input]]
[app.main.ui.workspace.tokens.sets :as wts] [app.main.ui.workspace.tokens.sets :as wts]
@ -96,23 +97,22 @@
"Create theme"]]])) "Create theme"]]]))
(mf/defc edit-theme (mf/defc edit-theme
[{:keys [state set-state]}] [{:keys [token-sets theme on-back] :as props}]
(let [{:keys [theme-id]} @state (let [theme-state (mf/use-state {:token-sets token-sets
token-sets (mf/deref refs/workspace-token-sets) :theme theme})
theme (mf/deref (refs/workspace-token-theme theme-id))
token-set-active? (mf/use-callback token-set-active? (mf/use-callback
(mf/deps (:sets theme)) (mf/deps theme-state)
(fn [id] (fn [id]
(get-in theme [:sets id]))) (get-in @theme-state [:theme :sets id])))
on-toggle-token-set (mf/use-callback on-toggle-token-set (mf/use-callback
(mf/deps (:id theme)) (mf/deps theme-state)
(fn [token-set-id] (fn [token-set-id]
(st/emit! (wdt/toggle-token-set {:token-set-id token-set-id (swap! theme-state (fn [st]
:token-theme-id (:id theme)}))))] (update st :theme #(wtts/toggle-token-set-to-token-theme token-set-id %))))))]
[:div {:class (stl/css :edit-theme-wrapper)} [:div {:class (stl/css :edit-theme-wrapper)}
[:div [:div
[:button {:class (stl/css :back-button) [:button {:class (stl/css :back-button)
:on-click #(set-state (constantly {:type :themes-overview}))} :on-click on-back}
chevron-icon "Back"]] chevron-icon "Back"]]
[:div {:class (stl/css :edit-theme-inputs-wrapper)} [:div {:class (stl/css :edit-theme-inputs-wrapper)}
[:& labeled-input {:label "Group" [:& labeled-input {:label "Group"
@ -132,6 +132,16 @@
[:button {:class (stl/css :button-secondary)} "Cancel"] [:button {:class (stl/css :button-secondary)} "Cancel"]
[:button {:class (stl/css :button-primary)} "Save theme"]]]])) [:button {:class (stl/css :button-primary)} "Save theme"]]]]))
(mf/defc controlled-edit-theme
[{:keys [state set-state]}]
(let [{:keys [theme-id]} @state
token-sets (mf/deref refs/workspace-token-sets)
theme (mf/deref (refs/workspace-token-theme theme-id))]
[:& edit-theme
{:token-sets token-sets
:theme theme
:on-back #(set-state (constantly {:type :themes-overview}))}]))
(mf/defc themes (mf/defc themes
[{:keys [] :as _args}] [{:keys [] :as _args}]
(let [themes (mf/deref refs/workspace-ordered-token-themes) (let [themes (mf/deref refs/workspace-ordered-token-themes)
@ -145,7 +155,7 @@
component (case (:type @state) component (case (:type @state)
:empty-themes empty-themes :empty-themes empty-themes
:themes-overview themes-overview :themes-overview themes-overview
:edit-theme edit-theme)] :edit-theme controlled-edit-theme)]
[:div [:div
[:div {:class (stl/css :modal-title)} title] [:div {:class (stl/css :modal-title)} title]