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

Render grouped themes ui

Browse source
This commit is contained in:
Florian Schroedl 2024-08-16 06:24:15 +02:00
parent f0aaa29d66
commit 35759792a3
2 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/refs.cljs
View file

@ -240,6 +240,9 @@
st/state
=))
(def workspace-ordered-token-themes
(l/derived wtts/get-workspace-ordered-themes st/state))
(def workspace-token-sets
(l/derived
(fn [data]

35
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -16,6 +16,7 @@
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.common :refer [labeled-input]]
[app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
[app.main.ui.workspace.tokens.core :as wtc]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
@ -146,22 +147,50 @@
{:empty (sort-by :token-key empty)
:filled (sort-by :token-key filled)}))
(mf/defc tokene-theme-create
[_props]
(let [group (mf/use-state "")
name (mf/use-state "")]
[:div {:style {:display "flex"
:flex-direction "column"
:gap "10px"}}
[:& labeled-input {:label "Group name"
:input-props {:value @group}}]
[:& labeled-input {:label "Theme name"
:input-props {:value @name}}]
[:button "Create"]]))
(mf/defc token-sets
[_props]
(let [selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
(let [themes (mf/deref refs/workspace-ordered-token-themes)
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
token-sets (mf/deref refs/workspace-token-sets)]
[:div
{:style {:display "flex"
:flex-direction "column"
:gap "10px"}}
"Token Sets"
"Themes"
[:div
[:ul {:style {:list-style "disk"}}
[:& tokene-theme-create]
(for [[group themes] themes]
[:li
{:key (str "token-theme-group" group)}
group
#_[:ul {:style {:list-style "disk"
:margin-left "20px"}}
(for [{:keys [id] :as theme} themes]
[:li {:key (str "tokene-theme-" id)}
[:input {:type "checkbox"
:checked (wtts/theme-selected? theme)}]])]])]]
"Sets"
[:div
{:style {:display "flex" :gap "10px"}}
[:button
{:on-click #(st/emit! (wdt/create-token-set nil))}
"Create"]
[:button "Delete"]]
#_[:button "Delete"]]
[:ul
{:style {:list-style "disk"
:margin-left "20px"}}