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

MobileContextMenu.vue refactoring

Browse Source
This commit is contained in:
Peter Papp
2021-08-21 10:53:56 +02:00
parent d71dbea246
commit a6e60d2efa
16 changed files with 263 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/ContextMenu.vue
+1 -1
View File
@@ -99,7 +99,7 @@ export default {
}
},
created() {
events.$on('contextMenu:show', (event, item) => {
events.$on('context-menu:show', (event, item) => {
// Store item
this.item = item
resources/js/components/FilesView/CreateListMobile.vue
+1 -1
View File
@@ -21,7 +21,7 @@ import Option from '/resources/js/components/FilesView/Option'
import {events} from '/resources/js/bus'
export default {
name: 'FileMenuMobile',
name: 'MobileContextMenu',
components: {
MenuMobileGroup,
OptionUpload,
resources/js/components/FilesView/FileBrowser.vue
+1 -1
View File
@@ -206,7 +206,7 @@
this.isDragging = false
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
events.$emit('context-menu:show', event, item)
},
filesContainerClick() {
resources/js/components/FilesView/FileFilterMobile.vue
+1 -1
View File
@@ -23,7 +23,7 @@ import Option from '/resources/js/components/FilesView/Option'
import {mapGetters} from 'vuex'
export default {
name: 'FileMenuMobile',
name: 'MobileContextMenu',
components: {
MenuMobileGroup,
OptionGroup,
resources/js/components/FilesView/FileItemList.vue
+1
View File
@@ -158,6 +158,7 @@ export default {
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
events.$emit('mobile-menu:show', 'file-menu')
events.$emit('mobile-context-menu:show', this.item)
},
dragEnter() {
if (this.item.type !== 'folder') return
resources/js/components/FilesView/FileMenuMobile.vue
-150
View File
@@ -1,150 +0,0 @@
<template>
<MenuMobile name="file-menu">
<ThumbnailItem class="item-thumbnail" :item="clipboard[0]" info="metadata" />
<!--Trash location-->
<MenuMobileGroup v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')">
<OptionGroup v-if="clipboard[0]">
<Option @click.native="$restoreFileOrFolder(clipboard[0])" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="delete" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MenuMobileGroup>
<!--Shared location-->
<MenuMobileGroup v-if="$isThisLocation(['shared']) && $checkPermission('master')">
<OptionGroup v-if="clipboard[0] && isFolder">
<Option @click.native="addToFavourites" :title="favouritesTitle" icon="star" />
</OptionGroup>
<OptionGroup v-if="clipboard[0]">
<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$shareFileOrFolder(clipboard[0])" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MenuMobileGroup>
<!--Base location for user-->
<MenuMobileGroup v-if="$isThisLocation(['base', 'latest']) && $checkPermission('master')">
<OptionGroup v-if="clipboard[0] && isFolder">
<Option @click.native="addToFavourites" :title="favouritesTitle" icon="star" />
</OptionGroup>
<OptionGroup v-if="clipboard[0]">
<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$shareFileOrFolder(clipboard[0])" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MenuMobileGroup>
<!--Base location for guest-->
<MenuMobileGroup v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')">
<OptionGroup>
<Option v-if="clipboard[0]" @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option v-if="clipboard[0]" @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MenuMobileGroup>
<!--Base location for guest with visit permission-->
<MenuMobileGroup v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')">
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MenuMobileGroup>
</MenuMobile>
</template>
<script>
import MenuMobileGroup from '/resources/js/components/Mobile/MenuMobileGroup'
import MenuMobile from '/resources/js/components/Mobile/MenuMobile'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
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'
export default {
name: 'FileMenuMobile',
components: {
MenuMobileGroup,
MenuMobile,
ThumbnailItem,
OptionGroup,
Option,
},
computed: {
...mapGetters([
'clipboard',
'user',
]),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
},
favouritesTitle() {
return this.isInFavourites
? this.$t('context_menu.remove_from_favourites')
: this.$t('context_menu.add_to_favourites')
},
isInFavourites() {
return this.favourites.find(el => el.id === this.clipboard[0].id)
},
isFile() {
return !this.isImage && !this.isFolder
},
isImage() {
return this.clipboard[0] && this.clipboard[0].type === 'image'
},
isFolder() {
return this.clipboard[0] && this.clipboard[0].type === 'folder'
}
},
data() {
return {
isVisible: false,
}
},
methods: {
addToFavourites() {
if (this.favourites && !this.favourites.find(el => el.id === this.clipboard[0].id)) {
this.$store.dispatch('addToFavourites', this.clipboard[0])
} else {
this.$store.dispatch('removeFromFavourites', this.clipboard[0])
}
},
downloadItem() {
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
this.$store.dispatch('downloadZip')
else {
this.$downloadFile(this.clipboard[0].file_url, this.clipboard[0].name + '.' + this.clipboard[0].mimetype)
}
},
}
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.item-thumbnail {
padding: 20px 20px 10px;
margin-bottom: 0;
}
</style>
resources/js/components/FilesView/MobileContextMenu.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<MenuMobile name="file-menu">
<ThumbnailItem class="item-thumbnail" :item="clipboard[0]" info="metadata" />
<MenuMobileGroup v-if="$slots.default">
<slot></slot>
</MenuMobileGroup>
<MenuMobileGroup v-if="$slots.editor">
<slot name="editor"></slot>
</MenuMobileGroup>
<MenuMobileGroup v-if="$slots.visitor">
<slot name="visitor"></slot>
</MenuMobileGroup>
</MenuMobile>
</template>
<script>
import MenuMobileGroup from '/resources/js/components/Mobile/MenuMobileGroup'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import MenuMobile from '/resources/js/components/Mobile/MenuMobile'
import {mapGetters} from 'vuex'
export default {
name: 'MobileContextMenu',
components: {
MenuMobileGroup,
ThumbnailItem,
MenuMobile,
},
computed: {
...mapGetters([
'clipboard',
]),
},
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.item-thumbnail {
padding: 20px 20px 10px;
margin-bottom: 0;
}
</style>
resources/js/views/FileView/Base/Files.vue
+26 -2
View File
@@ -40,6 +40,26 @@
</template>
</ContextMenu>
<MobileContextMenu>
<OptionGroup v-if="item && 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">
<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">
<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">
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
@@ -49,7 +69,7 @@
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ filterLocationTitle }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" icon="cloud-plus">
<MobileActionButton @click.native="$createItems" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
@@ -78,6 +98,7 @@
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
@@ -89,8 +110,10 @@
export default {
name: 'Files',
components: {
MobileContextMenu,
MobileActionButtonUpload,
MobileActionButton,
MobileContextMenu,
ButtonUpload,
OptionGroup,
FileBrowser,
@@ -160,7 +183,8 @@
created() {
this.$store.dispatch('getFolder', this.$route.params.id)
events.$on('contextMenu:show', (event, item) => this.item = item)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
</script>
resources/js/views/FileView/Base/MySharedItems.vue
+20 -1
View File
@@ -32,6 +32,22 @@
</template>
</ContextMenu>
<MobileContextMenu 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="$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" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
@@ -59,6 +75,7 @@
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -71,6 +88,7 @@
components: {
MobileActionButtonUpload,
MobileActionButton,
MobileContextMenu,
OptionGroup,
FileBrowser,
ContextMenu,
@@ -139,7 +157,8 @@
created() {
this.$store.dispatch('getMySharedItems')
events.$on('contextMenu:show', (event, item) => this.item = item)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
</script>
resources/js/views/FileView/Base/RecentUploads.vue
+16 -1
View File
@@ -27,6 +27,18 @@
</template>
</ContextMenu>
<MobileContextMenu>
<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" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
@@ -53,6 +65,7 @@
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -65,6 +78,7 @@
components: {
MobileActionButtonUpload,
MobileActionButton,
MobileContextMenu,
OptionGroup,
FileBrowser,
ContextMenu,
@@ -102,7 +116,8 @@
created() {
this.$store.dispatch('getRecentUploads')
events.$on('contextMenu:show', (event, item) => this.item = item)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
</script>
resources/js/views/FileView/Base/Trash.vue
+15 -1
View File
@@ -31,6 +31,17 @@
</template>
</ContextMenu>
<MobileContextMenu>
<OptionGroup v-if="item">
<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" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
@@ -61,6 +72,7 @@
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -73,6 +85,7 @@
components: {
MobileActionButtonUpload,
MobileActionButton,
MobileContextMenu,
OptionGroup,
FileBrowser,
ContextMenu,
@@ -109,7 +122,8 @@
created() {
this.$store.dispatch('getTrash', this.$route.params.id)
events.$on('contextMenu:show', (event, item) => this.item = item)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
</script>
resources/js/views/FileView/Public/Public.vue
+23 -2
View File
@@ -40,6 +40,24 @@
</template>
</ContextMenu>
<MobileContextMenu>
<template v-slot:editor v-if="$checkPermission('editor')">
<OptionGroup>
<Option v-if="item" @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option v-if="item" @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="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
<template v-slot:visitor v-if="$checkPermission('visitor')">
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-if="$checkPermission('editor')" v-slot:file-actions-mobile>
@@ -88,7 +106,8 @@
</template>
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
@@ -103,6 +122,7 @@
components: {
MobileActionButtonUpload,
MobileActionButton,
MobileContextMenu,
ButtonUpload,
OptionGroup,
FileBrowser,
@@ -172,7 +192,8 @@
created() {
this.$store.dispatch('getFolder', this.$route.params.id)
events.$on('contextMenu:show', (event, item) => this.item = item)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
</script>
resources/js/views/Platform.vue
+2 -5
View File
@@ -22,7 +22,6 @@
<!--Mobile components-->
<FileSortingMobile />
<FileFilterMobile />
<FileMenuMobile />
<CreateListMobile />
@@ -38,7 +37,7 @@
<!--Sidebar-->
<NavigationPanel />
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view" :class="{'is-scaled-down': isScaledDown}">
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
<DesktopToolbar/>
<router-view :key="$route.fullPath" />
</div>
@@ -56,7 +55,6 @@
import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
import ShareCreatePopup from '/resources/js/components/Others/ShareCreatePopup'
import DesktopToolbar from '/resources/js/components/FilesView/DesktopToolbar'
import FileMenuMobile from '/resources/js/components/FilesView/FileMenuMobile'
import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup"
import ConfirmPopup from '/resources/js/components/Others/Popup/ConfirmPopup'
import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
@@ -85,7 +83,6 @@
RenameItemPopup,
ShareEditPopup,
DesktopToolbar,
FileMenuMobile,
MoveItemPopup,
ConfirmPopup,
FilePreview,
@@ -104,7 +101,7 @@
}
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
events.$emit('context-menu:show', event, item)
},
},
mounted() {
resources/js/views/Shared.vue
+3 -3
View File
@@ -17,7 +17,7 @@
<!-- Mobile components -->
<FileSortingMobile />
<FileMenuMobile />
<MobileContextMenu />
<MultiSelectToolbarMobile />
@@ -35,7 +35,7 @@
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup'
import FileMenuMobile from '/resources/js/components/FilesView/FileMenuMobile'
import MobileContextMenu from '/resources/js/components/FilesView/MobileContextMenu'
import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
@@ -54,7 +54,7 @@
FileSortingMobile,
ProcessingPopup,
RenameItemPopup,
FileMenuMobile,
MobileContextMenu,
MoveItemPopup,
FilePreview,
Vignette,
resources/js/views/Shared/SharedFileBrowser.vue
+1 -1
View File
@@ -69,7 +69,7 @@
this.$store.dispatch('browseShared')
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
events.$emit('context-menu:show', event, item)
},
initFileBrowser() {
// Get folder tree