Context click should add a class to tree item (#3619)

* add ability to pass onDestroy callback to menu api show

* fix lint issues

* remove fdescribe

* rename event and variables to contextClickActive

* rename variable to active

* Sanding and polishing CSS related to context-click visual feedback

- Changed CSS `border` approach to `box-shadow` to avoid jumping;
- Removed unwired code and CSS styles for Folder grid and list views;

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/api/menu/MenuAPI.js

@@ -38,7 +38,7 @@ class MenuAPI {
         this._showObjectMenu = this._showObjectMenu.bind(this);
     }
 
-    showMenu(x, y, actions) {
+    showMenu(x, y, actions, onDestroy) {
         if (this.menuComponent) {
             this.menuComponent.dismiss();
         }
@@ -46,7 +46,8 @@ class MenuAPI {
         let options = {
             x,
             y,
-            actions
+            actions,
+            onDestroy
         };
 
         this.menuComponent = new Menu(options);

src/api/menu/MenuAPISpec.js

@@ -31,6 +31,7 @@ describe ('The Menu API', () => {
     let x;
     let y;
     let result;
+    let onDestroy;
 
     beforeEach(() => {
         openmct = createOpenMct();
@@ -73,7 +74,9 @@ describe ('The Menu API', () => {
             let vueComponent;
 
             beforeEach(() => {
-                menuAPI.showMenu(x, y, actionsArray);
+                onDestroy = jasmine.createSpy('onDestroy');
+
+                menuAPI.showMenu(x, y, actionsArray, onDestroy);
                 vueComponent = menuAPI.menuComponent.component;
                 menuComponent = document.querySelector(".c-menu");
 
@@ -120,6 +123,12 @@ describe ('The Menu API', () => {
 
                 expect(vueComponent.$destroy).toHaveBeenCalled();
             });
+
+            it("invokes the onDestroy callback if passed in", () => {
+                document.body.click();
+
+                expect(onDestroy).toHaveBeenCalled();
+            });
         });
     });
 });

src/plugins/folderView/components/ListItem.vue

@@ -1,7 +1,9 @@
 <template>
 <tr
     class="c-list-item"
-    :class="{ 'is-alias': item.isAlias === true }"
+    :class="{
+        'is-alias': item.isAlias === true
+    }"
     @click="navigate"
 >
     <td class="c-list-item__name">

src/ui/layout/mct-tree.scss

@@ -95,6 +95,10 @@
                 color: $colorItemTreeSelectedFg;
             }
         }
+
+        &.is-context-clicked {
+            box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
+        }
     }
 }
 

src/ui/layout/tree-item.vue

@@ -11,7 +11,8 @@
         class="c-tree__item"
         :class="{
             'is-alias': isAlias,
-            'is-navigated-object': navigated
+            'is-navigated-object': navigated,
+            'is-context-clicked': contextClickActive
         }"
     >
         <view-control
@@ -26,6 +27,7 @@
             :object-path="node.objectPath"
             :navigate-to-path="navigationPath"
             :style="{ paddingLeft: leftOffset }"
+            @context-click-active="setContextClickActive"
         />
         <view-control
             v-model="expanded"
@@ -91,7 +93,8 @@ export default {
         return {
             hasComposition: false,
             navigated: this.isNavigated(),
-            expanded: false
+            expanded: false,
+            contextClickActive: false
         };
     },
     computed: {
@@ -142,6 +145,9 @@ export default {
         },
         resetTreeHere() {
             this.$emit('resetTree', this.node);
+        },
+        setContextClickActive(active) {
+            this.contextClickActive = active;
         }
     }
 };

src/ui/mixins/context-menu-gesture.js

@@ -8,6 +8,11 @@ export default {
             }
         }
     },
+    data() {
+        return {
+            contextClickActive: false
+        };
+    },
     mounted() {
         //TODO: touch support
         this.$el.addEventListener('contextmenu', this.showContextMenu);
@@ -35,7 +40,13 @@ export default {
             let actions = actionsCollection.getVisibleActions();
             let sortedActions = this.openmct.actions._groupAndSortActions(actions);
 
-            this.openmct.menus.showMenu(event.clientX, event.clientY, sortedActions);
+            this.openmct.menus.showMenu(event.clientX, event.clientY, sortedActions, this.onContextMenuDestroyed);
+            this.contextClickActive = true;
+            this.$emit('context-click-active', true);
+        },
+        onContextMenuDestroyed() {
+            this.contextClickActive = false;
+            this.$emit('context-click-active', false);
         }
     }
 };