diff --git a/frontend/src/components/files/Listing.vue b/frontend/src/components/files/Listing.vue index 6a4eefdb..1d2bf9e8 100644 --- a/frontend/src/components/files/Listing.vue +++ b/frontend/src/components/files/Listing.vue @@ -8,9 +8,7 @@
+ :class="user.viewMode">
@@ -99,7 +97,8 @@ export default { components: { Item }, data: function () { return { - showLimit: 50 + showLimit: 50, + dragCounter: 0 } }, computed: { @@ -171,6 +170,8 @@ export default { window.addEventListener('resize', this.resizeEvent) window.addEventListener('scroll', this.scrollEvent) document.addEventListener('dragover', this.preventDefault) + document.addEventListener('dragenter', this.dragEnter) + document.addEventListener('dragleave', this.dragLeave) document.addEventListener('drop', this.drop) }, beforeDestroy () { @@ -179,6 +180,8 @@ export default { window.removeEventListener('resize', this.resizeEvent) window.removeEventListener('scroll', this.scrollEvent) document.removeEventListener('dragover', this.preventDefault) + document.removeEventListener('dragenter', this.dragEnter) + document.removeEventListener('dragleave', this.dragLeave) document.removeEventListener('drop', this.drop) }, methods: { @@ -326,6 +329,8 @@ export default { } }, dragEnter () { + this.dragCounter++ + // When the user starts dragging an item, put every // file on the listing with 50% opacity. let items = document.getElementsByClassName('item') @@ -334,11 +339,16 @@ export default { file.style.opacity = 0.5 }) }, - dragEnd () { - this.resetOpacity() + dragLeave () { + this.dragCounter-- + + if (this.dragCounter == 0) { + this.resetOpacity() + } }, drop: async function (event) { event.preventDefault() + this.dragCounter = 0 this.resetOpacity() let dt = event.dataTransfer