ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-08 03:44:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better drag reordering affordance in Elements pool (#2326)

Browse Source 
* Better drag reordering affordance in Elements pool

* add isDragging

* Better drag reordering affordance in Elements pool

* Only add dragend handler after drag starts
This commit is contained in:
Charles Hacskaylo 2019-03-23 10:01:38 -07:00 committed by Andrew Henry
parent 4111c12895
commit 9cb7e09aef
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/ui/inspector/Elements.vue
View File

@ -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();
}