bulk-operations v0.1 add the Drag & Drop UI Ghost , styled scrollbar

resources/js/App.vue

@@ -28,6 +28,8 @@
             <!-- Mobile Menu for Multiselected items -->
             <MobileMultiSelectMenu/>
 
+            <MultiSelected :draged-ghost="draged" :draged-item="dragedItem" v-show="draged" id="multi-select-ui"/>
+
             <!--Mobile Menu-->
             <MobileMenu/>
 
@@ -58,6 +60,7 @@
     import FileFullPreview from '@/components/FilesView/FileFullPreview'
     import MobileNavigation from '@/components/Others/MobileNavigation'
     import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
+    import MultiSelected from '@/components/FilesView/MultiSelected'
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import ShareCreate from '@/components/Others/ShareCreate'
     import Confirm from '@/components/Others/Popup/Confirm'
@@ -78,6 +81,7 @@
             MobileNavigation,
             CookieDisclaimer,
             FileFullPreview,
+            MultiSelected,
             ToastrWrapper,
             ShareCreate,
             RenameItem,
@@ -123,6 +127,8 @@
         data() {
             return {
                 isScaledDown: false,
+                draged: false,
+                dragedItem: undefined
             }
         },
         beforeMount() {
@@ -152,11 +158,28 @@
             }
         },
         mounted() {
+            // Handle default scrollbar for the macOS
+            if (!navigator.userAgent.indexOf('Mac OS X') != -1) {
+               let body = document.body
+               body.classList.add('scroll-bar')
+            }
+
             // Handle mobile navigation scale animation
             events.$on('show:mobile-navigation', () => this.isScaledDown = true)
             events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
             events.$on('mobileMenu:show', () => this.isScaledDown = true)
             events.$on('fileItem:deselect', () => this.isScaledDown = false)
+
+            // Hnadle Drag & Drop Ghost show
+            events.$on('dragstart', (data) => {
+                this.dragedItem = data
+                setTimeout(() => {
+                    this.draged = true
+                }, 50);
+             })
+            events.$on('drop', () => {
+                this.draged = false
+            })
         }
     }
 </script>

resources/js/components/FilesView/FileBrowser.vue

@@ -29,7 +29,6 @@
                         :class="FilePreviewType"
                 >
                     <FileItemList
-                            @drag.native="mousePosition"
                             @dragstart="dragStart(item)"
                             @drop.stop.native.prevent="dragFinish(item, $event)"
                             @contextmenu.native.prevent="contextMenu($event, item)"
@@ -82,7 +81,6 @@
             <!--If file info panel empty show message-->
             <EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
         </div>
-            <MultiSelected @click.prevent="" :clone-element="dragInProgress" :style="{ top: positionY + 'px', left: positionX + 'px' }" id="multi-selected" v-if="dragInProgress && this.fileInfoDetail.length > 1" />
     </div>
 </template>
 
@@ -138,24 +136,9 @@
                 draggingId: undefined,
                 isDragging: false,
                 mobileMultiSelect: false,
-                dragInProgress:false,
-                positionY:undefined,
-                positionX:undefined
             }
         },
         methods: {
-            mousePosition() {
-               let contentLeft = document.getElementById('file-content-id').getBoundingClientRect().left -15
-                
-                if(event.clientX  > contentLeft ) {
-                this.positionY = event.clientY -85
-                this.positionX = event.clientX -350
-                }else if (event.clientX < contentLeft){
-                this.positionY = event.clientY -15
-                this.positionX = event.clientX -30
-                }
-                // console.log(event.clientX, contentLeft)
-            },
             dropUpload(event) {
                 // Upload external file
                 this.$uploadExternalFiles(event, this.currentFolder.unique_id)
@@ -171,25 +154,8 @@
             dragStart(data) {
                 let img = document.createElement('img')
                 img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-<<<<<<< HEAD
                 event.dataTransfer.setDragImage(img, 0, 0)
 
-                this.dragInProgress = true
-=======
-
-                event.dataTransfer.setDragImage(img, 0, 0)
-               
-               /*let elementClone = event.target.cloneNode(true)
-               elementClone.className = 'draged-clone'
-               console.log(elementClone)*/
-            //    elementClone.style.backgroundColor  = "red"  
-                // let element = document.getElementsByClassName('file-item')
-                // element.style.display = "none"
-                // var crt = this.cloneNode(true);
-                // crt.style.backgroundColor = "red";
-                // this.style.display = "none"
->>>>>>> 65f7855703c7a163dc2bf3cc05b23469d76d7453
-
                 events.$emit('dragstart', data)
 
                 // Store dragged folder
@@ -197,7 +163,6 @@
             },
             dragFinish(data, event) {
 
-                this.dragInProgress = false
                 if (event.dataTransfer.items.length == 0) {
                    
                     // Prevent to drop on file or image
@@ -250,8 +215,7 @@
             })
 
             events.$on('drop', () => {
-                this.isDragging = false,
-                this.dragInProgress = false
+                this.isDragging = false
             })
 
             events.$on('fileItem:deselect', () =>

resources/js/components/FilesView/MultiSelected.vue

@@ -1,12 +1,24 @@
 <template>
-    <div :class="[this.moveItem ? 'move-item'  : 'wrapper' , this.cloneElement ? 'clone' : '']">
+    <div :class="[this.moveItem ? 'move-item'  : 'wrapper' , this.dragedGhost ? 'ghost' : '']">
         <div class="icon-wrapper">   
             <CheckSquareIcon class="icon" size="21"/>
         </div>
-        <div class="text">
+        <!-- Multi select for the move item popup and file info -->
+        <div class="text" v-if="!this.dragedGhost">
             <span class="title">{{ $t('file_detail.selected_multiple') }}</span>
             <span class="count">{{this.fileInfoDetail.length}}  {{ $tc('file_detail.items', this.fileInfoDetail.length) }}</span>
         </div>
+        <!-- Multi select for the Drag & Drop -->
+        <div class="text" v-if="this.dragedGhost">
+            <div v-if="this.fileInfoDetail.length > 1 && !noSelectedItem">
+                <span class="title">{{ $t('file_detail.selected_multiple') }}</span>
+                <span class="count">{{this.fileInfoDetail.length}}  {{ $tc('file_detail.items', this.fileInfoDetail.length) }}</span>
+            </div>
+
+            <div v-if="this.fileInfoDetail.length < 2 || noSelectedItem">
+                <span class="title">{{ this.dragedItem.name }}</span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -16,10 +28,14 @@ import {mapGetters} from 'vuex'
 
     export default {
         name:'MultiSelected',
-        props: ['moveItem' , 'cloneElement'],
+        props: ['moveItem' , 'dragedGhost' , 'dragedItem'],
         components: {CheckSquareIcon},
         computed: {
-            ...mapGetters(['fileInfoDetail'])
+            ...mapGetters(['fileInfoDetail']),
+            // If the draged item is not in selected items
+            noSelectedItem() {
+                return  !this.fileInfoDetail.includes(this.dragedItem)
+            }
         },
         
     }
@@ -28,8 +44,19 @@ import {mapGetters} from 'vuex'
 <style lang="scss" scoped>
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
-.clone {
-    position: relative;
+.ghost {
+    // width: 200px !important;
+    max-width: 300px;
+    min-width: 250px;
+    position: fixed;
+    z-index: 10;
+    pointer-events: none;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 5px 10px -6px rgba(26, 36, 55, 0.15);
+    background:$light_background;
+    
+   
 }
 
 .wrapper {
@@ -131,5 +158,8 @@ import {mapGetters} from 'vuex'
             }
         }      
     }
+    .ghost {
+        background: $dark_mode_foreground;
+    }
 }
 </style>

resources/js/main.js

@@ -97,3 +97,10 @@ var vueFileManager = new Vue({
   },
   render: (h) => h(App),
 }).$mount("#app");
+
+document.addEventListener('drag', (event) => {
+  let multiSelect = document.getElementById('multi-select-ui')
+  multiSelect.style.top = event.clientY +25 + 'px'
+  multiSelect.style.left = event.clientX - 50 + 'px'
+  
+},false)