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

Admin & User account frontend consolidation

Browse Source
This commit is contained in:
Peter Papp
2021-03-15 16:56:26 +01:00
parent ba902a30b3
commit 803cc089bd
57 changed files with 472 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,10 +8,10 @@
tabindex="-1"
>
<div
class="files-container"
ref="fileContainer"
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() , 'mobile-multi-select' : mobileMultiSelect}"
@click.self="filesContainerClick"
class="files-container"
ref="fileContainer"
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() , 'mobile-multi-select' : mobileMultiSelect}"
@click.self="filesContainerClick"
>
<!--MobileToolbar-->
<MobileToolbar />
@@ -25,20 +25,20 @@
<!--Item previews list-->
<div v-if="isList" class="file-list-wrapper">
<transition-group
name="file"
tag="section"
class="file-list"
:class="FilePreviewType"
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 data"
:key="item.unique_id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
@dragstart="dragStart(item)"
@drop.stop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)"
:item="item"
v-for="item in data"
:key="item.id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
/>
</transition-group>
</div>
@@ -46,47 +46,47 @@
<!--Item previews grid-->
<div v-if="isGrid" class="file-grid-wrapper">
<transition-group
name="file"
tag="section"
class="file-list"
:class="FilePreviewType"
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 data"
:key="item.unique_id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
@dragstart="dragStart(item)"
@drop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)"
:item="item"
v-for="item in data"
:key="item.id"
class="file-item"
:class="draggedItems.includes(item) ? 'dragged' : '' "
/>
</transition-group>
</div>
<!--Show empty page if folder is empty-->
<EmptyPage v-if="! isSearching"/>
<EmptyPage v-if="! isSearching" />
<!--Show empty page if no search results-->
<EmptyMessage
v-if="isSearching && isEmpty"
:message="$t('messages.nothing_was_found')"
icon="eye-slash"
v-if="isSearching && isEmpty"
:message="$t('messages.nothing_was_found')"
icon="eye-slash"
/>
</div>
<!--File Info Panel-->
<div v-if="! $isMinimalScale()" class="file-info-container" :class="{ 'is-fileinfo-visible': fileInfoVisible }">
<!--File info panel-->
<FileInfoPanel v-if="fileInfoDetail.length === 1"/>
<FileInfoPanel v-if="fileInfoDetail.length === 1" />
<MultiSelected v-if="fileInfoDetail.length > 1"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
<MultiSelected v-if="fileInfoDetail.length > 1"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
/>
<!--If file info panel empty show message-->
<EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
<EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off" />
</div>
</div>
</template>
@@ -140,11 +140,11 @@
draggedItems() {
//Set opacity for dragged items
if(!this.fileInfoDetail.includes(this.draggingId)){
if (!this.fileInfoDetail.includes(this.draggingId)) {
return [this.draggingId]
}
if(this.fileInfoDetail.includes(this.draggingId)) {
if (this.fileInfoDetail.includes(this.draggingId)) {
return this.fileInfoDetail
}
}
@@ -158,13 +158,13 @@
},
methods: {
deleteItems() {
if(this.fileInfoDetail.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) {
if (this.fileInfoDetail.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) {
this.$store.dispatch('deleteItem')
}
},
dropUpload(event) {
// Upload external file
this.$uploadExternalFiles(event, this.currentFolder.unique_id)
this.$uploadExternalFiles(event, this.currentFolder.id)
this.isDragging = false
},
@@ -191,29 +191,27 @@
if (data.type !== 'folder' || this.draggingId === data) return
//Prevent move selected folder to folder if in beteewn selected folders
if(this.fileInfoDetail.find(item => item === data && this.fileInfoDetail.length > 1)) return
if (this.fileInfoDetail.find(item => item === data && this.fileInfoDetail.length > 1)) return
// Move folder to new parent
//Move item if is not included in selected items
if(!this.fileInfoDetail.includes(this.draggingId)){
this.$store.dispatch('moveItem', {to_item:data ,noSelectedItem:this.draggingId})
//Move item if is not included in selected items
if (!this.fileInfoDetail.includes(this.draggingId)) {
this.$store.dispatch('moveItem', {to_item: data, noSelectedItem: this.draggingId})
}
//Move selected items to folder
if(this.fileInfoDetail.length > 0 && this.fileInfoDetail.includes(this.draggingId)){
this.$store.dispatch('moveItem', {to_item:data ,noSelectedItem: null})
if (this.fileInfoDetail.length > 0 && this.fileInfoDetail.includes(this.draggingId)) {
this.$store.dispatch('moveItem', {to_item: data, noSelectedItem: null})
}
} else {
// Get unique_id of current folder
const unique_id = data.type !== 'folder' ? this.currentFolder.unique_id : data.unique_id
// Get id of current folder
const id = data.type !== 'folder' ? this.currentFolder.id : data.id
// Upload external file
this.$uploadExternalFiles(event, unique_id)
this.$uploadExternalFiles(event, id)
}
this.isDragging = false
@@ -222,38 +220,41 @@
events.$emit('contextMenu:show', event, item)
},
filesContainerClick() {
// Deselect itms clicked by outside
// Deselect items clicked by outside
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
},
created() {
events.$on('mobileSelecting:start' , () => {
this.mobileMultiSelect =true
events.$on('mobileSelecting:start', () => {
this.mobileMultiSelect = true
})
events.$on('mobileSelecting:stop' , () => {
this.mobileMultiSelect = false
events.$on('mobileSelecting:stop', () => {
this.mobileMultiSelect = false
})
events.$on('drop', () => {
this.isDragging = false
setTimeout(() => {
this.draggingId = undefined
}, 10);
}, 10)
})
events.$on('fileItem:deselect', () =>
events.$on('fileItem:deselect', () => {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
)
})
events.$on('scrollTop', () => {
// Scroll top
var container = document.getElementsByClassName(
'files-container'
)[0]
if (container) container.scrollTop = 0
if (container)
container.scrollTop = 0
})
}
}
@@ -265,9 +266,9 @@
.file-list {
.dragged {
/deep/.is-dragenter {
border: 2px solid transparent;
}
/deep/ .is-dragenter {
border: 2px solid transparent;
}
}
}
@@ -279,7 +280,7 @@
position: fixed;
pointer-events: none;
z-index: 100;
}
.mobile-multi-select {
@@ -433,7 +434,7 @@
.mobile-search {
margin-bottom: 0;
}
.file-info-container {
display: none;
}

75
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -10,7 +10,7 @@
<!-- MultiSelecting for the mobile version -->
<div :class="{'check-select-folder' : this.item.type === 'folder', 'check-select' : this.item.type !== 'folder'}" v-if="multiSelectMode">
<div class="select-box" :class="{'select-box-active' : isClicked } ">
<CheckIcon v-if="isClicked" class="icon" size="17"/>
<CheckIcon v-if="isClicked" class="icon" size="17" />
</div>
</div>
@@ -20,19 +20,19 @@
</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file" />
<!--Image thumbnail-->
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name" />
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder" />
</div>
<!--Name-->
<div class="item-name">
<!--Name-->
<b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
<b :ref="this.item.id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
@@ -66,11 +66,11 @@
</template>
<script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import {LinkIcon, UserPlusIcon, CheckIcon} from 'vue-feather-icons'
import FolderIcon from '@/components/FilesView/FolderIcon'
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
import {debounce} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FileItemGrid',
@@ -85,23 +85,23 @@ export default {
...mapGetters([
'FilePreviewType', 'sharedDetail', 'fileInfoDetail', 'data'
]),
folderEmojiOrColor(){
folderEmojiOrColor() {
// If folder have set some color
if(this.item.icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.item.unique_id}`].firstElementChild.style.fill = `${this.item.icon_color}`
// If folder have set some color
if (this.item.icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.item.id}`].firstElementChild.style.fill = this.item.icon_color
})
return false
}
// If folder have set some emoji
if(this.item.icon_emoji)
if (this.item.icon_emoji)
return this.item.icon_emoji
},
isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
return this.fileInfoDetail.some(element => element.id === this.item.id)
},
isFolder() {
return this.item.type === 'folder'
@@ -177,10 +177,10 @@ export default {
// After click deselect new folder rename input
document.getSelection().removeAllRanges();
if (e.ctrlKey || e.metaKey && !e.shiftKey) {
// Click + Ctrl
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
@@ -218,9 +218,9 @@ export default {
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
}
}
@@ -233,21 +233,12 @@ export default {
}
if (this.multiSelectMode && this.$isMobile()) {
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
}
}
// Get target classname
let itemClass = e.target.className
if (
['name', 'icon', 'file-link', 'file-icon-text'].includes(
itemClass
)
)
return
},
goToItem() {
if (this.isImage || this.isVideo || this.isAudio) {
@@ -262,19 +253,19 @@ export default {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
}
}
},
renameItem: debounce(function(e) {
renameItem: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
unique_id: this.item.unique_id,
id: this.item.id,
type: this.item.type,
name: e.target.innerText
})
@@ -283,10 +274,10 @@ export default {
created() {
this.itemName = this.item.name
events.$on('newFolder:focus', (unique_id) => {
events.$on('newFolder:focus', (id) => {
if(this.item.unique_id == unique_id && !this.$isMobile()) {
this.$refs[unique_id].focus()
if (this.item.id === id && !this.$isMobile()) {
this.$refs[id].focus()
document.execCommand('selectAll')
}
})
@@ -302,7 +293,7 @@ export default {
})
// Change item name
events.$on('change:name', (item) => {
if (this.item.unique_id == item.unique_id) this.itemName = item.name
if (this.item.id === item.id) this.itemName = item.name
})
}
}
@@ -559,7 +550,7 @@ export default {
.file-icon-text {
@include font-size(12);
}
.folder {
width: 75px;
@@ -569,7 +560,7 @@ export default {
/deep/ .folder-icon {
@include font-size(75)
}
}
}
.image {

26
resources/js/components/FilesView/FileItemList.vue
View File

@@ -37,7 +37,7 @@
<!--Name-->
<div class="item-name">
<b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
<b :ref="this.item.id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
@@ -91,7 +91,7 @@ export default {
computed: {
...mapGetters(['FilePreviewType', 'fileInfoDetail', 'data']),
isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
return this.fileInfoDetail.some(element => element.id === this.item.id)
},
isFolder() {
return this.item.type === 'folder'
@@ -175,7 +175,7 @@ export default {
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
// Click + Ctrl
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
@@ -209,6 +209,7 @@ export default {
}
if (!this.mobileMultiSelect && this.$isMobile()) {
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
@@ -228,17 +229,12 @@ export default {
}
if (this.mobileMultiSelect && this.$isMobile()) {
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
}
}
// Get target classname
let itemClass = e.target.className
if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
},
goToItem() {
if (this.isImage || this.isVideo || this.isAudio) {
@@ -249,7 +245,7 @@ export default {
} else if (this.isFolder) {
//Clear selected items after open another folder
// Clear selected items after open another folder
this.$store.commit('CLEAR_FILEINFO_DETAIL')
if (this.$isThisLocation('public')) {
@@ -264,7 +260,7 @@ export default {
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
unique_id: this.item.unique_id,
id: this.item.id,
type: this.item.type,
name: e.target.innerText
})
@@ -274,10 +270,10 @@ export default {
this.itemName = this.item.name
events.$on('newFolder:focus', (unique_id) => {
events.$on('newFolder:focus', (id) => {
if(this.item.unique_id == unique_id && !this.$isMobile()) {
this.$refs[unique_id].focus()
if(this.item.id === id && !this.$isMobile()) {
this.$refs[id].focus()
document.execCommand('selectAll')
}
})
@@ -294,7 +290,7 @@ export default {
// Change item name
events.$on('change:name', (item) => {
if (this.item.unique_id == item.unique_id) this.itemName = item.name
if (this.item.id === item.id) this.itemName = item.name
})
}
}

2
resources/js/components/FilesView/MediaFullPreview.vue
View File

@@ -91,7 +91,7 @@ export default {
},
choseActiveFile() {
this.sliderFile.forEach((element, index) => {
if (element.unique_id == this.fileInfoDetail[0].unique_id) {
if (element.id == this.fileInfoDetail[0].id) {
this.currentIndex = index
}
})