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

Move the temporary ui to modal

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 14:53:22 +02:00
parent b62722bdbb
commit d23c5cbbbe
1 changed files with 54 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,14 +7,65 @@
(ns app.main.ui.workspace.tokens.modals.themes
(:require-macros [app.main.style :as stl])
(:require
[rumext.v2 :as mf]
[app.main.data.modal :as modal]
[app.main.data.tokens :as wdt]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]))
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(mf/defc empty-themes
[{:keys []}]
"Empty")
(mf/defc themes-overview
[{:keys []}]
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
themes (mf/deref refs/workspace-ordered-token-themes)]
[:ul
(for [[group themes] themes]
[:li
{:key (str "token-theme-group" group)}
group
[:ul
(for [{:keys [id name] :as _theme} themes]
[:li {:key (str "tokene-theme-" id)}
[:div.spaced
name
[:div.spaced
[:button
{:on-click (fn [e]
(dom/prevent-default e)
(dom/stop-propagation e)
(st/emit! (wdt/toggle-token-theme id)))}
(if (get active-theme-ids id) "✅" "❎")]
[:button {:on-click (fn [e]
(dom/prevent-default e)
(dom/stop-propagation e)
(st/emit! (wdt/delete-token-theme id)))}
"🗑️"]]]])]])]))
(mf/defc edit-theme
[{:keys []}]
"Edit Theme")
(mf/defc themes
[{:keys [] :as _args}]
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
themes (mf/deref refs/workspace-ordered-token-themes)
_ (js/console.log "themes" themes)
state (mf/use-state (if (empty? themes)
:empty-themes
:themes-overview))]
(case @state
:empty-themes [:& empty-themes]
:themes-overview [:& themes-overview]
:edit-theme [:& edit-theme])))
(mf/defc modal
{::mf/wrap-props false}
[{:keys [] :as _args}]
@ -23,6 +74,5 @@
[:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} close-icon]
[:div {:class (stl/css :modal-title)} "Themes"]
[:div {:class (stl/css :modal-content)}
"Themes"]]]))
[:& themes]]]]))