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

FilePreview refactoring

Browse Source
This commit is contained in:
Peter Papp
2021-04-16 11:41:41 +02:00
parent b105c9fc8f
commit 2a02716a53
7 changed files with 48 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/mix-manifest.json
View File

@@ -16,7 +16,7 @@
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=04f0cd9719723459b685", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=04f0cd9719723459b685",
"/chunks/app-billings.js": "/chunks/app-billings.js?id=82133cc16f55222bbbe6", "/chunks/app-billings.js": "/chunks/app-billings.js?id=82133cc16f55222bbbe6",
"/chunks/app-email.js": "/chunks/app-email.js?id=c578a85112c6a4b1ed0e", "/chunks/app-email.js": "/chunks/app-email.js?id=c578a85112c6a4b1ed0e",
"/chunks/app-index.js": "/chunks/app-index.js?id=7f07dceace5c9c8255bb", "/chunks/app-index.js": "/chunks/app-index.js?id=5bf1c4a8df85876205a0",
"/chunks/app-language.js": "/chunks/app-language.js?id=12dade51f33278247630", "/chunks/app-language.js": "/chunks/app-language.js?id=12dade51f33278247630",
"/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=46d89e7310e4babf1999", "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=46d89e7310e4babf1999",
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~38c276fc.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~38c276fc.js?id=cdb295c76700c5934986", "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~38c276fc.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~38c276fc.js?id=cdb295c76700c5934986",
@@ -55,7 +55,7 @@
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=08e2056bc3744b2ea8f9", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=08e2056bc3744b2ea8f9",
"/chunks/plans.js": "/chunks/plans.js?id=83fc2cc3cd4b76c8f8f0", "/chunks/plans.js": "/chunks/plans.js?id=83fc2cc3cd4b76c8f8f0",
"/chunks/platform.js": "/chunks/platform.js?id=7de76831b9b233a9620c", "/chunks/platform.js": "/chunks/platform.js?id=7de76831b9b233a9620c",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=cfc99937f45628eaba03", "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=5d2da5bacf3f8660564b",
"/chunks/profile.js": "/chunks/profile.js?id=1c1c666004fb44b1c404", "/chunks/profile.js": "/chunks/profile.js?id=1c1c666004fb44b1c404",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=d0a44ee2cc3e9882c14a", "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=d0a44ee2cc3e9882c14a",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e00ee12cde704060e15b", "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e00ee12cde704060e15b",
@@ -93,19 +93,20 @@
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5e36d91.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5e36d91.js?id=170765b4fd923b62195c", "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5e36d91.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5e36d91.js?id=170765b4fd923b62195c",
"/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js?id=66afa0e341251a68c3d3", "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js?id=66afa0e341251a68c3d3",
"/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=eb141834bc24b72d8e92", "/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=eb141834bc24b72d8e92",
"/chunks/platform~chunks/shared.496eed45b3dff56f2e00.hot-update.js": "/chunks/platform~chunks/shared.496eed45b3dff56f2e00.hot-update.js", "/chunks/platform~chunks/shared.dced5d2f93939d63cf2f.hot-update.js": "/chunks/platform~chunks/shared.dced5d2f93939d63cf2f.hot-update.js",
"/chunks/platform~chunks/shared.9592eac112c383c06872.hot-update.js": "/chunks/platform~chunks/shared.9592eac112c383c06872.hot-update.js", "/chunks/platform~chunks/shared.04755c3552d28e218479.hot-update.js": "/chunks/platform~chunks/shared.04755c3552d28e218479.hot-update.js",
"/chunks/platform~chunks/shared.c3b50082ae398a2f5925.hot-update.js": "/chunks/platform~chunks/shared.c3b50082ae398a2f5925.hot-update.js", "/chunks/platform~chunks/shared.ee3c905ed5714e259b6c.hot-update.js": "/chunks/platform~chunks/shared.ee3c905ed5714e259b6c.hot-update.js",
"/chunks/platform~chunks/shared.d557ac15c70dda221a46.hot-update.js": "/chunks/platform~chunks/shared.d557ac15c70dda221a46.hot-update.js", "/chunks/files~chunks/shared-files~chunks/shared/file-browser.cbf7e263358bc1a71544.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.cbf7e263358bc1a71544.hot-update.js",
"/chunks/platform~chunks/shared.d090b3c20ed30b187d7f.hot-update.js": "/chunks/platform~chunks/shared.d090b3c20ed30b187d7f.hot-update.js", "/chunks/platform~chunks/shared.424dc018b4ad2094f8f0.hot-update.js": "/chunks/platform~chunks/shared.424dc018b4ad2094f8f0.hot-update.js",
"/chunks/platform~chunks/shared.9a989357ea4ab6b8a780.hot-update.js": "/chunks/platform~chunks/shared.9a989357ea4ab6b8a780.hot-update.js", "/chunks/files~chunks/shared-files~chunks/shared/file-browser.6cac5c998fb28120c429.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.6cac5c998fb28120c429.hot-update.js",
"/chunks/platform~chunks/shared.568845d02d2bbec9bdb5.hot-update.js": "/chunks/platform~chunks/shared.568845d02d2bbec9bdb5.hot-update.js", "/chunks/platform~chunks/shared.1f14edfc94b2914f2040.hot-update.js": "/chunks/platform~chunks/shared.1f14edfc94b2914f2040.hot-update.js",
"/chunks/platform~chunks/shared.be8facb3c2abbb9d2c25.hot-update.js": "/chunks/platform~chunks/shared.be8facb3c2abbb9d2c25.hot-update.js", "/chunks/platform~chunks/shared.1d68e6cae1b4f6f2d932.hot-update.js": "/chunks/platform~chunks/shared.1d68e6cae1b4f6f2d932.hot-update.js",
"/chunks/platform~chunks/shared.10e2778eacf31f8c8b7f.hot-update.js": "/chunks/platform~chunks/shared.10e2778eacf31f8c8b7f.hot-update.js", "/chunks/platform~chunks/shared.bc34307dce4b5b82a055.hot-update.js": "/chunks/platform~chunks/shared.bc34307dce4b5b82a055.hot-update.js",
"/chunks/platform~chunks/shared.a88a5e982bcfc96af428.hot-update.js": "/chunks/platform~chunks/shared.a88a5e982bcfc96af428.hot-update.js", "/chunks/platform~chunks/shared.bb005a6dd98fc46ed3bc.hot-update.js": "/chunks/platform~chunks/shared.bb005a6dd98fc46ed3bc.hot-update.js",
"/chunks/platform~chunks/shared.50a83c9501bf377bf4dd.hot-update.js": "/chunks/platform~chunks/shared.50a83c9501bf377bf4dd.hot-update.js", "/chunks/platform~chunks/shared.01e6450d6f3a7f377430.hot-update.js": "/chunks/platform~chunks/shared.01e6450d6f3a7f377430.hot-update.js",
"/chunks/platform~chunks/shared.88a67196692cf8f8a026.hot-update.js": "/chunks/platform~chunks/shared.88a67196692cf8f8a026.hot-update.js", "/chunks/platform~chunks/shared.d964ced95c1366a62646.hot-update.js": "/chunks/platform~chunks/shared.d964ced95c1366a62646.hot-update.js",
"/chunks/platform~chunks/shared.c1bcffeb375e20d5dcb5.hot-update.js": "/chunks/platform~chunks/shared.c1bcffeb375e20d5dcb5.hot-update.js", "/chunks/platform~chunks/shared.2ff8f788d0b8a8bf4196.hot-update.js": "/chunks/platform~chunks/shared.2ff8f788d0b8a8bf4196.hot-update.js",
"/chunks/platform~chunks/shared.92782a3e0e74c37a087b.hot-update.js": "/chunks/platform~chunks/shared.92782a3e0e74c37a087b.hot-update.js", "/chunks/platform~chunks/shared.32e07db050d53c57ff06.hot-update.js": "/chunks/platform~chunks/shared.32e07db050d53c57ff06.hot-update.js",
"/chunks/platform~chunks/shared.826a769c824a8cb29bbf.hot-update.js": "/chunks/platform~chunks/shared.826a769c824a8cb29bbf.hot-update.js" "/chunks/platform~chunks/shared.4642b866142aafb29068.hot-update.js": "/chunks/platform~chunks/shared.4642b866142aafb29068.hot-update.js",
"/chunks/app-index.85ccf76d50e9a42f6ece.hot-update.js": "/chunks/app-index.85ccf76d50e9a42f6ece.hot-update.js"
} }

72
resources/js/components/FilesView/FilePreview.vue
View File

@@ -1,48 +1,37 @@
<template> <template>
<div <div
v-if="showFullPreview" v-if="isFullPreview"
class="file-full-preview-wrapper" class="file-preview"
id="fileFullPreview"
ref="filePreview" ref="filePreview"
tabindex="-1" tabindex="-1"
@click="closeContextMenu" @keydown.esc="closeFilePreview"
@keydown.esc="(showFullPreview = false), hideContextMenu()"
@keydown.right="next" @keydown.right="next"
@keydown.left="prev" @keydown.left="prev"
> >
<FilePreviewNavigationPanel /> <FilePreviewToolbar />
<MediaFullPreview /> <FilePreviewMedia />
</div> </div>
</template> </template>
<script> <script>
import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel' import FilePreviewToolbar from '@/components/FilesView/FilePreviewToolbar'
import MediaFullPreview from '@/components/FilesView/MediaFullPreview' import FilePreviewMedia from '@/components/FilesView/FilePreviewMedia'
import {mapGetters} from 'vuex'
import {events} from '@/bus' import {events} from '@/bus'
export default { export default {
name: 'FilePreview', name: 'FilePreview',
components: { components: {
FilePreviewNavigationPanel, FilePreviewToolbar,
MediaFullPreview, FilePreviewMedia,
},
computed: {
...mapGetters([
'fileInfoDetail',
'data'
])
}, },
data() { data() {
return { return {
showFullPreview: false isFullPreview: false
} }
}, },
methods: { methods: {
closeContextMenu(event) { closeFilePreview() {
if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') { this.isFullPreview = false
return
}
events.$emit('showContextMenuPreview:hide') events.$emit('showContextMenuPreview:hide')
}, },
@@ -51,43 +40,38 @@
}, },
prev() { prev() {
events.$emit('file-preview:prev') events.$emit('file-preview:prev')
},
hideContextMenu() {
events.$emit('showContextMenuPreview:hide')
} }
}, },
updated() { updated() {
//Focus file preview for key binding if (this.isFullPreview) {
if (this.showFullPreview) {
this.$refs.filePreview.focus() this.$refs.filePreview.focus()
} }
}, },
mounted() { mounted() {
events.$on('file-preview:show', () => { events.$on('file-preview:show', () => {
this.showFullPreview = true this.isFullPreview = true
}) })
events.$on('file-preview:hide', () => { events.$on('file-preview:hide', () => {
this.showFullPreview = false this.isFullPreview = false
}) })
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@assets/vuefilemanager/_variables'; @import '@assets/vuefilemanager/_variables';
.file-full-preview-wrapper { .file-preview {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 7; z-index: 7;
background-color: white; background-color: white;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.file-full-preview-wrapper { .file-preview {
background-color: $dark_mode_background; background-color: $dark_mode_background;
}
} }
}
</style> </style>

4
resources/js/components/FilesView/MediaFullPreview.vue → resources/js/components/FilesView/FilePreviewMedia.vue
View File

@@ -129,13 +129,11 @@ export default {
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile) this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
this.files = [] this.files = []
//this.getFilesForView()
} }
}, },
data(newValue, oldValue) { data(newValue, oldValue) {
if (newValue !== oldValue) { if (newValue !== oldValue) {
this.files = [] this.files = []
//this.getFilesForView()
} }
}, },
}, },
@@ -215,7 +213,7 @@ export default {
.prev, .next { .prev, .next {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 35%; top: 45%;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $text; color: $text;

2
resources/js/components/FilesView/FilePreviewNavigationPanel.vue → resources/js/components/FilesView/FilePreviewToolbar.vue
View File

@@ -32,7 +32,7 @@
import {events} from '@/bus' import {events} from '@/bus'
export default { export default {
name: 'FilePreviewNavigationPanel', name: 'FilePreviewToolbar',
components: { components: {
MoreHorizontalIcon, MoreHorizontalIcon,
ToolbarButton, ToolbarButton,

3
resources/js/components/Others/MoveItemPopup.vue
View File

@@ -94,9 +94,6 @@
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem}) this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem})
} }
console.log('to item:', this.selectedFolder);
console.log('isSelectedItem:', this.pickedItem);
// Close popup // Close popup
events.$emit('popup:close') events.$emit('popup:close')

2
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -89,8 +89,6 @@ const actions = {
? `/api/editor/move/${router.currentRoute.params.token}` ? `/api/editor/move/${router.currentRoute.params.token}`
: '/api/move' : '/api/move'
console.log(to_item);
axios axios
.post(route, { .post(route, {
to_id: to_item.id ? to_item.id : null, to_id: to_item.id ? to_item.id : null,

2
resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
View File

@@ -321,8 +321,6 @@ export default {
get_started_description: response.data.get_started_description, get_started_description: response.data.get_started_description,
footer_content: response.data.footer_content footer_content: response.data.footer_content
} }
console.log(this.app);
}) })
.finally(() => { .finally(() => {
this.isLoading = false this.isLoading = false