bulk-operations fixed moveItem popup Three, fixed multiSelect with Shift from bottom to top

This commit is contained in:
Milos Holba
2020-11-30 18:49:54 +01:00
parent 58f7479380
commit 8561556f5c
10 changed files with 138 additions and 179 deletions
@@ -466,7 +466,7 @@ export default {
},
deleteItem() {
// Dispatch remove item
// If is contet menu open on non selected item delete this single item
// If is context menu open on non selected item delete this single item
if(!this.fileInfoDetail.includes(this.item)){
this.$store.dispatch('deleteItem', this.item)
}
@@ -135,6 +135,8 @@
return this.data.length == 0
},
dragedItems() {
//Set opacity for dragged items
if(!this.fileInfoDetail.includes(this.draggingId)){
return [this.draggingId]
}
@@ -188,6 +190,7 @@
//Prevent move selected folder to folder if in beteewn selected folders
if(this.fileInfoDetail.find(item => item === data)) return
// Move folder to new parent
//Move selected items to folder
@@ -215,9 +218,8 @@
events.$emit('contextMenu:show', event, item)
},
filesContainerClick() {
// Deselect clicked item
events.$emit('fileItem:deselect')
// Deselect itms clicked by outside
this.$store.commit('CLEAR_FILEINFO_DETAIL')
// Hide context menu if is opened
events.$emit('contextMenu:hide')
@@ -251,11 +253,6 @@
if (container) container.scrollTop = 0
})
// On items delete
events.$on('items:delete', () => {
this.$store.dispatch('deleteItem')
})
}
}
</script>
@@ -11,8 +11,7 @@
@dragstart="$emit('dragstart')"
@drop="
drop()
area = false
"
area = false"
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item"
@@ -197,19 +196,19 @@
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
//Shift selecting from top to bottom
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
//Shift selecting from bottom to top
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
for(let i=lastItem ; i>=clickedItem; i-- ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
@@ -290,16 +289,10 @@
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('fileItem:deselect', () => {
// Deselect file
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
// Change item name
events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name
})
// Change item name
events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name
})
}
}
</script>
@@ -309,20 +302,20 @@
@import '@assets/vue-file-manager/_mixins';
.check-select {
margin-right: 10px;
margin-left: 3px;
position: absolute;
top: -10px;
z-index: 5;
left: 0px;
}
margin-right: 10px;
margin-left: 3px;
position: absolute;
top: -10px;
z-index: 5;
left: 0px;
}
.check-select-folder {
margin-right: 10px;
margin-left: 3px;
position: absolute;
top: 8px;
z-index: 5;
left: 10px;
margin-right: 10px;
margin-left: 3px;
position: absolute;
top: 8px;
z-index: 5;
left: 10px;
}
.select-box {
width: 20px;
@@ -9,14 +9,13 @@
@dragstart="$emit('dragstart')"
@drop="
drop()
area = false
"
area = false"
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item"
:class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }"
>
<!-- MultiSelecting for the mobile version -->
<div class="check-select" v-if="mobileMultiSelect">
<div class="select-box" :class="{'select-box-active' : isClicked } ">
<CheckIcon v-if="isClicked" class="icon" size="17"/>
@@ -170,6 +169,7 @@ export default {
},
clickedItem(e) {
events.$emit('contextMenu:hide')
if(!this.$isMobile()) {
if( (e.ctrlKey || e.metaKey ) && !e.shiftKey) {
@@ -190,18 +190,19 @@ export default {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
//Shift selecting from top to bottom
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
//Shift selecting from bottom to top
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
for(let i=lastItem ; i>=clickedItem; i-- ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
@@ -269,18 +270,12 @@ export default {
this.itemName = this.data.name
events.$on('mobileSelecting-start', () => {
this.mobileMultiSelect = true
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.mobileMultiSelect = true
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('mobileSelecting-stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('fileItem:deselect', () => {
// Deselect file
if(this.fileInfoDetail.length > 0)
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
@@ -78,6 +78,7 @@ export default {
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
},
deleteItem() {
//Delete items
this.$store.dispatch("deleteItem");
},
},