Merge pull request #276 from tokens-studio/token-sets-context-menu

Token Sets & Themes: Sets context menu

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))))

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?)}

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}]]]))

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);
+    }
+  }
+}

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