From e5a7f87d1c47060bbf40dbec091511391c31a2ae Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 25 Apr 2024 19:00:00 +0200 Subject: [PATCH 1/2] Sort token groups --- .../app/main/ui/workspace/tokens/sidebar.cljs | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index cf16a3fd5..8cf1a2568 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -15,7 +15,7 @@ [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [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] [rumext.v2 :as mf])) @@ -87,23 +87,38 @@ :highlighted? (tokens-applied? token selected-shapes attributes) :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 [_props] (let [file (mf/deref refs/workspace-file) current-page-id (:current-page-id @st/state) workspace-data (mf/deref refs/workspace-data) tokens (get workspace-data :tokens) - tokens-by-group (->> (vals tokens) - (group-by :type)) + token-groups (mf/with-memo [tokens] + (sorted-token-groups tokens)) selected-shape-ids (mf/deref refs/selected-shapes) selected-shapes (workspace-shapes workspace-data current-page-id selected-shape-ids)] - (js/console.log "tokens" tokens) [:article [:& search-bar {:placeholder "Filter" :on-change js/console.log}] [:div.assets-bar - (for [[token-key token-type-props] token-types - :let [tokens (or (get tokens-by-group token-key) [])]] + (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups) + (:empty token-groups))] [:& token-component {:key token-key :type token-key :file file From 69ed15e7891f8bb9b0e6ffefbddd4bd5d529b475 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 25 Apr 2024 19:00:00 +0200 Subject: [PATCH 2/2] Remove search bar --- frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 8cf1a2568..46039a37d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -114,8 +114,6 @@ selected-shape-ids (mf/deref refs/selected-shapes) selected-shapes (workspace-shapes workspace-data current-page-id selected-shape-ids)] [:article - [:& search-bar {:placeholder "Filter" - :on-change js/console.log}] [:div.assets-bar (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups) (:empty token-groups))]