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

contextmenu refactoring

Browse Source
This commit is contained in:
Peter Papp
2021-08-20 09:54:00 +02:00
parent c57a244ae1
commit 99e9c0086e
6 changed files with 300 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/mix-manifest.json
View File

@@ -36,12 +36,12 @@
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac", "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac",
"/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749", "/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a547f8b4e9a83935a777", "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a547f8b4e9a83935a777",
"/chunks/files.js": "/chunks/files.js?id=c0cd8f81f291ae02d6db", "/chunks/files.js": "/chunks/files.js?id=f7699c61807c439c44ea",
"/chunks/files~chunks/platform~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.js?id=4711dbca9d83d061561c", "/chunks/files~chunks/platform~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.js?id=4711dbca9d83d061561c",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=74456138b2b60df5cb0d", "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=74456138b2b60df5cb0d",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=a831ffd52ccae7b0b983", "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=a831ffd52ccae7b0b983",
"/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js?id=c5ec9502bcfad35c502e", "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js?id=c5ec9502bcfad35c502e",
"/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=3890fdb4554e98928fc6", "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=e4167732f5c336b267ec",
"/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=405a76566fbfd86d809b", "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=405a76566fbfd86d809b",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea", "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea",
"/chunks/homepage.js": "/chunks/homepage.js?id=6f2aac612b4c6eaabf61", "/chunks/homepage.js": "/chunks/homepage.js?id=6f2aac612b4c6eaabf61",
@@ -212,5 +212,50 @@
"/chunks/platform~chunks/shared/file-browser.9ed291703ca2e7c8dbcd.hot-update.js": "/chunks/platform~chunks/shared/file-browser.9ed291703ca2e7c8dbcd.hot-update.js", "/chunks/platform~chunks/shared/file-browser.9ed291703ca2e7c8dbcd.hot-update.js": "/chunks/platform~chunks/shared/file-browser.9ed291703ca2e7c8dbcd.hot-update.js",
"/chunks/platform~chunks/shared/file-browser.5294fb48ebb3f6d12351.hot-update.js": "/chunks/platform~chunks/shared/file-browser.5294fb48ebb3f6d12351.hot-update.js", "/chunks/platform~chunks/shared/file-browser.5294fb48ebb3f6d12351.hot-update.js": "/chunks/platform~chunks/shared/file-browser.5294fb48ebb3f6d12351.hot-update.js",
"/chunks/files.a1f5370b7519edd60005.hot-update.js": "/chunks/files.a1f5370b7519edd60005.hot-update.js", "/chunks/files.a1f5370b7519edd60005.hot-update.js": "/chunks/files.a1f5370b7519edd60005.hot-update.js",
"/chunks/files.6f0a1f050877d1e2c39d.hot-update.js": "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js" "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js": "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js",
"/js/main.e1fdbe84d7b7073e6a4f.hot-update.js": "/js/main.e1fdbe84d7b7073e6a4f.hot-update.js",
"/chunks/files~chunks/shared/file-browser.2fdb8434333dd5b94bf9.hot-update.js": "/chunks/files~chunks/shared/file-browser.2fdb8434333dd5b94bf9.hot-update.js",
"/js/main.3d57f21a691beb2d4731.hot-update.js": "/js/main.3d57f21a691beb2d4731.hot-update.js",
"/chunks/files~chunks/shared/file-browser.52fe3c022f17b65feecc.hot-update.js": "/chunks/files~chunks/shared/file-browser.52fe3c022f17b65feecc.hot-update.js",
"/chunks/files.6298607239f7c5ba7516.hot-update.js": "/chunks/files.6298607239f7c5ba7516.hot-update.js",
"/chunks/files~chunks/shared/file-browser.6298607239f7c5ba7516.hot-update.js": "/chunks/files~chunks/shared/file-browser.6298607239f7c5ba7516.hot-update.js",
"/chunks/files.90b8a1d407312da18f24.hot-update.js": "/chunks/files.90b8a1d407312da18f24.hot-update.js",
"/chunks/files.d1c72dd53e2b8dc531e3.hot-update.js": "/chunks/files.d1c72dd53e2b8dc531e3.hot-update.js",
"/chunks/files~chunks/shared/file-browser.1da0d4befcd7f579df5a.hot-update.js": "/chunks/files~chunks/shared/file-browser.1da0d4befcd7f579df5a.hot-update.js",
"/chunks/files.3eef7ff965f2c2fcabb4.hot-update.js": "/chunks/files.3eef7ff965f2c2fcabb4.hot-update.js",
"/chunks/files.6f14a67c57774b38e32a.hot-update.js": "/chunks/files.6f14a67c57774b38e32a.hot-update.js",
"/chunks/files~chunks/shared/file-browser.15275c00dd8dcc32180e.hot-update.js": "/chunks/files~chunks/shared/file-browser.15275c00dd8dcc32180e.hot-update.js",
"/chunks/files.011b9d7f15a9fbf20fee.hot-update.js": "/chunks/files.011b9d7f15a9fbf20fee.hot-update.js",
"/chunks/files.c3f780b083d939354c28.hot-update.js": "/chunks/files.c3f780b083d939354c28.hot-update.js",
"/chunks/files.4d27e61b1c84c9da270b.hot-update.js": "/chunks/files.4d27e61b1c84c9da270b.hot-update.js",
"/chunks/files~chunks/shared/file-browser.a4074fbd5bf83227f392.hot-update.js": "/chunks/files~chunks/shared/file-browser.a4074fbd5bf83227f392.hot-update.js",
"/chunks/files.621f3b6fe3c09c6af4ce.hot-update.js": "/chunks/files.621f3b6fe3c09c6af4ce.hot-update.js",
"/chunks/files.507486947b28b2733f15.hot-update.js": "/chunks/files.507486947b28b2733f15.hot-update.js",
"/chunks/files.430d15cb83aff6c406c9.hot-update.js": "/chunks/files.430d15cb83aff6c406c9.hot-update.js",
"/chunks/files.dc5fa2c867d280d31625.hot-update.js": "/chunks/files.dc5fa2c867d280d31625.hot-update.js",
"/chunks/files~chunks/shared/file-browser.bba6d54b340ea48cf223.hot-update.js": "/chunks/files~chunks/shared/file-browser.bba6d54b340ea48cf223.hot-update.js",
"/chunks/files~chunks/shared/file-browser.33dca32cac96790d1688.hot-update.js": "/chunks/files~chunks/shared/file-browser.33dca32cac96790d1688.hot-update.js",
"/chunks/files.b0d755408c6da2bd870b.hot-update.js": "/chunks/files.b0d755408c6da2bd870b.hot-update.js",
"/chunks/files~chunks/shared/file-browser.b0d755408c6da2bd870b.hot-update.js": "/chunks/files~chunks/shared/file-browser.b0d755408c6da2bd870b.hot-update.js",
"/chunks/files.375827553e299b2a760b.hot-update.js": "/chunks/files.375827553e299b2a760b.hot-update.js",
"/chunks/files~chunks/shared/file-browser.9665ce0b7172baa97808.hot-update.js": "/chunks/files~chunks/shared/file-browser.9665ce0b7172baa97808.hot-update.js",
"/chunks/files.754cc42500515c47f5a0.hot-update.js": "/chunks/files.754cc42500515c47f5a0.hot-update.js",
"/chunks/files.21fbac2946fb286e30c8.hot-update.js": "/chunks/files.21fbac2946fb286e30c8.hot-update.js",
"/js/main.00016cfb2c445f675544.hot-update.js": "/js/main.00016cfb2c445f675544.hot-update.js",
"/chunks/files~chunks/shared/file-browser.00016cfb2c445f675544.hot-update.js": "/chunks/files~chunks/shared/file-browser.00016cfb2c445f675544.hot-update.js",
"/chunks/files.49423b0e1b2925c15352.hot-update.js": "/chunks/files.49423b0e1b2925c15352.hot-update.js",
"/chunks/files~chunks/shared/file-browser.a2e4a082d157c6d1ea74.hot-update.js": "/chunks/files~chunks/shared/file-browser.a2e4a082d157c6d1ea74.hot-update.js",
"/chunks/files.ee3f47a3c5116b5b401e.hot-update.js": "/chunks/files.ee3f47a3c5116b5b401e.hot-update.js",
"/chunks/files.32762bd122d09306703e.hot-update.js": "/chunks/files.32762bd122d09306703e.hot-update.js",
"/js/main.ad05ccbac44b2c624593.hot-update.js": "/js/main.ad05ccbac44b2c624593.hot-update.js",
"/chunks/files~chunks/shared/file-browser.ad05ccbac44b2c624593.hot-update.js": "/chunks/files~chunks/shared/file-browser.ad05ccbac44b2c624593.hot-update.js",
"/chunks/files.4c7fc31461457da5d19b.hot-update.js": "/chunks/files.4c7fc31461457da5d19b.hot-update.js",
"/chunks/files.f98a86d3e73c8cdc33f7.hot-update.js": "/chunks/files.f98a86d3e73c8cdc33f7.hot-update.js",
"/chunks/files.16f924f1699275468e90.hot-update.js": "/chunks/files.16f924f1699275468e90.hot-update.js",
"/chunks/files.495f7c821ef89e0a8787.hot-update.js": "/chunks/files.495f7c821ef89e0a8787.hot-update.js",
"/chunks/files.f5b883834d41084ede46.hot-update.js": "/chunks/files.f5b883834d41084ede46.hot-update.js",
"/chunks/files.2794cdc38c8ca54d123e.hot-update.js": "/chunks/files.2794cdc38c8ca54d123e.hot-update.js",
"/chunks/files.894abb6ec52da6cabd48.hot-update.js": "/chunks/files.894abb6ec52da6cabd48.hot-update.js",
"/chunks/files~chunks/shared/file-browser.f88511affbcacf404db3.hot-update.js": "/chunks/files~chunks/shared/file-browser.f88511affbcacf404db3.hot-update.js",
"/chunks/files.9322fd1e7e2da1962d6b.hot-update.js": "/chunks/files.9322fd1e7e2da1962d6b.hot-update.js"
} }

484
resources/js/components/FilesView/ContextMenu.vue
View File

@@ -1,336 +1,125 @@
<template> <template>
<div v-show="isVisible" @click="closeAndResetContextMenu" :style="{top: positionY + 'px', left: positionX + 'px'}" class="contextmenu" ref="contextmenu"> <div
v-show="isVisible"
:style="{top: positionY + 'px', left: positionX + 'px'}"
@click="closeAndResetContextMenu"
class="contextmenu"
ref="contextmenu"
>
<div id="menu-list" class="menu-options">
<!-- Trash location--> <!--Show empty select contextmenu-->
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options"> <slot name="empty-select" v-if="! item"></slot>
<!-- Single options --> <!--Show single select contextmenu-->
<OptionGroup v-if="isMultiSelectContextMenu"> <slot name="single-select" v-if="isMultiSelectContextMenu"></slot>
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(item)" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!isMultiSelectContextMenu">
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
<!-- Shared location with MASTER permission-->
<div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup class="menu-option-group" v-if="item && isFolder && isMultiSelectContextMenu">
<Option @click.native="addToFavourites" :title="isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$shareFileOrFolder(item)" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup class="menu-option-group" v-if="item && !hasFile && !isMultiSelectContextMenu">
<Option @click.native="addToFavourites" :title="isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
<!-- Base location with MASTER permission-->
<div v-if="$isThisLocation(['base', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="!$isThisLocation(['latest']) && isMultiSelectContextMenu && !item">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
<!-- Single options -->
<OptionGroup v-if="!$isThisLocation(['latest']) && item && isMultiSelectContextMenu && isFolder">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu ">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!$isThisLocation(['latest']) && !isMultiSelectContextMenu && item && !hasFile">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
<!-- Base & Public location with EDITOR permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="isMultiSelectContextMenu && !item">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
<!-- Single options -->
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="$renameFileOrFolder(item)" :title=" $t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
<!-- Base & Public location with VISITOR permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!isMultiSelectContextMenu && item ">
<Option @click.native="downloadItem" v-if="!hasFolder" :title="$t('context_menu.download')" icon="download" />
<Option v-if="hasFolder" :title="$t('context_menu.no_options')" icon="no-options" class="no-options" />
</OptionGroup>
<!--Show multiple select contextmenu-->
<slot name="multiple-select" v-if="! isMultiSelectContextMenu"></slot>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus' import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
export default { export default {
name: 'ContextMenu', name: 'ContextMenu',
components: { computed: {
OptionGroup, ...mapGetters([
Option 'clipboard',
}, 'user',
computed: { ]),
...mapGetters(['user', 'clipboard']), isMultiSelectContextMenu() {
hasFolder() { // If is context Menu open on multi selected items open just options for the multi selected items
return this.clipboard.find(item => item.type === 'folder') if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
}, return false
hasFile() {
return this.clipboard.find(item => item.type !== 'folder')
},
isMultiSelectContextMenu() {
// If is context Menu open on multi selected items open just options for the multi selected items // If is context Menu open for the non selected item open options for the single item
if (this.clipboard.length > 1 && this.clipboard.includes(this.item)) if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
return false return true
},
},
data() {
return {
item: undefined,
isVisible: false,
positionX: 0,
positionY: 0
}
},
methods: {
closeAndResetContextMenu() {
// Close context menu
this.isVisible = false
// If is context Menu open for the non selected item open options for the single item // Reset item container
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item)) this.item = undefined
return true },
}, showFolderActionsMenu() {
favourites() { let container = document.getElementById('folder-actions')
return this.user.data.relationships.favourites.data.attributes.folders
},
isFolder() {
return this.item && this.item.type === 'folder'
},
isFile() {
return (
this.item &&
this.item.type !== 'folder' &&
this.item &&
this.item.type !== 'image'
)
},
isImage() {
return this.item && this.item.type === 'image'
},
isInFavourites() {
return this.favourites.find((el) => el.id === this.item.id)
}
},
data() {
return {
item: undefined,
isVisible: false,
positionX: 0,
positionY: 0
}
},
methods: {
emptyTrash() {
this.$store.dispatch('emptyTrash')
},
shareCancel() {
this.$store.dispatch('shareCancel')
},
addToFavourites() {
// Check if folder is in favourites and then add/remove from favourites
if (
this.favourites &&
!this.favourites.find(el => el.id === this.item.id)
) {
// Add to favourite folder that is not selected
if (!this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', this.item)
}
// Add to favourites all selected folders this.positionX = container.offsetLeft + 16
if (this.clipboard.includes(this.item)) { this.positionY = container.offsetTop + 30
this.$store.dispatch('addToFavourites', null)
}
} else {
this.$store.dispatch('removeFromFavourites', this.item)
}
},
downloadItem() {
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
this.$store.dispatch('downloadZip')
else {
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
}
},
ItemDetail() {
// Dispatch load file info detail
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
// Show panel if is not open // Show context menu
this.$store.dispatch('fileInfoToggle', true) this.isVisible = true
}, },
createFolder() { showContextMenu(event) {
this.$store.dispatch('createFolder', { let parent = document.getElementById('menu-list')
name: this.$t('popup_create_folder.folder_default_name') let nodesSameClass = parent.getElementsByClassName('menu-option')
})
},
closeAndResetContextMenu() {
// Close context menu
this.isVisible = false
// Reset item container let VerticalOffsetArea = nodesSameClass.length * 50
this.item = undefined let HorizontalOffsetArea = 190
},
showFolderActionsMenu() {
let container = document.getElementById('folder-actions')
this.positionX = container.offsetLeft + 16 let container = document.getElementById('files-view')
this.positionY = container.offsetTop + 30
// Show context menu var offset = container.getClientRects()[0]
this.isVisible = true
},
showContextMenu(event) {
let parent = document.getElementById('menu-list')
let nodesSameClass = parent.getElementsByClassName('menu-option')
let VerticalOffsetArea = nodesSameClass.length * 50 let x = event.clientX - offset.left
let HorizontalOffsetArea = 190 let y = event.clientY - offset.top
let container = document.getElementById('files-view') // Set position Y
if (container.offsetHeight - y < VerticalOffsetArea) {
this.positionY = y - VerticalOffsetArea
} else {
this.positionY = y
}
var offset = container.getClientRects()[0] // Set position X
if (container.offsetWidth - x < HorizontalOffsetArea) {
this.positionX = x - HorizontalOffsetArea
} else {
this.positionX = x
}
let x = event.clientX - offset.left // Show context menu
let y = event.clientY - offset.top this.isVisible = true
}
},
created() {
events.$on('contextMenu:show', (event, item) => {
// Store item
this.item = item
// Set position Y // Show context menu
if (container.offsetHeight - y < VerticalOffsetArea) { setTimeout(() => this.showContextMenu(event, item), 10)
this.positionY = y - VerticalOffsetArea })
} else {
this.positionY = y
}
// Set position X events.$on('folder:actions', (folder) => {
if (container.offsetWidth - x < HorizontalOffsetArea) { // Store item
this.positionX = x - HorizontalOffsetArea this.item = folder
} else {
this.positionX = x
}
// Show context menu if (this.isVisible) {
this.isVisible = true this.isVisible = false
} } else {
}, this.showFolderActionsMenu()
created() { }
events.$on('contextMenu:show', (event, item) => { })
// Store item
this.item = item
// Show context menu events.$on('unClick', () => this.closeAndResetContextMenu())
setTimeout(() => this.showContextMenu(event, item), 10) }
})
events.$on('unClick', () => this.closeAndResetContextMenu())
events.$on('folder:actions', (folder) => {
// Store item
this.item = folder
if (this.isVisible) this.isVisible = false
else this.showFolderActionsMenu()
})
}
} }
</script> </script>
@@ -339,60 +128,61 @@ export default {
@import "resources/sass/vuefilemanager/_mixins"; @import "resources/sass/vuefilemanager/_mixins";
.no-options { .no-options {
/deep/ .text-label { /deep/ .text-label {
color: $text-muted !important; color: $text-muted !important;
} }
/deep/ &:hover { /deep/ &:hover {
background: transparent; background: transparent;
} }
/deep/ path, /deep/ path,
/deep/ line, /deep/ line,
/deep/ circle { /deep/ circle {
stroke: $text-muted !important; stroke: $text-muted !important;
} }
} }
.contextmenu { .contextmenu {
min-width: 250px; min-width: 250px;
position: absolute; position: absolute;
z-index: 99; z-index: 99;
box-shadow: $shadow; box-shadow: $shadow;
background: white; background: white;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
&.showed { &.showed {
display: block; display: block;
} }
} }
.menu-options { .menu-options {
list-style: none; list-style: none;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.dark-mode { .dark-mode {
.contextmenu { .contextmenu {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
.no-options {
/deep/ .text-label {
color: $dark_mode_text_secondary !important;
}
/deep/ &:hover { .no-options {
background: transparent; /deep/ .text-label {
} color: $dark_mode_text_secondary !important;
}
/deep/ path, /deep/ &:hover {
/deep/ line, background: transparent;
/deep/ circle { }
stroke: $dark_mode_text_secondary !important;
} /deep/ path,
} /deep/ line,
/deep/ circle {
stroke: $dark_mode_text_secondary !important;
}
}
} }
</style> </style>

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

@@ -331,6 +331,14 @@ const FunctionHelpers = {
Vue.prototype.$closePopup = function () { Vue.prototype.$closePopup = function () {
events.$emit('popup:close') events.$emit('popup:close')
} }
Vue.prototype.$openInDetailPanel = function (entry) {
// Dispatch load file info detail
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', entry)
// Show panel if is not open
this.$store.dispatch('fileInfoToggle', true)
}
} }
} }

14
resources/js/helpers/itemHelpers.js vendored
View File

@@ -6,6 +6,14 @@ import store from "../store";
const itemHelpers = { const itemHelpers = {
install(Vue) { install(Vue) {
Vue.prototype.$emptyTrash = function () {
this.$store.dispatch('emptyTrash')
}
Vue.prototype.$shareCancel = function () {
this.$store.dispatch('shareCancel')
}
Vue.prototype.$renameFileOrFolder = function (entry) { Vue.prototype.$renameFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'rename-item', item: entry}) events.$emit('popup:open', {name: 'rename-item', item: entry})
} }
@@ -14,6 +22,12 @@ const itemHelpers = {
events.$emit('popup:open', {name: 'move', item: [entry]}) events.$emit('popup:open', {name: 'move', item: [entry]})
} }
Vue.prototype.$createFolder = function () {
this.$store.dispatch('createFolder', {
name: this.$t('popup_create_folder.folder_default_name')
})
}
Vue.prototype.$createTeamFolder = function (entry) { Vue.prototype.$createTeamFolder = function (entry) {
events.$emit('popup:open', {name: 'create-team-folder'}) events.$emit('popup:open', {name: 'create-team-folder'})
} }

4
resources/js/store/modules/fileBrowser.js vendored
View File

@@ -22,10 +22,6 @@ const actions = {
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`) .get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`)
.then(response => { .then(response => {
commit('LOADING_STATE', {loading: false, data: response.data}) commit('LOADING_STATE', {loading: false, data: response.data})
commit('STORE_CURRENT_FOLDER', payload.folder)
if (payload.back && !payload.sorting)
commit('REMOVE_BROWSER_HISTORY')
events.$emit('scrollTop') events.$emit('scrollTop')
}) })

96
resources/js/views/FileView/Home/Files.vue
View File

@@ -1,8 +1,51 @@
<template> <template>
<div> <div>
<ContextMenu> <ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<OptionGroup v-if="isFolder">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:multiple-select v-if="item">
<OptionGroup v-if="!hasFile">
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu> </ContextMenu>
<!--Show files & folders-->
<FileBrowser/> <FileBrowser/>
</div> </div>
</template> </template>
@@ -10,27 +53,74 @@
<script> <script>
import FileBrowser from '/resources/js/components/FilesView/FileBrowser' import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu' import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import {events} from "../../../bus";
export default { export default {
name: 'FilesView', name: 'FilesView',
components: { components: {
OptionGroup,
FileBrowser, FileBrowser,
ContextMenu, ContextMenu,
Option,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'clipboard',
'user',
]), ]),
isFolder() {
return this.item && this.item.type === 'folder'
},
isInFavourites() {
return this.favourites.find((el) => el.id === this.item.id)
},
hasFile() {
return this.clipboard.find(item => item.type !== 'folder')
},
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
},
}, },
data() { data() {
return { return {
item: undefined,
} }
}, },
methods: {
addToFavourites() {
// Check if folder is in favourites and then add/remove from favourites
if (
this.favourites &&
!this.favourites.find(el => el.id === this.item.id)
) {
// Add to favourite folder that is not selected
if (!this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', this.item)
}
// Add to favourites all selected folders
if (this.clipboard.includes(this.item)) {
this.$store.dispatch('addToFavourites', null)
}
} else {
this.$store.dispatch('removeFromFavourites', this.item)
}
},
downloadItem() {
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
this.$store.dispatch('downloadZip')
else {
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
}
},
},
created() { created() {
this.$store.dispatch('getFolder', this.$route.params.id) this.$store.dispatch('getFolder', this.$route.params.id)
events.$on('contextMenu:show', (event, item) => this.item = item)
} }
} }
</script> </script>