Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-07 15:39:42 -05:00
Code Issues Activity

Wire up theme updating

Browse source
This commit is contained in:
Florian Schroedl 2024-08-26 14:17:30 +02:00
parent 70b570f112
commit 7aff690e7b
2 changed files with 62 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/app/main/data/tokens.cljs
View file

@ -102,6 +102,17 @@
(rx/of (rx/of
(dch/commit-changes changes))))))) (dch/commit-changes changes)))))))
(defn update-token-theme [token-theme]
(ptk/reify ::update-token-theme
ptk/WatchEvent
(watch [it state _]
(let [prev-token-theme (wtts/get-workspace-token-theme state (:id token-theme))
changes (-> (pcb/empty-changes it)
(pcb/update-token-theme token-theme prev-token-theme))]
(js/console.log "changes" changes)
(rx/of
(dch/commit-changes changes))))))
(defn ensure-token-theme-changes [changes state {:keys [id new-set?]}] (defn ensure-token-theme-changes [changes state {:keys [id new-set?]}]
(let [theme-id (wtts/update-theme-id state) (let [theme-id (wtts/update-theme-id state)
theme (some-> theme-id (wtts/get-workspace-token-theme state))] theme (some-> theme-id (wtts/get-workspace-token-theme state))]

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

@ -8,15 +8,14 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(: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.workspace.tokens.token-set :as wtts]
[cuerdas.core :as str]
[app.main.ui.workspace.tokens.common :refer [labeled-input]]
[app.main.ui.workspace.tokens.sets :as wts]
[app.main.data.tokens :as wdt] [app.main.data.tokens :as wdt]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.tokens.common :refer [labeled-input]]
[app.main.ui.workspace.tokens.sets :as wts]
[app.main.ui.workspace.tokens.token-set :as wtts]
[app.util.dom :as dom] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -97,7 +96,7 @@
"Create theme"]]])) "Create theme"]]]))
(mf/defc edit-theme (mf/defc edit-theme
[{:keys [token-sets theme on-back] :as props}] [{:keys [token-sets theme on-back on-submit] :as props}]
(let [edit? (some? (:id theme)) (let [edit? (some? (:id theme))
theme-state (mf/use-state {:token-sets token-sets theme-state (mf/use-state {:token-sets token-sets
:theme theme}) :theme theme})
@ -110,36 +109,52 @@
(fn [token-set-id] (fn [token-set-id]
(swap! theme-state (fn [st] (swap! theme-state (fn [st]
(update st :theme #(wtts/toggle-token-set-to-token-theme token-set-id %)))))) (update st :theme #(wtts/toggle-token-set-to-token-theme token-set-id %))))))
on-update-field (fn [field] on-change-field (fn [field]
(fn [e] (fn [e]
(swap! theme-state (fn [st] (assoc-in st field (dom/get-target-val e)))))) (swap! theme-state (fn [st] (assoc-in st field (dom/get-target-val e))))))
on-update-group (on-update-field [:theme :group]) on-update-group (on-change-field [:theme :group])
on-update-name (on-update-field [:theme :name])] on-update-name (on-change-field [:theme :name])
[:div {:class (stl/css :edit-theme-wrapper)} on-save-form (mf/use-callback
[:div (mf/deps theme-state on-submit)
[:button {:class (stl/css :back-button) (fn [e]
:on-click on-back} (dom/prevent-default e)
chevron-icon "Back"]] (on-submit (:theme @theme-state))
[:div {:class (stl/css :edit-theme-inputs-wrapper)} (on-back)))]
[:& labeled-input {:label "Group" [:form {:on-submit on-save-form}
:input-props {:default-value (:group theme) [:div {:class (stl/css :edit-theme-wrapper)}
:on-change on-update-group}}] [:div
[:& labeled-input {:label "Theme" [:button {:class (stl/css :back-button)
:input-props {:default-value (:name theme) :type "button"
:on-change on-update-name}}]] :on-click on-back}
[:div {:class (stl/css :sets-list-wrapper)} chevron-icon "Back"]]
[:& wts/controlled-sets-list [:div {:class (stl/css :edit-theme-inputs-wrapper)}
{:token-sets token-sets [:& labeled-input {:label "Group"
:token-set-selected? (constantly false) :input-props {:default-value (:group theme)
:token-set-active? token-set-active? :on-change on-update-group}}]
:on-select on-toggle-token-set [:& labeled-input {:label "Theme"
:on-toggle on-toggle-token-set}]] :input-props {:default-value (:name theme)
[:div {:class (stl/css :edit-theme-footer)} :on-change on-update-name}}]]
(when edit? [:div {:class (stl/css :sets-list-wrapper)}
[:button {:class (stl/css :button-secondary)} "Delete"]) [:& wts/controlled-sets-list
[:div {:class (stl/css :button-footer)} {:token-sets token-sets
[:button {:class (stl/css :button-secondary)} "Cancel"] :token-set-selected? (constantly false)
[:button {:class (stl/css :button-primary)} "Save theme"]]]])) :token-set-active? token-set-active?
:on-select on-toggle-token-set
:on-toggle on-toggle-token-set}]]
[:div {:class (stl/css :edit-theme-footer)}
(when edit?
[:button {:class (stl/css :button-secondary)
:type "button"}
"Delete"])
[:div {:class (stl/css :button-footer)}
[:button {:class (stl/css :button-secondary)
:type "button"
:on-click #(st/emit! (modal/hide))}
"Cancel"]
[:button {:class (stl/css :button-primary)
:type "submit"
:on-click on-save-form}
"Save theme"]]]]]))
(mf/defc controlled-edit-theme (mf/defc controlled-edit-theme
[{:keys [state set-state]}] [{:keys [state set-state]}]
@ -149,7 +164,8 @@
[:& edit-theme [:& edit-theme
{:token-sets token-sets {:token-sets token-sets
:theme theme :theme theme
:on-back #(set-state (constantly {:type :themes-overview}))}])) :on-back #(set-state (constantly {:type :themes-overview}))
:on-submit #(st/emit! (wdt/update-token-theme %))}]))
(mf/defc themes (mf/defc themes
[{:keys [] :as _args}] [{:keys [] :as _args}]