[Navigation Tree] Whole tree item clickable (#3638)

* passing click and context click on tree item down to object label, making the whole tree item interactive

* removed unnecessary code

* WIP: removing propagation prop from view control and just stopping all propagation

* capturing click on tree item and then calling the click handler on objectLabel, this prevents multiple events and handles all clicks in the tree-item

* removing unnecessary ref

* ignoring clicks for view control so it can handle them itself

* made view control class a constant

* replaced class-based checks with ref-based checks

* removing old leftover code

src/plugins/condition/components/inspector/ConditionSetDialogTreeItem.vue

@@ -31,7 +31,6 @@
             v-model="expanded"
             class="c-tree__item__view-control"
             :enabled="hasChildren"
-            :propagate="false"
         />
         <div class="c-tree__item__label c-object-label">
             <div

src/ui/components/viewControl.vue

@@ -22,10 +22,6 @@ export default {
             type: Boolean,
             default: false
         },
-        propagate: {
-            type: Boolean,
-            default: true
-        },
         controlClass: {
             type: String,
             default: 'c-disclosure-triangle'
@@ -33,10 +29,8 @@ export default {
     },
     methods: {
         handleClick(event) {
+            event.stopPropagation();
             this.$emit('input', !this.value);
-            if (!this.propagate) {
-                event.stopPropagation();
-            }
         }
     }
 };

src/ui/layout/tree-item.vue

@@ -1,6 +1,5 @@
 <template>
 <div
-    ref="me"
     :style="{
         'top': virtualScroll ? itemTop : 'auto',
         'position': virtualScroll ? 'absolute' : 'relative'
@@ -14,8 +13,11 @@
             'is-navigated-object': navigated,
             'is-context-clicked': contextClickActive
         }"
+        @click.capture="handleClick"
+        @contextmenu.capture="handleContextMenu"
     >
         <view-control
+            ref="navUp"
             v-model="expanded"
             class="c-tree__item__view-control"
             :control-class="'c-nav__up'"
@@ -23,6 +25,7 @@
             @input="resetTreeHere"
         />
         <object-label
+            ref="objectLabel"
             :domain-object="node.object"
             :object-path="node.objectPath"
             :navigate-to-path="navigationPath"
@@ -30,6 +33,7 @@
             @context-click-active="setContextClickActive"
         />
         <view-control
+            ref="navDown"
             v-model="expanded"
             class="c-tree__item__view-control"
             :control-class="'c-nav__down'"
@@ -137,6 +141,20 @@ export default {
         this.openmct.router.off('change:path', this.highlightIfNavigated);
     },
     methods: {
+        handleClick(event) {
+            // skip for navigation, let viewControl handle click
+            if ([this.$refs.navUp.$el, this.$refs.navDown.$el].includes(event.target)) {
+                return;
+            }
+
+            event.stopPropagation();
+
+            this.$refs.objectLabel.$el.click();
+        },
+        handleContextMenu(event) {
+            event.stopPropagation();
+            this.$refs.objectLabel.showContextMenu(event);
+        },
         isNavigated() {
             return this.navigationPath === this.openmct.router.currentLocation.path;
         },