mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-06 02:33:48 +00:00
contextmenu refactoring
This commit is contained in:
Peter Papp
@@ -36,12 +36,12 @@
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac",
|
||||
"/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749",
|
||||
"/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~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/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/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea",
|
||||
"/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.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.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"
|
||||
}
|
||||
|
||||
@@ -1,336 +1,125 @@
|
||||
<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-->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
|
||||
<!--Show empty select contextmenu-->
|
||||
<slot name="empty-select" v-if="! item"></slot>
|
||||
|
||||
<!-- Single 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)" 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 single select contextmenu-->
|
||||
<slot name="single-select" v-if="isMultiSelectContextMenu"></slot>
|
||||
|
||||
<!--Show multiple select contextmenu-->
|
||||
<slot name="multiple-select" v-if="! isMultiSelectContextMenu"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
components: {
|
||||
OptionGroup,
|
||||
Option
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user', 'clipboard']),
|
||||
hasFolder() {
|
||||
return this.clipboard.find(item => item.type === 'folder')
|
||||
},
|
||||
hasFile() {
|
||||
return this.clipboard.find(item => item.type !== 'folder')
|
||||
},
|
||||
isMultiSelectContextMenu() {
|
||||
name: 'ContextMenu',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
isMultiSelectContextMenu() {
|
||||
// If is context Menu open on multi selected items open just options for the multi selected items
|
||||
if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
|
||||
return false
|
||||
|
||||
// If is context Menu open on multi selected items open just options for the multi selected items
|
||||
if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
|
||||
return false
|
||||
// If is context Menu open for the non selected item open options for the single item
|
||||
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
|
||||
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
|
||||
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
|
||||
return true
|
||||
},
|
||||
favourites() {
|
||||
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)
|
||||
}
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showFolderActionsMenu() {
|
||||
let container = document.getElementById('folder-actions')
|
||||
|
||||
// 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)
|
||||
}
|
||||
},
|
||||
ItemDetail() {
|
||||
// Dispatch load file info detail
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 30
|
||||
|
||||
// Show panel if is not open
|
||||
this.$store.dispatch('fileInfoToggle', true)
|
||||
},
|
||||
createFolder() {
|
||||
this.$store.dispatch('createFolder', {
|
||||
name: this.$t('popup_create_folder.folder_default_name')
|
||||
})
|
||||
},
|
||||
closeAndResetContextMenu() {
|
||||
// Close context menu
|
||||
this.isVisible = false
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showContextMenu(event) {
|
||||
let parent = document.getElementById('menu-list')
|
||||
let nodesSameClass = parent.getElementsByClassName('menu-option')
|
||||
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showFolderActionsMenu() {
|
||||
let container = document.getElementById('folder-actions')
|
||||
let VerticalOffsetArea = nodesSameClass.length * 50
|
||||
let HorizontalOffsetArea = 190
|
||||
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 30
|
||||
let container = document.getElementById('files-view')
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showContextMenu(event) {
|
||||
let parent = document.getElementById('menu-list')
|
||||
let nodesSameClass = parent.getElementsByClassName('menu-option')
|
||||
var offset = container.getClientRects()[0]
|
||||
|
||||
let VerticalOffsetArea = nodesSameClass.length * 50
|
||||
let HorizontalOffsetArea = 190
|
||||
let x = event.clientX - offset.left
|
||||
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
|
||||
let y = event.clientY - offset.top
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('contextMenu:show', (event, item) => {
|
||||
// Store item
|
||||
this.item = item
|
||||
|
||||
// Set position Y
|
||||
if (container.offsetHeight - y < VerticalOffsetArea) {
|
||||
this.positionY = y - VerticalOffsetArea
|
||||
} else {
|
||||
this.positionY = y
|
||||
}
|
||||
// Show context menu
|
||||
setTimeout(() => this.showContextMenu(event, item), 10)
|
||||
})
|
||||
|
||||
// Set position X
|
||||
if (container.offsetWidth - x < HorizontalOffsetArea) {
|
||||
this.positionX = x - HorizontalOffsetArea
|
||||
} else {
|
||||
this.positionX = x
|
||||
}
|
||||
events.$on('folder:actions', (folder) => {
|
||||
// Store item
|
||||
this.item = folder
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('contextMenu:show', (event, item) => {
|
||||
// Store item
|
||||
this.item = item
|
||||
if (this.isVisible) {
|
||||
this.isVisible = false
|
||||
} else {
|
||||
this.showFolderActionsMenu()
|
||||
}
|
||||
})
|
||||
|
||||
// Show context menu
|
||||
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()
|
||||
})
|
||||
}
|
||||
events.$on('unClick', () => this.closeAndResetContextMenu())
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -339,60 +128,61 @@ export default {
|
||||
@import "resources/sass/vuefilemanager/_mixins";
|
||||
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $text-muted !important;
|
||||
}
|
||||
/deep/ .text-label {
|
||||
color: $text-muted !important;
|
||||
}
|
||||
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $text-muted !important;
|
||||
}
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $text-muted !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.contextmenu {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $dark_mode_text_secondary !important;
|
||||
}
|
||||
.contextmenu {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $dark_mode_text_secondary !important;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $dark_mode_text_secondary !important;
|
||||
}
|
||||
}
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $dark_mode_text_secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
8
resources/js/helpers/functionHelpers.js
vendored
8
resources/js/helpers/functionHelpers.js
vendored
@@ -331,6 +331,14 @@ const FunctionHelpers = {
|
||||
Vue.prototype.$closePopup = function () {
|
||||
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
14
resources/js/helpers/itemHelpers.js
vendored
@@ -6,6 +6,14 @@ import store from "../store";
|
||||
|
||||
const itemHelpers = {
|
||||
install(Vue) {
|
||||
Vue.prototype.$emptyTrash = function () {
|
||||
this.$store.dispatch('emptyTrash')
|
||||
}
|
||||
|
||||
Vue.prototype.$shareCancel = function () {
|
||||
this.$store.dispatch('shareCancel')
|
||||
}
|
||||
|
||||
Vue.prototype.$renameFileOrFolder = function (entry) {
|
||||
events.$emit('popup:open', {name: 'rename-item', item: entry})
|
||||
}
|
||||
@@ -14,6 +22,12 @@ const itemHelpers = {
|
||||
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) {
|
||||
events.$emit('popup:open', {name: 'create-team-folder'})
|
||||
}
|
||||
|
||||
4
resources/js/store/modules/fileBrowser.js
vendored
4
resources/js/store/modules/fileBrowser.js
vendored
@@ -22,10 +22,6 @@ const actions = {
|
||||
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`)
|
||||
.then(response => {
|
||||
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')
|
||||
})
|
||||
|
||||
@@ -1,8 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<!--Show files & folders-->
|
||||
<FileBrowser/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,27 +53,74 @@
|
||||
<script>
|
||||
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
|
||||
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 {events} from "../../../bus";
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
OptionGroup,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...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() {
|
||||
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() {
|
||||
this.$store.dispatch('getFolder', this.$route.params.id)
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => this.item = item)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user