3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-08 23:55:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add cosmetic changes to tokens sidebar component

Browse source
This commit is contained in:
Andrey Antukh 2025-02-04 18:03:37 +01:00
parent 7e0b2702de
commit b6e26d15e1
3 changed files with 28 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,7 @@
[app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]] [app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]]
[app.main.ui.workspace.sidebar.sitemap :refer [sitemap]] [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
[app.main.ui.workspace.sidebar.versions :refer [versions-toolbox*]] [app.main.ui.workspace.sidebar.versions :refer [versions-toolbox*]]
[app.main.ui.workspace.tokens.sidebar :refer [tokens-sidebar-tab]] [app.main.ui.workspace.tokens.sidebar :refer [tokens-sidebar-tab*]]
[app.util.debug :as dbg] [app.util.debug :as dbg]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[potok.v2.core :as ptk] [potok.v2.core :as ptk]
@ -120,7 +120,7 @@
tokens-tab tokens-tab
(when design-tokens? (when design-tokens?
(mf/html [:& tokens-sidebar-tab])) (mf/html [:> tokens-sidebar-tab*]))
tabs tabs
(if ^boolean mode-inspect? (if ^boolean mode-inspect?

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

@ -254,24 +254,31 @@
:style "header"}])]] :style "header"}])]]
[:& theme-sets-list {:on-open on-open}]]]])) [:& theme-sets-list {:on-open on-open}]]]]))
(mf/defc tokens-tab (mf/defc tokens-tab*
[_props] []
(let [objects (mf/deref refs/workspace-page-objects) (let [objects (mf/deref refs/workspace-page-objects)
selected (mf/deref refs/selected-shapes)
selected (mf/deref refs/selected-shapes) selected-shapes
selected-shapes (into [] (keep (d/getf objects)) selected) (mf/with-memo [selected objects]
(into [] (keep (d/getf objects)) selected))
active-theme-tokens (sd/use-active-theme-sets-tokens) active-theme-tokens
(sd/use-active-theme-tokens)
tokens (sd/use-resolved-workspace-tokens) tokens
(sd/use-resolved-workspace-tokens)
selected-token-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) selected-token-set-tokens
(mf/deref refs/workspace-selected-token-set-tokens)
selected-token-set-name (mf/deref refs/workspace-selected-token-set-name) selected-token-set-name
(mf/deref refs/workspace-selected-token-set-name)
token-groups (mf/with-memo [tokens selected-token-set-tokens] token-groups
(-> (select-keys tokens (keys selected-token-set-tokens)) (mf/with-memo [tokens selected-token-set-tokens]
(sorted-token-groups)))] (-> (select-keys tokens (keys selected-token-set-tokens))
(sorted-token-groups)))]
[:* [:*
[:& token-context-menu] [:& token-context-menu]
[:& title-bar {:all-clickable true [:& title-bar {:all-clickable true
@ -357,10 +364,9 @@
:on-click on-export} :on-click on-export}
(tr "labels.export")]]])) (tr "labels.export")]]]))
(mf/defc tokens-sidebar-tab (mf/defc tokens-sidebar-tab*
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]}
::mf/wrap-props false} []
[_props]
(let [{on-pointer-down-pages :on-pointer-down (let [{on-pointer-down-pages :on-pointer-down
on-lost-pointer-capture-pages :on-lost-pointer-capture on-lost-pointer-capture-pages :on-lost-pointer-capture
on-pointer-move-pages :on-pointer-move on-pointer-move-pages :on-pointer-move
@ -374,5 +380,5 @@
:on-pointer-down on-pointer-down-pages :on-pointer-down on-pointer-down-pages
:on-lost-pointer-capture on-lost-pointer-capture-pages :on-lost-pointer-capture on-lost-pointer-capture-pages
:on-pointer-move on-pointer-move-pages}] :on-pointer-move on-pointer-move-pages}]
[:& tokens-tab]] [:> tokens-tab*]]
[:& import-export-button]])) [:& import-export-button]]))

4
frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
View file

@ -295,6 +295,8 @@
prefer-selected-token-set-tokens (merge active-theme-tokens selected-token-set-tokens)] prefer-selected-token-set-tokens (merge active-theme-tokens selected-token-set-tokens)]
(use-resolved-tokens prefer-selected-token-set-tokens))) (use-resolved-tokens prefer-selected-token-set-tokens)))
(defn use-active-theme-sets-tokens [] (defn use-active-theme-tokens
"A hook that returns active tokens for the current active theme"
[]
(-> (mf/deref refs/workspace-active-theme-sets-tokens) (-> (mf/deref refs/workspace-active-theme-sets-tokens)
(use-resolved-tokens {:cache-atom !theme-tokens-cache}))) (use-resolved-tokens {:cache-atom !theme-tokens-cache})))