github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-24 09:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix sorting of standalone and grouped tokens (#9736)

Browse Source
This commit is contained in:
Eva Marco 2026-05-21 17:15:07 +02:00 committed by GitHub
parent bfa338bdee
commit 8119ed132e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 76 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs
View File

@ -11,8 +11,8 @@
[app.common.path-names :as cpn]
[app.common.types.tokens-lib :as ctob]
[app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.ds.layers.layer-button :refer [layer-button*]]
[app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]]
[rumext.v2 :as mf]))
@ -44,18 +44,36 @@
on-token-pill-click
on-pill-context-menu
on-node-context-menu]}]
(let [full-path (str (name type) "." (:path node))
is-folder-expanded (not (contains? (set (or folded-token-paths [])) full-path))
swap-folder-expanded (mf/use-fn
(mf/deps full-path)
(fn []
(st/emit! (dwtl/toggle-token-path full-path))))
(let [full-path (str (name type) "." (:path node))
is-folder-expanded (not (contains? (set (or folded-token-paths [])) full-path))
children (:children node)
sorted-children
(mf/with-memo [children]
(let [[leafs groups]
(reduce (fn [[l g] item]
(if (:leaf item)
[(conj l item) g]
[l (conj g item)]))
[[] []]
children)
sorted-leafs (d/natural-sort-by :name leafs)
sorted-groups (d/natural-sort-by :name groups)]
(concat sorted-leafs sorted-groups)))
swap-folder-expanded
(mf/use-fn
(mf/deps full-path)
(fn []
(st/emit! (dwtl/toggle-token-path full-path))))
node-context-menu-prep
(mf/use-fn
(mf/deps on-node-context-menu node)
(fn [event]
(when on-node-context-menu
(on-node-context-menu event node))))]
node-context-menu-prep (mf/use-fn
(mf/deps on-node-context-menu node)
(fn [event]
(when on-node-context-menu
(on-node-context-menu event node))))]
[:li {:class (stl/css :folder-node)}
[:> layer-button* {:label (:name node)
:expanded is-folder-expanded
@ -65,36 +83,34 @@
:on-toggle-expand swap-folder-expanded
:on-context-menu node-context-menu-prep}]
(when is-folder-expanded
(let [children (:children node)]
[:div {:class (stl/css :folder-children-wrapper)
:id (str "folder-children-" (:path node))}
(when (seq children)
(let [sorted-children (d/natural-sort-by :name children)]
(for [child sorted-children]
(if (not (:leaf child))
[:ul {:class (stl/css :node-parent)
:key (:path child)}
[:> folder-node* {:type type
:node child
:folded-token-paths folded-token-paths
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens active-theme-tokens
:on-token-pill-click on-token-pill-click
:on-pill-context-menu on-pill-context-menu
:on-node-context-menu on-node-context-menu
:tokens-lib tokens-lib
:selected-token-set-id selected-token-set-id}]]
(let [id (:id (:leaf child))
token (ctob/get-token tokens-lib selected-token-set-id id)]
[:> token-pill*
{:key id
:token token
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens active-theme-tokens
:on-click on-token-pill-click
:on-context-menu on-pill-context-menu}])))))]))]))
[:div {:class (stl/css :folder-children-wrapper)
:id (str "folder-children-" (:path node))}
(when (seq children)
(for [child sorted-children]
(if (not (:leaf child))
[:ul {:class (stl/css :node-parent)
:key (:path child)}
[:> folder-node* {:type type
:node child
:folded-token-paths folded-token-paths
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens active-theme-tokens
:on-token-pill-click on-token-pill-click
:on-pill-context-menu on-pill-context-menu
:on-node-context-menu on-node-context-menu
:tokens-lib tokens-lib
:selected-token-set-id selected-token-set-id}]]
(let [id (:id (:leaf child))
token (ctob/get-token tokens-lib selected-token-set-id id)]
[:> token-pill*
{:key id
:token token
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens active-theme-tokens
:on-click on-token-pill-click
:on-context-menu on-pill-context-menu}]))))])]))
(def ^:private schema:token-tree
[:map
@ -124,19 +140,29 @@
on-pill-context-menu
on-node-context-menu]}]
(let [separator "."
tree (mf/use-memo
(mf/deps tokens)
(fn []
(->> (cpn/build-tree-root tokens separator)
(d/natural-sort-by :name))))
can-edit? (:can-edit (deref refs/permissions))
raw-tree (mf/with-memo [tokens]
(cpn/build-tree-root tokens separator))
permissions (mf/use-ctx ctx/permissions)
can-edit? (:can-edit permissions)
on-node-context-menu (mf/use-fn
(mf/deps can-edit? on-node-context-menu)
(fn [event node]
(when can-edit?
(on-node-context-menu event node))))]
(on-node-context-menu event node))))
ordered-nodes (mf/with-memo [raw-tree]
(let [[leafs groups]
(reduce (fn [[l g] item]
(if (:leaf item)
[(conj l item) g]
[l (conj g item)]))
[[] []]
raw-tree)
sorted-leafs (d/natural-sort-by :name leafs)
sorted-groups (d/natural-sort-by :name groups)]
(concat sorted-leafs sorted-groups)))]
[:div {:class (stl/css :token-tree-wrapper)}
(for [node tree]
(for [node ordered-nodes]
(if (:leaf node)
(let [token (ctob/get-token tokens-lib selected-token-set-id (get-in node [:leaf :id]))]
[:> token-pill*