diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs index e13527db0..83ace95ba 100644 --- a/frontend/src/app/main/data/tokens.cljs +++ b/frontend/src/app/main/data/tokens.cljs @@ -309,7 +309,7 @@ ;; Token Context Menu Functions ------------------------------------------------- (defn show-token-context-menu - [{:keys [position token-id] :as params}] + [{:keys [position _token-id] :as params}] (dm/assert! (gpt/point? position)) (ptk/reify ::show-token-context-menu ptk/UpdateEvent @@ -321,3 +321,17 @@ ptk/UpdateEvent (update [_ state] (assoc-in state [:workspace-local :token-context-menu] nil)))) + +(defn show-token-set-context-menu + [{:keys [position _token-set-id] :as params}] + (dm/assert! (gpt/point? position)) + (ptk/reify ::show-token-set-context-menu + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :token-set-context-menu] params)))) + +(def hide-token-set-context-menu + (ptk/reify ::hide-token-set-context-menu + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :token-set-context-menu] nil)))) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 184c38cce..7b2e66f55 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -11,11 +11,11 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.icons :as i] + [app.main.ui.workspace.tokens.sets-context :as sets-context] [app.util.dom :as dom] [app.util.keyboard :as kbd] [cuerdas.core :as str] - [rumext.v2 :as mf] - [app.main.ui.workspace.tokens.sets-context :as sets-context])) + [rumext.v2 :as mf])) (def ^:private chevron-icon (i/icon-xref :arrow (stl/css :chevron-icon))) @@ -83,10 +83,21 @@ (fn [event] (dom/stop-propagation event) (when-not editing-node? - (on-select id))))] + (on-select id)))) + on-context-menu (mf/use-callback + (mf/deps editing-node? id) + (fn [event] + (dom/prevent-default event) + (dom/stop-propagation event) + (when-not editing-node? + (st/emit! + (wdt/show-token-set-context-menu + {:position (dom/get-client-position event) + :token-set-id id})))))] [:div {:class (stl/css :set-item-container) :on-click on-select - :on-double-click #(on-edit id)} + :on-double-click #(on-edit id) + :on-context-menu on-context-menu} [:div {:class (stl/css-case :set-item-group group? :set-item-set set? :selected-set selected?)} diff --git a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs new file mode 100644 index 000000000..f77f5b022 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs @@ -0,0 +1,56 @@ +(ns app.main.ui.workspace.tokens.sets-context-menu + (:require-macros [app.main.style :as stl]) + (:require + [app.main.data.tokens :as wdt] + [app.main.refs :as refs] + [app.main.store :as st] + [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.workspace.tokens.sets-context :as sets-context] + [app.util.dom :as dom] + [okulary.core :as l] + [rumext.v2 :as mf])) + +(def sets-menu-ref + (l/derived :token-set-context-menu refs/workspace-local)) + +(defn- prevent-default + [event] + (dom/prevent-default event) + (dom/stop-propagation event)) + +(mf/defc menu-entry + {::mf/props :obj} + [{:keys [title value on-click]}] + [:li + {:class (stl/css :context-menu-item) + :data-value value + :on-click on-click} + [:span {:class (stl/css :title)} title]]) + +(mf/defc menu + [{:keys [token-set-id]}] + (let [{:keys [on-edit]} (sets-context/use-context)] + [:ul {:class (stl/css :context-list)} + [:& menu-entry {:title "Rename" :on-click #(on-edit token-set-id)}] + [:& menu-entry {:title "Delete" :on-click #(st/emit! (wdt/delete-token-set token-set-id))}]])) + +(mf/defc sets-context-menu + [] + (let [mdata (mf/deref sets-menu-ref) + top (+ (get-in mdata [:position :y]) 5) + left (+ (get-in mdata [:position :x]) 5) + width (mf/use-state 0) + dropdown-ref (mf/use-ref) + token-set-id (:token-set-id mdata)] + (mf/use-effect + (mf/deps mdata) + (fn [] + (when-let [node (mf/ref-val dropdown-ref)] + (reset! width (.-offsetWidth node))))) + [:& dropdown {:show (boolean mdata) + :on-close #(st/emit! wdt/hide-token-set-context-menu)} + [:div {:class (stl/css :token-set-context-menu) + :ref dropdown-ref + :style {:top top :left left} + :on-context-menu prevent-default} + [:& menu {:token-set-id token-set-id}]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.scss new file mode 100644 index 000000000..ccf1b7bea --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.scss @@ -0,0 +1,46 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.token-set-context-menu { + position: absolute; + z-index: $z-index-4; +} + +.context-list { + @include menuShadow; + display: grid; + width: $s-240; + padding: $s-4; + border-radius: $br-8; + border: $s-2 solid var(--panel-border-color); + background-color: var(--menu-background-color); + max-height: 100vh; + overflow-y: auto; + + li { + @include bodySmallTypography; + color: var(--menu-foreground-color); + } +} + +.context-menu-item { + display: flex; + align-items: center; + height: $s-28; + width: 100%; + padding: $s-6; + border-radius: $br-8; + cursor: pointer; + + &:hover { + background-color: var(--menu-background-color-hover); + .title { + color: var(--menu-foreground-color-hover); + } + } +} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 45a12a5cd..05a3c6435 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -23,6 +23,7 @@ [app.main.ui.workspace.tokens.core :as wtc] [app.main.ui.workspace.tokens.sets :refer [sets-list]] [app.main.ui.workspace.tokens.sets-context :as sets-context] + [app.main.ui.workspace.tokens.sets-context-menu :refer [sets-context-menu]] [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.theme-select :refer [theme-select]] [app.main.ui.workspace.tokens.token :as wtt] @@ -214,6 +215,7 @@ (let [open? (mf/use-state true) on-open (mf/use-fn #(reset! open? true))] [:& sets-context/provider {} + [:& sets-context-menu] [:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} [:& title-bar {:collapsable true