From e148f7c96755aae137b25e995d51bcfb748f1e8a Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Thu, 8 Jan 2026 23:03:45 +0100 Subject: [PATCH] :sparkles: Remove tokens tree node --- .../app/main/ui/ds/layers/layer_button.cljs | 10 +++-- .../ui/workspace/tokens/management/group.cljs | 17 +++++++- .../tokens/management/token_tree.cljs | 41 +++++++++++++------ 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/main/ui/ds/layers/layer_button.cljs b/frontend/src/app/main/ui/ds/layers/layer_button.cljs index 759952c30a..dbdb6b74ad 100644 --- a/frontend/src/app/main/ui/ds/layers/layer_button.cljs +++ b/frontend/src/app/main/ui/ds/layers/layer_button.cljs @@ -8,7 +8,9 @@ (:require-macros [app.main.style :as stl]) (:require + [app.main.refs :as refs] [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] + [app.util.dom :as dom] [rumext.v2 :as mf])) (def ^:private schema:layer-button @@ -19,17 +21,19 @@ [:expandable {:optional true} :boolean] [:expanded {:optional true} :boolean] [:icon {:optional true} :string] - [:on-toggle-expand fn?]]) + [:on-toggle-expand {:optional true} fn?] + [:on-context-menu {:optional true} fn?]]) (mf/defc layer-button* {::mf/schema schema:layer-button} - [{:keys [label description class is-expandable expanded icon on-toggle-expand children] :rest props}] + [{:keys [label description class is-expandable expanded icon on-toggle-expand on-context-menu children] :rest props}] (let [button-props (mf/spread-props props {:class [class (stl/css-case :layer-button true :layer-button--expandable is-expandable :layer-button--expanded expanded)] :type "button" - :on-click on-toggle-expand})] + :on-click on-toggle-expand + :on-context-menu on-context-menu})] [:div {:class (stl/css :layer-button-wrapper)} [:> "button" button-props [:div {:class (stl/css :layer-button-content)} diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs index b3450e8665..e38ba1e3c4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs @@ -10,6 +10,7 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.pprint :as pp] [app.common.types.tokens-lib :as ctob] [app.main.data.modal :as modal] [app.main.data.workspace.tokens.application :as dwta] @@ -88,7 +89,7 @@ expandable? (d/nilv (seq tokens) false) - on-context-menu + on-pill-context-menu (mf/use-fn (fn [event token] (dom/prevent-default event) @@ -98,6 +99,17 @@ :errors (:errors token) :token-id (:id token)})))) + on-node-context-menu + (mf/use-fn + (fn [event node] + (dom/prevent-default event) + (pp/pprint node) + #_(st/emit! (dwtl/assign-token-context-menu + {:type :token + :position (dom/get-client-position event) + :errors (:errors token) + :token-id (:id token)})))) + on-toggle-open-click (mf/use-fn (mf/deps type expandable?) @@ -159,4 +171,5 @@ :selected-token-set-id selected-token-set-id :is-selected-inside-layout is-selected-inside-layout :on-token-pill-click on-token-pill-click - :on-context-menu on-context-menu}])])) + :on-pill-context-menu on-pill-context-menu + :on-node-context-menu on-node-context-menu}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs index e7da275b39..3377fc16f4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs @@ -10,9 +10,11 @@ [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.ds.layers.layer-button :refer [layer-button*]] [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]] + [app.util.dom :as dom] [rumext.v2 :as mf])) (def ^:private schema:folder-node @@ -26,7 +28,8 @@ [:selected-token-set-id {:optional true} :any] [:tokens-lib {:optional true} :any] [:on-token-pill-click {:optional true} fn?] - [:on-context-menu {:optional true} fn?]]) + [:on-pill-context-menu {:optional true} fn?] + [:on-node-context-menu {:optional true} fn?]]) (mf/defc folder-node* {::mf/schema schema:folder-node} @@ -39,22 +42,28 @@ selected-token-set-id tokens-lib on-token-pill-click - on-context-menu]}] + on-pill-context-menu + on-node-context-menu]}] (let [full-path (str (name type) "." (:path node)) is-folder-expanded (contains? (set (or unfolded-token-paths [])) full-path) - swap-folder-expanded (mf/use-fn (mf/deps (:path node) type) (fn [] (let [path (str (name type) "." (:path node))] - (st/emit! (dwtl/toggle-token-path path)))))] + (st/emit! (dwtl/toggle-token-path 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))))] [:li {:class (stl/css :folder-node)} [:> layer-button* {:label (:name node) :expanded is-folder-expanded :aria-expanded is-folder-expanded :aria-controls (str "folder-children-" (:path node)) :is-expandable (not (:leaf node)) - :on-toggle-expand swap-folder-expanded}] + :on-toggle-expand swap-folder-expanded + :on-context-menu node-context-menu-prep}] (when is-folder-expanded (let [children-fn (:children-fn node)] [:div {:class (stl/css :folder-children-wrapper) @@ -72,7 +81,7 @@ :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens active-theme-tokens :on-token-pill-click on-token-pill-click - :on-context-menu on-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)) @@ -84,7 +93,7 @@ :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens active-theme-tokens :on-click on-token-pill-click - :on-context-menu on-context-menu}])))))]))])) + :on-context-menu on-pill-context-menu}])))))]))])) (def ^:private schema:token-tree [:map @@ -97,7 +106,8 @@ [:selected-token-set-id {:optional true} :any] [:tokens-lib {:optional true} :any] [:on-token-pill-click {:optional true} fn?] - [:on-context-menu {:optional true} fn?]]) + [:on-pill-context-menu {:optional true} fn?] + [:on-node-context-menu {:optional true} fn?]]) (mf/defc token-tree* {::mf/schema schema:token-tree} @@ -110,12 +120,19 @@ tokens-lib selected-token-set-id on-token-pill-click - on-context-menu]}] + on-pill-context-menu + on-node-context-menu]}] (let [separator "." tree (mf/use-memo (mf/deps tokens) (fn [] - (cpn/build-tree-root tokens separator)))] + (cpn/build-tree-root tokens separator))) + can-edit? (:can-edit (deref refs/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))))] [:div {:class (stl/css :token-tree-wrapper)} (for [node tree] (if (:leaf node) @@ -127,7 +144,7 @@ :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens active-theme-tokens :on-click on-token-pill-click - :on-context-menu on-context-menu}]) + :on-context-menu on-pill-context-menu}]) ;; Render segment folder [:ul {:class (stl/css :node-parent) :key (:path node)} @@ -138,6 +155,6 @@ :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens active-theme-tokens :on-token-pill-click on-token-pill-click - :on-context-menu on-context-menu + :on-node-context-menu on-node-context-menu :tokens-lib tokens-lib :selected-token-set-id selected-token-set-id}]]))]))