From 9cb7e09aef68d4f8fc37fa1db608293372ba18ec Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Sat, 23 Mar 2019 10:01:38 -0700
Subject: [PATCH] Better drag reordering affordance in Elements pool (#2326)

* Better drag reordering affordance in Elements pool

* add isDragging

* Better drag reordering affordance in Elements pool

* Only add dragend handler after drag starts
---
 src/ui/inspector/Elements.vue | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/ui/inspector/Elements.vue b/src/ui/inspector/Elements.vue
index 7acea28c27..49a3554f60 100644
--- a/src/ui/inspector/Elements.vue
+++ b/src/ui/inspector/Elements.vue
@@ -5,15 +5,18 @@
         @input="applySearch" 
         @clear="applySearch">
     </Search>
-    <div class="c-elements-pool__elements">
+    <div class="c-elements-pool__elements"
+        :class="{'is-dragging': isDragging}">
         <ul class="c-tree c-elements-pool__tree" id="inspector-elements-tree"
             v-if="elements.length > 0">
-            <li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
-                <div class="c-tree__item c-elements-pool__item">
+            <li :key="element.identifier.key" v-for="(element, index) in elements"
+                @drop="moveTo(index)"
+                @dragover="allowDrop">
+                <div class="c-tree__item c-elements-pool__item"
+                     draggable="true"
+                     @dragstart="moveFrom(index)">
                     <span class="c-elements-pool__grippy"
-                          v-if="elements.length > 1 && isEditing"
-                          draggable="true"
-                          @dragstart="moveFrom(index)">
+                          v-if="elements.length > 1 && isEditing">
                     </span>
                     <object-label :domainObject="element" :objectPath="[element, parentObject]"></object-label>
                 </div>
@@ -44,6 +47,9 @@
         &__elements {
             flex: 1 1 auto;
             overflow: auto;
+            &.is-dragging {
+                li { opacity: 0.2; }
+            }
         }
 
         &__grippy {
@@ -55,7 +61,7 @@
         }
     }
 
-    .js-last-place{
+    .js-last-place {
         height: 10px;
     }
 </style>
@@ -74,7 +80,8 @@ export default {
             elements: [],
             isEditing: this.openmct.editor.isEditing(),
             parentObject: undefined,
-            currentSearch: ''
+            currentSearch: '',
+            isDragging: false
         }
     },
     mounted() {
@@ -154,12 +161,19 @@ export default {
             this.composition.reorder(this.moveFromIndex, moveToIndex);
         },
         moveFrom(index){
+            this.isDragging = true;
             this.moveFromIndex = index;
+            document.addEventListener('dragend', this.hideDragStyling);
+        },
+        hideDragStyling() {
+            this.isDragging = false;
+            document.removeEventListener('dragend', this.hideDragStyling);
         }
     },
     destroyed() {
         this.openmct.editor.off('isEditing', this.setEditState);
         this.openmct.selection.off('change', this.showSelection);
+
         if (this.mutationUnobserver) {
             this.mutationUnobserver();
         }