Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-20 13:42:59 -05:00
Code Issues Activity

✨ Display active state of children checkmark next to set groups in themes modal

Browse source
This commit is contained in:
Florian Schroedl 2024-12-04 17:16:35 +01:00
parent 07e3f581d3
commit 8b569005e1
1 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -254,28 +254,22 @@
[{:keys [state set-state]}] [{:keys [state set-state]}]
(let [{:keys [theme-path]} @state (let [{:keys [theme-path]} @state
[_ theme-group theme-name] theme-path [_ theme-group theme-name] theme-path
ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
token-sets (mf/deref refs/workspace-token-sets-tree) token-sets (mf/deref refs/workspace-token-sets-tree)
theme (mf/deref (refs/workspace-token-theme theme-group theme-name)) theme (mf/deref (refs/workspace-token-theme theme-group theme-name))
theme-state (mf/use-state theme)
lib (-> (ctob/make-tokens-lib)
(ctob/add-theme @theme-state)
(ctob/add-sets ordered-token-sets)
(ctob/activate-theme (:group @theme-state) (:name @theme-state)))
;; Form / Modal handlers
on-back #(set-state (constantly {:type :themes-overview})) on-back #(set-state (constantly {:type :themes-overview}))
on-submit #(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] %)) on-submit #(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] %))
{:keys [dropdown-open? _on-open-dropdown on-close-dropdown on-toggle-dropdown]} (wtco/use-dropdown-open-state) {:keys [dropdown-open? _on-open-dropdown on-close-dropdown on-toggle-dropdown]} (wtco/use-dropdown-open-state)
theme-state (mf/use-state theme)
disabled? (-> (:name @theme-state) disabled? (-> (:name @theme-state)
(str/trim) (str/trim)
(str/empty?)) (str/empty?))
token-set-active? (mf/use-callback
(mf/deps theme-state)
(fn [set-name]
(get-in @theme-state [:sets set-name])))
on-toggle-token-set (mf/use-callback
(mf/deps theme-state)
(fn [set-name]
(swap! theme-state #(ctob/toggle-set % set-name))))
on-click-token-set (mf/use-callback
(mf/deps on-toggle-token-set)
(fn [prefixed-set-path-str]
(let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
(on-toggle-token-set set-name))))
on-change-field (fn [field value] on-change-field (fn [field value]
(swap! theme-state #(assoc % field value))) (swap! theme-state #(assoc % field value)))
on-save-form (mf/use-callback on-save-form (mf/use-callback
@ -294,13 +288,31 @@
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(st/emit! (modal/hide)))) (st/emit! (modal/hide))))
on-delete-token on-delete-token
(mf/use-fn (mf/use-fn
(mf/deps theme on-back) (mf/deps theme on-back)
(fn [] (fn []
(st/emit! (wdt/delete-token-theme (:group theme) (:name theme))) (st/emit! (wdt/delete-token-theme (:group theme) (:name theme)))
(on-back)))] (on-back)))
;; Sets tree handlers
token-set-group-active? (mf/use-callback
(mf/deps theme-state)
(fn [prefixed-path]
(ctob/sets-at-path-all-active? lib prefixed-path)))
token-set-active? (mf/use-callback
(mf/deps theme-state)
(fn [set-name]
(get-in @theme-state [:sets set-name])))
on-toggle-token-set (mf/use-callback
(mf/deps theme-state)
(fn [set-name]
(swap! theme-state #(ctob/toggle-set % set-name))))
on-click-token-set (mf/use-callback
(mf/deps on-toggle-token-set)
(fn [prefixed-set-path-str]
(let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
(on-toggle-token-set set-name))))]
[:div {:class (stl/css :themes-modal-wrapper)} [:div {:class (stl/css :themes-modal-wrapper)}
[:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)} [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
@ -327,6 +339,7 @@
{:token-sets token-sets {:token-sets token-sets
:token-set-selected? (constantly false) :token-set-selected? (constantly false)
:token-set-active? token-set-active? :token-set-active? token-set-active?
:token-set-group-active? token-set-group-active?
:on-select on-click-token-set :on-select on-click-token-set
:on-toggle-token-set on-toggle-token-set :on-toggle-token-set on-toggle-token-set
:origin "theme-modal" :origin "theme-modal"