Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

Merge pull request #74 from tokens-studio/70-sort-sections-by-tokens

Browse source 
Sort token groups
This commit is contained in:
Florian Schrödl 2024-05-08 14:29:15 +02:00 • committed by GitHub
commit 68a201374c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,7 +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.common :refer [workspace-shapes]] [app.main.ui.workspace.tokens.common :refer [workspace-shapes]]
[app.main.ui.workspace.tokens.core :refer [token-types tokens-applied?]] [app.main.ui.workspace.tokens.core :refer [tokens-applied?] :as wtc]
[app.util.dom :as dom] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -89,23 +89,36 @@
:highlighted? (tokens-applied? token selected-shapes attributes) :highlighted? (tokens-applied? token selected-shapes attributes)
:on-click #(on-token-pill-click % token)}])]])]])) :on-click #(on-token-pill-click % token)}])]])]]))
(defn sorted-token-groups
"Separate token-types into groups of `:empty` or `:filled` depending if tokens exist for that type.
Sort each group alphabetically (by their `:token-key`)."
[tokens]
(let [tokens-by-group (->> (vals tokens)
(group-by :type))
{:keys [empty filled]} (->> wtc/token-types
(map (fn [[token-key token-type-props]]
{:token-key token-key
:token-type-props token-type-props
:tokens (get tokens-by-group token-key [])}))
(group-by (fn [{:keys [tokens]}]
(if (empty? tokens) :empty :filled))))]
{:empty (sort-by :token-key empty)
:filled (sort-by :token-key filled)}))
(mf/defc tokens-explorer (mf/defc tokens-explorer
[_props] [_props]
(let [file (mf/deref refs/workspace-file) (let [file (mf/deref refs/workspace-file)
current-page-id (:current-page-id @st/state) current-page-id (:current-page-id @st/state)
workspace-data (mf/deref refs/workspace-data) workspace-data (mf/deref refs/workspace-data)
tokens (get workspace-data :tokens) tokens (get workspace-data :tokens)
tokens-by-group (->> (vals tokens) token-groups (mf/with-memo [tokens]
(group-by :type)) (sorted-token-groups tokens))
selected-shape-ids (mf/deref refs/selected-shapes) selected-shape-ids (mf/deref refs/selected-shapes)
selected-shapes (workspace-shapes workspace-data current-page-id selected-shape-ids)] selected-shapes (workspace-shapes workspace-data current-page-id selected-shape-ids)]
(js/console.log "tokens" tokens)
[:article [:article
[:& search-bar {:placeholder "Filter"
:on-change js/console.log}]
[:div.assets-bar [:div.assets-bar
(for [[token-key token-type-props] token-types (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups)
:let [tokens (or (get tokens-by-group token-key) [])]] (:empty token-groups))]
[:& token-component {:key token-key [:& token-component {:key token-key
:type token-key :type token-key
:file file :file file