nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

file browser refactoring

Browse Source
This commit is contained in:
Čarodej
2021-10-28 09:18:55 +02:00
parent 3dfee77042
commit 240880e2ad
5 changed files with 73 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -1,94 +1,45 @@
<template>
<div
:class="{'is-offset': filesInQueueTotal > 0, 'is-dragging': isDragging }"
class="file-content md:w-full md:overflow-y-auto md:h-full"
id="file-content-id"
@drop.stop.prevent="dropUpload($event)"
:class="{'user-dropping-file': isDragging}"
class="file-content md:w-full md:overflow-y-auto md:h-full md:px-0 px-4"
@drop.stop.prevent="uploadDroppedItems($event)"
@keydown.delete="deleteItems"
@dragover="dragEnter"
@dragleave="dragLeave"
@dragover.prevent
tabindex="-1"
@click.self="filesContainerClick"
@click.self="deselect"
>
<!--Item previews list-->
<div v-if="isList" class="file-list-wrapper md:px-0 px-4">
<transition-group
name="file"
tag="section"
class="file-list"
:class="FilePreviewType"
>
<FileItemList
@dragstart="dragStart(item)"
@drop.stop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)"
:item="item"
v-for="item in entries"
:key="item.data.id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : ''"
/>
</transition-group>
</div>
<!--Item previews grid-->
<div v-if="isGrid" class="file-grid-wrapper">
<transition-group
name="file"
tag="section"
class="file-list"
:class="FilePreviewType"
>
<FileItemGrid
@dragstart="dragStart(item)"
@drop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)"
:item="item"
v-for="item in entries"
:key="item.data.id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
/>
</transition-group>
</div>
<FileItemList
@dragstart="dragStart(item)"
@drop.stop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)"
:class="draggedItems.includes(item) ? 'opacity-60' : ''"
v-for="item in entries"
:key="item.data.id"
:item="item"
/>
</div>
</template>
<script>
import FileItemList from '/resources/js/components/FilesView/FileItemList'
import FileItemGrid from '/resources/js/components/FilesView/FileItemGrid'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
export default {
name: 'FileBrowser',
components: {
FileItemList,
FileItemGrid,
},
computed: {
...mapGetters([
'filesInQueueTotal',
'isVisibleSidebar',
'FilePreviewType',
'currentFolder',
'clipboard',
'isLoading',
'entries'
]),
isGrid() {
return this.FilePreviewType === 'grid'
},
isList() {
return this.FilePreviewType === 'list'
},
isEmpty() {
return this.entries.length === 0
},
draggedItems() {
//Set opacity for dragged items
// Set opacity for dragged items
if (!this.clipboard.includes(this.draggingId)) {
return [this.draggingId]
}
@@ -110,9 +61,8 @@
this.$store.dispatch('deleteItem')
}
},
dropUpload(event) {
// Upload external file
this.$uploadExternalFiles(event, this.currentFolder.data.id)
uploadDroppedItems(event) {
this.$uploadDraggedFiles(event, this.currentFolder.data.id)
this.isDragging = false
},
@@ -131,6 +81,8 @@
// Store dragged folder
this.draggingId = data
// TODO: founded issue on firefox
},
dragFinish(data, event) {
@@ -138,26 +90,26 @@
// Prevent to drop on file or image
if (data.data.type !== 'folder' || this.draggingId === data) return
//Prevent move selected folder to folder if in beteewn selected folders
// Prevent move selected folder to folder if in between selected folders
if (this.clipboard.find(item => item === data && this.clipboard.length > 1)) return
//Move item if is not included in selected items
// Move item if is not included in selected items
if (!this.clipboard.includes(this.draggingId)) {
this.$store.dispatch('moveItem', {to_item: data, noSelectedItem: this.draggingId})
}
//Move selected items to folder
// Move selected items to folder
if (this.clipboard.length > 0 && this.clipboard.includes(this.draggingId)) {
this.$store.dispatch('moveItem', {to_item: data, noSelectedItem: null})
}
} else {
// Get id of current folder
// Get id from current folder
const id = data.data.type !== 'folder' ? this.currentFolder.data.id : data.data.id
// Upload external file
this.$uploadExternalFiles(event, id)
this.$uploadDraggedFiles(event, id)
}
this.isDragging = false
@@ -165,9 +117,7 @@
contextMenu(event, item) {
events.$emit('context-menu:show', event, item)
},
filesContainerClick() {
// Deselect items clicked by outside
deselect() {
this.$store.commit('CLIPBOARD_CLEAR')
}
},
@@ -179,119 +129,6 @@
this.draggingId = undefined
}, 10)
})
events.$on('fileItem:deselect', () => {
this.$store.commit('CLIPBOARD_CLEAR')
})
events.$on('scrollTop', () => {
// Scroll top
let container = document.getElementsByClassName(
'file-content'
)[0]
if (container)
container.scrollTop = 0
})
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.file-list {
.dragged {
/deep/ .is-dragenter {
border: 2px solid transparent;
}
}
}
.dragged {
opacity: 0.5;
}
#multi-selected {
position: fixed;
pointer-events: none;
z-index: 100;
}
.button-upload {
display: block;
text-align: center;
margin: 20px 0;
}
.mobile-search {
display: none;
margin-bottom: 10px;
margin-top: 10px;
}
.file-content {
&.is-dragging {
@include transform(scale(0.99));
}
}
.files-container {
.file-list {
&.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 180px);
justify-content: space-evenly;
}
}
}
// Transition
.file-move {
transition: transform 0.6s;
}
.file-enter-active {
transition: all 300ms ease;
}
.file-leave-active {
transition: all 0ms;
}
.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
{
opacity: 0;
transform: translateX(-20px);
}
@media only screen and (max-width: 960px) {
.mobile-search {
display: block;
}
}
@media only screen and (max-width: 690px) {
.files-container {
.file-list {
&.grid {
grid-template-columns: repeat(auto-fill, 120px);
}
}
}
.mobile-search {
margin-bottom: 0;
}
}
</style>

2
resources/js/helpers/functionHelpers.js vendored
View File

@@ -103,7 +103,7 @@ const FunctionHelpers = {
this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
}
Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
Vue.prototype.$uploadDraggedFiles = async function (event, parent_id) {
// Prevent submit empty files
if (event.dataTransfer.items.length === 0) return

1
resources/js/views/Platform.vue
View File

@@ -126,7 +126,6 @@
mounted() {
// TODO: new scaledown effect
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
}
}

1
resources/js/views/Shared.vue
View File

@@ -119,7 +119,6 @@
},
mounted() {
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
this.$store.dispatch('getShareDetail', this.$route.params.token)
.then(response => {