3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-10 22:17:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

Wrap themes ui in header

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 10:17:52 +02:00
parent a9a5f69c93
commit 88c899c5c6
1 changed files with 50 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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)