mirror of
https://github.com/penpot/penpot.git
synced 2025-07-11 00:57:17 +02:00
Wrap themes ui in header
This commit is contained in:
parent
a9a5f69c93
commit
88c899c5c6
1 changed files with 50 additions and 41 deletions
|
@ -179,47 +179,56 @@
|
||||||
:name @name}))}
|
:name @name}))}
|
||||||
"Create"]]))
|
"Create"]]))
|
||||||
|
|
||||||
(mf/defc token-sets
|
(mf/defc themes-sidebar
|
||||||
[_props]
|
[_props]
|
||||||
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
|
(let [open? (mf/use-state true)
|
||||||
|
active-theme-ids (mf/deref refs/workspace-active-theme-ids)
|
||||||
themes (mf/deref refs/workspace-ordered-token-themes)]
|
themes (mf/deref refs/workspace-ordered-token-themes)]
|
||||||
[:div
|
[:div {:class (stl/css :sets-sidebar)}
|
||||||
[:style
|
[:div {:class (stl/css :sidebar-header)}
|
||||||
(str "@scope {"
|
[:& title-bar {:collapsable true
|
||||||
(str/join "\n"
|
:collapsed (not @open?)
|
||||||
["ul { list-style-type: circle; margin-left: 20px; }"
|
:all-clickable true
|
||||||
".spaced { display: flex; gap: 10px; justify-content: space-between; }"
|
:title "THEMES"
|
||||||
".spaced-y { display: flex; flex-direction: column; gap: 10px }"
|
:on-collapsed #(swap! open? not)}]]
|
||||||
".selected { font-weight: 600; }"
|
(when @open?
|
||||||
"b { font-weight: 600; }"])
|
[:div
|
||||||
"}")]
|
[:style
|
||||||
[:div.spaced-y
|
(str "@scope {"
|
||||||
{:style {:padding "10px"}}
|
(str/join "\n"
|
||||||
[:& tokene-theme-create]
|
["ul { list-style-type: circle; margin-left: 20px; }"
|
||||||
[:div.spaced-y
|
".spaced { display: flex; gap: 10px; justify-content: space-between; }"
|
||||||
[:b "Themes"]
|
".spaced-y { display: flex; flex-direction: column; gap: 10px }"
|
||||||
[:ul
|
".selected { font-weight: 600; }"
|
||||||
(for [[group themes] themes]
|
"b { font-weight: 600; }"])
|
||||||
[:li
|
"}")]
|
||||||
{:key (str "token-theme-group" group)}
|
[:div.spaced-y
|
||||||
group
|
{:style {:padding "10px"}}
|
||||||
[:ul
|
[:& tokene-theme-create]
|
||||||
(for [{:keys [id name] :as _theme} themes]
|
[:div.spaced-y
|
||||||
[:li {:key (str "tokene-theme-" id)}
|
[:b "Themes"]
|
||||||
[:div.spaced
|
[:ul
|
||||||
name
|
(for [[group themes] themes]
|
||||||
[:div.spaced
|
[:li
|
||||||
[:button
|
{:key (str "token-theme-group" group)}
|
||||||
{:on-click (fn [e]
|
group
|
||||||
(dom/prevent-default e)
|
[:ul
|
||||||
(dom/stop-propagation e)
|
(for [{:keys [id name] :as _theme} themes]
|
||||||
(st/emit! (wdt/toggle-token-theme id)))}
|
[:li {:key (str "tokene-theme-" id)}
|
||||||
(if (get active-theme-ids id) "✅" "❎")]
|
[:div.spaced
|
||||||
[:button {:on-click (fn [e]
|
name
|
||||||
(dom/prevent-default e)
|
[:div.spaced
|
||||||
(dom/stop-propagation e)
|
[:button
|
||||||
(st/emit! (wdt/delete-token-theme id)))}
|
{: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 sets-sidebar
|
(mf/defc sets-sidebar
|
||||||
[]
|
[]
|
||||||
|
@ -292,8 +301,8 @@
|
||||||
[:div {:class (stl/css :sidebar-tab-wrapper)}
|
[:div {:class (stl/css :sidebar-tab-wrapper)}
|
||||||
(when show-sets-section?
|
(when show-sets-section?
|
||||||
[:div {:class (stl/css :sets-section-wrapper)}
|
[:div {:class (stl/css :sets-section-wrapper)}
|
||||||
[:& sets-sidebar]
|
[:& themes-sidebar]
|
||||||
[:& token-sets]])
|
[:& sets-sidebar]])
|
||||||
[:div {:class (stl/css :tokens-section-wrapper)}
|
[:div {:class (stl/css :tokens-section-wrapper)}
|
||||||
[:& tokens-explorer]]
|
[:& tokens-explorer]]
|
||||||
[:button {:class (stl/css :download-json-button)
|
[:button {:class (stl/css :download-json-button)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue