mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-06 02:33:48 +00:00
Merge remote-tracking branch 'origin/file-preview-context-menu'
# Conflicts: # composer.lock # public/mix-manifest.json
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="isVisible" class="popover-item">
|
||||
<div v-if="isVisible" class="popover-item" :class="side">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,7 +10,8 @@
|
||||
export default {
|
||||
name: 'PopoverItem',
|
||||
props: [
|
||||
'name'
|
||||
'side',
|
||||
'name',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
@@ -39,8 +40,15 @@
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
|
||||
&.left {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -1,29 +1,13 @@
|
||||
<template>
|
||||
<div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{ 'filePreviewFixed' : showFromPreview}">
|
||||
|
||||
<!-- File Preview -->
|
||||
<div class="menu-options" id="menu-list" v-if="showFromPreview">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="shareItem" v-if="$checkPermission('master')" :title="item.shared
|
||||
? $t('context_menu.share_edit')
|
||||
: $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</div>
|
||||
<div v-show="isVisible" @click="closeAndResetContextMenu" :style="{top: positionY + 'px', left: positionX + 'px'}" class="contextmenu" ref="contextmenu">
|
||||
|
||||
<!-- Trash location-->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
|
||||
|
||||
<!-- Single options -->
|
||||
<OptionGroup v-if="isMultiSelectContextMenu">
|
||||
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
|
||||
<Option @click.native="deleteItem" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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>
|
||||
|
||||
@@ -34,8 +18,8 @@
|
||||
|
||||
<!-- Multi options -->
|
||||
<OptionGroup v-if="!isMultiSelectContextMenu">
|
||||
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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>
|
||||
|
||||
@@ -45,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Shared location with MASTER permission-->
|
||||
<div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
|
||||
<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">
|
||||
@@ -55,9 +39,9 @@
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="item && isMultiSelectContextMenu">
|
||||
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="shareItem" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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">
|
||||
@@ -75,7 +59,7 @@
|
||||
|
||||
<OptionGroup v-if="item && !isMultiSelectContextMenu">
|
||||
<Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
|
||||
@@ -84,7 +68,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Base location with MASTER permission-->
|
||||
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
|
||||
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
|
||||
|
||||
<!-- No Files options -->
|
||||
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && isMultiSelectContextMenu && !item">
|
||||
@@ -97,12 +81,10 @@
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="item && isMultiSelectContextMenu">
|
||||
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="shareItem" :title="item.shared
|
||||
? $t('context_menu.share_edit')
|
||||
: $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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="$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 ">
|
||||
@@ -113,14 +95,12 @@
|
||||
|
||||
<!-- Multi options -->
|
||||
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !isMultiSelectContextMenu && item && !hasFile">
|
||||
<Option @click.native="addToFavourites" :title=" isInFavourites
|
||||
? $t('context_menu.remove_from_favourites')
|
||||
: $t('context_menu.add_to_favourites')" icon="favourites" />
|
||||
<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="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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 && !hasFolder">
|
||||
@@ -129,7 +109,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Base & Public location with EDITOR permission-->
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview " id="menu-list" class="menu-options">
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" id="menu-list" class="menu-options">
|
||||
|
||||
<!-- No Files options -->
|
||||
<OptionGroup v-if="isMultiSelectContextMenu && !item">
|
||||
@@ -138,9 +118,9 @@
|
||||
|
||||
<!-- Single options -->
|
||||
<OptionGroup v-if="item && isMultiSelectContextMenu">
|
||||
<Option @click.native="renameItem" :title=" $t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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">
|
||||
@@ -151,8 +131,8 @@
|
||||
|
||||
<!-- Multi options -->
|
||||
<OptionGroup v-if="item && !isMultiSelectContextMenu">
|
||||
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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 && !hasFolder">
|
||||
@@ -161,7 +141,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Base & Public location with VISITOR permission-->
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview" id="menu-list" class="menu-options">
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
|
||||
|
||||
<!-- Single options -->
|
||||
<OptionGroup v-if="item && isMultiSelectContextMenu">
|
||||
@@ -233,7 +213,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFromPreview: false,
|
||||
item: undefined,
|
||||
isVisible: false,
|
||||
positionX: 0,
|
||||
@@ -247,35 +226,9 @@ export default {
|
||||
emptyTrash() {
|
||||
this.$store.dispatch('emptyTrash')
|
||||
},
|
||||
restoreItem() {
|
||||
|
||||
// If is item not in selected items restore just this single item
|
||||
if (!this.clipboard.includes(this.item))
|
||||
this.$store.dispatch('restoreItem', this.item)
|
||||
|
||||
// If is item in selected items restore all items from clipboard
|
||||
if (this.clipboard.includes(this.item))
|
||||
this.$store.dispatch('restoreItem', null)
|
||||
},
|
||||
shareCancel() {
|
||||
this.$store.dispatch('shareCancel')
|
||||
},
|
||||
renameItem() {
|
||||
events.$emit('popup:open', {name: 'rename-item', item: this.item})
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', {name: 'move', item: [this.item]})
|
||||
},
|
||||
shareItem() {
|
||||
let event = this.item.shared
|
||||
? 'share-edit'
|
||||
: 'share-create'
|
||||
|
||||
events.$emit('popup:open', {
|
||||
name: event,
|
||||
item: this.item
|
||||
})
|
||||
},
|
||||
addToFavourites() {
|
||||
// Check if folder is in favourites and then add/remove from favourites
|
||||
if (
|
||||
@@ -309,16 +262,6 @@ export default {
|
||||
// Show panel if is not open
|
||||
this.$store.dispatch('fileInfoToggle', true)
|
||||
},
|
||||
deleteItem() {
|
||||
// If is context menu open on non selected item delete this single item
|
||||
if (!this.clipboard.includes(this.item)) {
|
||||
this.$store.dispatch('deleteItem', this.item)
|
||||
}
|
||||
// If is context menu open to multi selected items dele this selected items
|
||||
if (this.clipboard.includes(this.item)) {
|
||||
this.$store.dispatch('deleteItem')
|
||||
}
|
||||
},
|
||||
createFolder() {
|
||||
this.$store.dispatch('createFolder', {
|
||||
name: this.$t('popup_create_folder.folder_default_name')
|
||||
@@ -370,40 +313,9 @@ export default {
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showFilePreviewMenu() {
|
||||
let container = document.getElementById('fast-preview-menu')
|
||||
if (container) {
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 51
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
item(newValue, oldValue) {
|
||||
if (oldValue != undefined && this.showFromPreview) {
|
||||
this.showFromPreview = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('showContextMenuPreview:show', (item) => {
|
||||
if (!this.showFromPreview) {
|
||||
this.item = item
|
||||
this.showFromPreview = true
|
||||
this.showFilePreviewMenu()
|
||||
} else if (this.showFromPreview) {
|
||||
this.showFromPreview = false
|
||||
this.item = undefined
|
||||
}
|
||||
})
|
||||
|
||||
events.$on('showContextMenuPreview:hide', () => {
|
||||
this.isVisible = false
|
||||
this.showFromPreview = false
|
||||
this.item = undefined
|
||||
})
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => {
|
||||
// Store item
|
||||
this.item = item
|
||||
@@ -445,11 +357,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.filePreviewFixed {
|
||||
position: fixed !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<ToolbarGroup>
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
|
||||
<PopoverItem name="desktop-sorting">
|
||||
<PopoverItem name="desktop-sorting" side="left">
|
||||
<FileSortingOptions />
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<!--Trash location-->
|
||||
<MenuMobileGroup v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')">
|
||||
<OptionGroup v-if="clipboard[0]">
|
||||
<Option @click.native="restoreItem" :title="$t('context_menu.restore')" icon="restore" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="delete" />
|
||||
<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>
|
||||
@@ -22,9 +22,9 @@
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="clipboard[0]">
|
||||
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="shareItem" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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>
|
||||
@@ -40,10 +40,10 @@
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="clipboard[0]">
|
||||
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="shareItem" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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>
|
||||
@@ -55,9 +55,9 @@
|
||||
<!--Base location for guest-->
|
||||
<MenuMobileGroup v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')">
|
||||
<OptionGroup>
|
||||
<Option v-if="clipboard[0]" @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
|
||||
<Option v-if="clipboard[0]" @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
<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>
|
||||
@@ -129,19 +129,6 @@ export default {
|
||||
downloadFolder() {
|
||||
this.$store.dispatch('downloadFolder', this.clipboard[0])
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', {name: 'move', item: [this.clipboard[0]]})
|
||||
},
|
||||
shareItem() {
|
||||
let event = this.clipboard[0].shared
|
||||
? 'share-edit'
|
||||
: 'share-create'
|
||||
|
||||
events.$emit('popup:open', {
|
||||
name: event,
|
||||
item: this.clipboard[0]
|
||||
})
|
||||
},
|
||||
addToFavourites() {
|
||||
if (this.favourites && !this.favourites.find(el => el.id === this.clipboard[0].id)) {
|
||||
this.$store.dispatch('addToFavourites', this.clipboard[0])
|
||||
@@ -154,16 +141,7 @@ export default {
|
||||
this.clipboard[0].file_url,
|
||||
this.clipboard[0].name + '.' + this.clipboard[0].mimetype
|
||||
)
|
||||
},
|
||||
deleteItem() {
|
||||
this.$store.dispatch('deleteItem')
|
||||
},
|
||||
restoreItem() {
|
||||
this.$store.dispatch('restoreItem', this.clipboard[0])
|
||||
},
|
||||
renameItem() {
|
||||
events.$emit('popup:open', {name: 'rename-item', item: this.clipboard[0]})
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -32,8 +32,6 @@
|
||||
methods: {
|
||||
closeFilePreview() {
|
||||
this.isFullPreview = false
|
||||
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
},
|
||||
next() {
|
||||
events.$emit('file-preview:next')
|
||||
|
||||
@@ -6,9 +6,22 @@
|
||||
<p class="title">{{ clipboard[0].name }}</p>
|
||||
<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
|
||||
</div>
|
||||
<span @click.stop="menuOpen" id="fast-preview-menu" class="fast-menu-icon group">
|
||||
<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
|
||||
</span>
|
||||
<PopoverWrapper>
|
||||
<span @click.stop="showItemContextMenu" id="fast-preview-menu" class="fast-menu-icon group">
|
||||
<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
|
||||
</span>
|
||||
<PopoverItem name="file-preview-contextmenu" side="right">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<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="sharingTitle" icon="share" v-if="$checkPermission('master')" />
|
||||
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
</div>
|
||||
|
||||
<div class="created-at-wrapper">
|
||||
@@ -22,7 +35,7 @@
|
||||
</div>
|
||||
<div class="navigation-tool-wrapper">
|
||||
<ToolbarButton @click.native="downloadItem" class="mobile-hide" source="download" :action="$t('actions.download')" />
|
||||
<ToolbarButton v-if="canShareItem" @click.native="shareItem" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
|
||||
<ToolbarButton v-if="canShareItem" @click.native="$shareFileOrFolder(clipboard[0])" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
|
||||
<ToolbarButton v-if="isImage" @click.native="printMethod()" source="print" :action="$t('actions.print')" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,6 +43,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
|
||||
import PopoverItem from '@/components/Desktop/PopoverItem'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import {XIcon, MoreHorizontalIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
@@ -38,6 +56,10 @@
|
||||
export default {
|
||||
name: 'FilePreviewToolbar',
|
||||
components: {
|
||||
PopoverWrapper,
|
||||
PopoverItem,
|
||||
OptionGroup,
|
||||
Option,
|
||||
MoreHorizontalIcon,
|
||||
ToolbarButton,
|
||||
XIcon,
|
||||
@@ -47,6 +69,11 @@
|
||||
'clipboard',
|
||||
'entries'
|
||||
]),
|
||||
sharingTitle() {
|
||||
return this.clipboard[0].shared
|
||||
? this.$t('context_menu.share_edit')
|
||||
: this.$t('context_menu.share')
|
||||
},
|
||||
isImage() {
|
||||
return this.clipboard[0].type === 'image'
|
||||
},
|
||||
@@ -90,6 +117,13 @@
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showItemContextMenu() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit('mobile-menu:show', 'file-menu')
|
||||
} else {
|
||||
events.$emit('popover:open', 'file-preview-contextmenu')
|
||||
}
|
||||
},
|
||||
increaseSizeOfPDF() {
|
||||
events.$emit('document-zoom:in')
|
||||
},
|
||||
@@ -110,26 +144,8 @@
|
||||
this.clipboard[0].name + '.' + this.clipboard[0].mimetype
|
||||
)
|
||||
},
|
||||
shareItem() {
|
||||
let event = this.clipboard[0].shared
|
||||
? 'share-edit'
|
||||
: 'share-create'
|
||||
|
||||
events.$emit('popup:open', {
|
||||
name: event,
|
||||
item: this.clipboard[0]
|
||||
})
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit('mobile-menu:show', 'file-menu')
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:show', this.clipboard[0])
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit('file-preview:hide')
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,15 +68,7 @@
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.preview-sorting {
|
||||
svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
|
||||
}
|
||||
|
||||
rect, line {
|
||||
@include transition(150ms);
|
||||
}
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
45
resources/js/helpers.js
vendored
45
resources/js/helpers.js
vendored
@@ -1,12 +1,49 @@
|
||||
import i18n from '@/i18n/index'
|
||||
import store from './store/index'
|
||||
import {debounce, includes, isArray} from "lodash";
|
||||
import {debounce, isArray} from "lodash";
|
||||
import {events} from './bus'
|
||||
import axios from 'axios'
|
||||
|
||||
const Helpers = {
|
||||
install(Vue) {
|
||||
|
||||
Vue.prototype.$renameFileOrFolder = function (entry) {
|
||||
events.$emit('popup:open', {name: 'rename-item', item: entry})
|
||||
}
|
||||
|
||||
Vue.prototype.$moveFileOrFolder = function (entry) {
|
||||
events.$emit('popup:open', {name: 'move', item: [entry]})
|
||||
}
|
||||
|
||||
Vue.prototype.$deleteFileOrFolder = function (entry) {
|
||||
if (!this.$store.getters.clipboard.includes(entry)) {
|
||||
this.$store.dispatch('deleteItem', entry)
|
||||
}
|
||||
|
||||
if (this.$store.getters.clipboard.includes(entry)) {
|
||||
this.$store.dispatch('deleteItem')
|
||||
}
|
||||
}
|
||||
|
||||
Vue.prototype.$restoreFileOrFolder = function (entry) {
|
||||
if (!this.$store.getters.clipboard.includes(entry))
|
||||
this.$store.dispatch('restoreItem', entry)
|
||||
|
||||
if (this.$store.getters.clipboard.includes(entry))
|
||||
this.$store.dispatch('restoreItem', null)
|
||||
}
|
||||
|
||||
Vue.prototype.$shareFileOrFolder = function (entry) {
|
||||
let event = entry.shared
|
||||
? 'share-edit'
|
||||
: 'share-create'
|
||||
|
||||
events.$emit('popup:open', {
|
||||
name: event,
|
||||
item: entry
|
||||
})
|
||||
}
|
||||
|
||||
Vue.prototype.$searchFiles = debounce(function (value) {
|
||||
|
||||
if (value !== '' && typeof value !== 'undefined') {
|
||||
@@ -227,7 +264,7 @@ const Helpers = {
|
||||
|
||||
Vue.prototype.$isThisRoute = function (route, locations) {
|
||||
|
||||
return includes(locations, route.name)
|
||||
return locations.includes(route.name)
|
||||
}
|
||||
|
||||
Vue.prototype.$isThisLocation = function (location) {
|
||||
@@ -237,7 +274,7 @@ const Helpers = {
|
||||
|
||||
// Check if type is object
|
||||
if (typeof location === 'Object' || location instanceof Object) {
|
||||
return includes(location, currentLocation)
|
||||
return location.includes(currentLocation)
|
||||
|
||||
} else {
|
||||
return currentLocation === location
|
||||
@@ -250,7 +287,7 @@ const Helpers = {
|
||||
|
||||
// Check if type is object
|
||||
if (typeof type === 'Object' || type instanceof Object) {
|
||||
return includes(type, currentPermission)
|
||||
return type.includes(currentPermission)
|
||||
|
||||
} else {
|
||||
return currentPermission === type
|
||||
|
||||
Reference in New Issue
Block a user