Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -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 st/state
=)) =))
(def workspace-ordered-token-themes
(l/derived wtts/get-workspace-ordered-themes st/state))
(def workspace-token-sets (def workspace-token-sets
(l/derived (l/derived
(fn [data] (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.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.tokens.changes :as wtch] [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.context-menu :refer [token-context-menu]]
[app.main.ui.workspace.tokens.core :as wtc] [app.main.ui.workspace.tokens.core :as wtc]
[app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.style-dictionary :as sd]
@ -146,22 +147,50 @@
{:empty (sort-by :token-key empty) {:empty (sort-by :token-key empty)
:filled (sort-by :token-key filled)})) :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 (mf/defc token-sets
[_props] [_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)] token-sets (mf/deref refs/workspace-token-sets)]
[:div [:div
{:style {:display "flex" {:style {:display "flex"
:flex-direction "column" :flex-direction "column"
:gap "10px"}} :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 [:div
{:style {:display "flex" :gap "10px"}} {:style {:display "flex" :gap "10px"}}
[:button [:button
{:on-click #(st/emit! (wdt/create-token-set nil))} {:on-click #(st/emit! (wdt/create-token-set nil))}
"Create"] "Create"]
[:button "Delete"]] #_[:button "Delete"]]
[:ul [:ul
{:style {:list-style "disk" {:style {:list-style "disk"
:margin-left "20px"}} :margin-left "20px"}}