3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-30 05:56:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Allow editing of sets in create theme dialog

Browse source 
♻️ theme-state -> current-theme
This commit is contained in:
Florian Schroedl 2025-03-31 15:21:12 +02:00
parent 79679cbb16
commit 8df780b237
2 changed files with 76 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -241,54 +241,6 @@
:disabled disabled?} :disabled disabled?}
(tr "workspace.token.save-theme")]])) (tr "workspace.token.save-theme")]]))
(mf/defc create-theme
[{:keys [set-state]}]
(let [theme (ctob/make-token-theme :name "")
on-back #(set-state (constantly {:type :themes-overview}))
theme-state* (mf/use-state theme)
theme-state (deref theme-state*)
disabled? (-> (:name theme-state)
(str/trim)
(str/empty?))
on-change-field
(mf/use-fn
(fn [field value]
(swap! theme-state* #(assoc % field value))))
on-save-form
(mf/use-fn
(mf/deps theme-state)
(fn [e]
(dom/prevent-default e)
(let [theme (-> theme-state
(update :name str/trim)
(update :group str/trim)
(update :description str/trim))]
(when-not (str/empty? (:name theme))
(st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"})
(wdt/create-token-theme theme)))
(on-back))))
close-modal
(mf/use-fn
(fn [e]
(dom/prevent-default e)
(st/emit! (modal/hide))))]
[:div {:class (stl/css :themes-modal-wrapper)}
[:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
(tr "workspace.token.add-new-theme")]
[:form {:on-submit on-save-form}
[:div {:class (stl/css :create-theme-wrapper)}
[:> theme-inputs* {:theme theme
:on-change-field on-change-field}]
[:div {:class (stl/css :button-footer)}
[:> theme-modal-buttons* {:close-modal close-modal
:on-save-form on-save-form
:disabled? disabled?}]]]]]))
(defn- make-lib-with-theme (defn- make-lib-with-theme
[theme sets] [theme sets]
(let [tlib (-> (ctob/make-tokens-lib) (let [tlib (-> (ctob/make-tokens-lib)
@ -296,40 +248,37 @@
tlib (reduce ctob/add-set tlib sets)] tlib (reduce ctob/add-set tlib sets)]
(ctob/activate-theme tlib (:group theme) (:name theme)))) (ctob/activate-theme tlib (:group theme) (:name theme))))
(mf/defc controlled-edit-theme (mf/defc edit-create-theme
[{:keys [state set-state]}] [{:keys [set-state theme on-save edit-theme?]}]
(let [{:keys [theme-path]} @state (let [ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
[_ 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-state* (mf/use-state theme) current-theme* (mf/use-state theme)
theme-state (deref theme-state*) current-theme (deref current-theme*)
lib (make-lib-with-theme theme-state ordered-token-sets) lib (make-lib-with-theme current-theme ordered-token-sets)
;; Form / Modal handlers ;; Form / Modal handlers
on-back #(set-state (constantly {:type :themes-overview})) on-back #(set-state (constantly {:type :themes-overview}))
disabled? (-> (:name theme-state) disabled? (-> (:name current-theme)
(str/trim) (str/trim)
(str/empty?)) (str/empty?))
on-change-field on-change-field
(mf/use-fn (mf/use-fn
(fn [field value] (fn [field value]
(swap! theme-state* #(assoc % field value)))) (swap! current-theme* #(assoc % field value))))
on-save-form on-save-form
(mf/use-fn (mf/use-fn
(mf/deps theme theme-state) (mf/deps current-theme on-save on-back)
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(let [theme' (-> theme-state (let [theme' (-> current-theme
(update :name str/trim) (update :name str/trim)
(update :group str/trim) (update :group str/trim)
(update :description str/trim))] (update :description str/trim))]
(when-not (str/empty? (:name theme)) (when-not (str/empty? (:name theme'))
(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] theme'))) (on-save theme'))
(on-back)))) (on-back))))
close-modal close-modal
@ -338,37 +287,37 @@
(dom/prevent-default e) (dom/prevent-default e)
(st/emit! (modal/hide)))) (st/emit! (modal/hide))))
on-delete-token on-delete-theme
(mf/use-fn (mf/use-fn
(mf/deps theme on-back) (mf/deps current-theme on-back)
(fn [] (fn []
(st/emit! (wdt/delete-token-theme (:group theme) (:name theme))) (st/emit! (wdt/delete-token-theme (:group current-theme) (:name current-theme)))
(on-back))) (on-back)))
;; Sets tree handlers ;; Sets tree handlers
token-set-group-active? token-set-group-active?
(mf/use-fn (mf/use-fn
(mf/deps theme-state) (mf/deps current-theme)
(fn [group-path] (fn [group-path]
(ctob/sets-at-path-all-active? lib group-path))) (ctob/sets-at-path-all-active? lib group-path)))
token-set-active? token-set-active?
(mf/use-fn (mf/use-fn
(mf/deps theme-state) (mf/deps current-theme)
(fn [name] (fn [name]
(contains? (:sets theme-state) name))) (contains? (:sets current-theme) name)))
on-toggle-token-set on-toggle-token-set
(mf/use-fn (mf/use-fn
(mf/deps theme-state) (mf/deps current-theme)
(fn [set-name] (fn [set-name]
(swap! theme-state* #(ctob/toggle-set % set-name)))) (swap! current-theme* #(ctob/toggle-set % set-name))))
on-toggle-token-set-group on-toggle-token-set-group
(mf/use-fn (mf/use-fn
(mf/deps theme-state ordered-token-sets) (mf/deps current-theme ordered-token-sets)
(fn [group-path] (fn [group-path]
(swap! theme-state* (fn [theme'] (swap! current-theme* (fn [theme']
(let [lib' (make-lib-with-theme theme' ordered-token-sets)] (let [lib' (make-lib-with-theme theme' ordered-token-sets)]
(clt/toggle-token-set-group group-path lib' theme')))))) (clt/toggle-token-set-group group-path lib' theme'))))))
@ -381,17 +330,20 @@
[: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)}
(tr "workspace.token.edit-theme-title")] (if edit-theme?
(tr "workspace.token.edit-theme-title")
(tr "workspace.token.add-new-theme"))]
[:form {:on-submit on-save-form :class (stl/css :edit-theme-form)} [:form {:on-submit on-save-form :class (stl/css :edit-theme-form)}
[:div {:class (stl/css :edit-theme-wrapper)} [:div {:class (stl/css :edit-theme-wrapper)}
(when edit-theme?
[:button {:on-click on-back [:button {:on-click on-back
:class (stl/css :back-btn) :class (stl/css :back-btn)
:type "button"} :type "button"}
[:> icon* {:icon-id ic/arrow-left :aria-hidden true}] [:> icon* {:icon-id ic/arrow-left :aria-hidden true}]
(tr "workspace.token.back-to-themes")] (tr "workspace.token.back-to-themes")])
[:> theme-inputs* {:theme theme [:> theme-inputs* {:theme current-theme
:on-change-field on-change-field}] :on-change-field on-change-field}]
[:> text* {:as "span" :typography "body-small" :class (stl/css :select-sets-message)} [:> text* {:as "span" :typography "body-small" :class (stl/css :select-sets-message)}
(tr "workspace.token.set-selection-theme")] (tr "workspace.token.set-selection-theme")]
@ -408,16 +360,51 @@
:origin "theme-modal"}]] :origin "theme-modal"}]]
[:div {:class (stl/css :edit-theme-footer)} [:div {:class (stl/css :edit-theme-footer)}
(when edit-theme?
[:> button* {:variant "secondary" [:> button* {:variant "secondary"
:type "button" :type "button"
:icon "delete" :icon "delete"
:on-click on-delete-token} :on-click on-delete-theme}
(tr "labels.delete")] (tr "labels.delete")])
[:div {:class (stl/css :button-footer)} [:div {:class (stl/css :button-footer)}
[:> theme-modal-buttons* {:close-modal close-modal [:> theme-modal-buttons* {:close-modal close-modal
:on-save-form on-save-form :on-save-form on-save-form
:disabled? disabled?}]]]]]])) :disabled? disabled?}]]]]]]))
(mf/defc edit-theme
[{:keys [state set-state]}]
(let [{:keys [theme-path]} @state
[_ theme-group theme-name] theme-path
theme (mf/deref (refs/workspace-token-theme theme-group theme-name))
on-save
(mf/use-fn
(mf/deps theme)
(fn [theme']
(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] theme'))))]
[:& edit-create-theme
{:set-state set-state
:theme theme
:on-save on-save
:edit-theme? true}]))
(mf/defc create-theme
[{:keys [set-state]}]
(let [theme (ctob/make-token-theme :name "")
on-save
(mf/use-fn
(fn [theme]
(st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"})
(wdt/create-token-theme theme))))]
[:& edit-create-theme
{:set-state set-state
:theme theme
:on-save on-save
:create-theme? true}]))
(mf/defc themes-modal-body* (mf/defc themes-modal-body*
{::mf/private true} {::mf/private true}
[] []
@ -429,7 +416,7 @@
component (case (:type @state) component (case (:type @state)
:empty-themes empty-themes :empty-themes empty-themes
:themes-overview (if (empty? themes) empty-themes themes-overview) :themes-overview (if (empty? themes) empty-themes themes-overview)
:edit-theme controlled-edit-theme :edit-theme edit-theme
:create-theme create-theme)] :create-theme create-theme)]
[:& component {:state state [:& component {:state state
:set-state set-state}])) :set-state set-state}]))

1
frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
View file

@ -68,6 +68,7 @@
.button-footer { .button-footer {
display: flex; display: flex;
margin-left: auto;
justify-content: flex-end; justify-content: flex-end;
gap: $s-6; gap: $s-6;
} }