FilePreview refactoring

2026-04-06 02:33:48 +00:00 · 2021-04-16 11:41:41 +02:00
parent b105c9fc8f
commit 2a02716a53
7 changed files with 48 additions and 72 deletions
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -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-billings.js": "/chunks/app-billings.js?id=82133cc16f55222bbbe6",
    "/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~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",
@@ -55,7 +55,7 @@
    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=08e2056bc3744b2ea8f9",
    "/chunks/plans.js": "/chunks/plans.js?id=83fc2cc3cd4b76c8f8f0",
    "/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~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=d0a44ee2cc3e9882c14a",
    "/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/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",
-    "/chunks/platform~chunks/shared.496eed45b3dff56f2e00.hot-update.js": "/chunks/platform~chunks/shared.496eed45b3dff56f2e00.hot-update.js",
-    "/chunks/platform~chunks/shared.9592eac112c383c06872.hot-update.js": "/chunks/platform~chunks/shared.9592eac112c383c06872.hot-update.js",
-    "/chunks/platform~chunks/shared.c3b50082ae398a2f5925.hot-update.js": "/chunks/platform~chunks/shared.c3b50082ae398a2f5925.hot-update.js",
-    "/chunks/platform~chunks/shared.d557ac15c70dda221a46.hot-update.js": "/chunks/platform~chunks/shared.d557ac15c70dda221a46.hot-update.js",
-    "/chunks/platform~chunks/shared.d090b3c20ed30b187d7f.hot-update.js": "/chunks/platform~chunks/shared.d090b3c20ed30b187d7f.hot-update.js",
-    "/chunks/platform~chunks/shared.9a989357ea4ab6b8a780.hot-update.js": "/chunks/platform~chunks/shared.9a989357ea4ab6b8a780.hot-update.js",
-    "/chunks/platform~chunks/shared.568845d02d2bbec9bdb5.hot-update.js": "/chunks/platform~chunks/shared.568845d02d2bbec9bdb5.hot-update.js",
-    "/chunks/platform~chunks/shared.be8facb3c2abbb9d2c25.hot-update.js": "/chunks/platform~chunks/shared.be8facb3c2abbb9d2c25.hot-update.js",
-    "/chunks/platform~chunks/shared.10e2778eacf31f8c8b7f.hot-update.js": "/chunks/platform~chunks/shared.10e2778eacf31f8c8b7f.hot-update.js",
-    "/chunks/platform~chunks/shared.a88a5e982bcfc96af428.hot-update.js": "/chunks/platform~chunks/shared.a88a5e982bcfc96af428.hot-update.js",
-    "/chunks/platform~chunks/shared.50a83c9501bf377bf4dd.hot-update.js": "/chunks/platform~chunks/shared.50a83c9501bf377bf4dd.hot-update.js",
-    "/chunks/platform~chunks/shared.88a67196692cf8f8a026.hot-update.js": "/chunks/platform~chunks/shared.88a67196692cf8f8a026.hot-update.js",
-    "/chunks/platform~chunks/shared.c1bcffeb375e20d5dcb5.hot-update.js": "/chunks/platform~chunks/shared.c1bcffeb375e20d5dcb5.hot-update.js",
-    "/chunks/platform~chunks/shared.92782a3e0e74c37a087b.hot-update.js": "/chunks/platform~chunks/shared.92782a3e0e74c37a087b.hot-update.js",
-    "/chunks/platform~chunks/shared.826a769c824a8cb29bbf.hot-update.js": "/chunks/platform~chunks/shared.826a769c824a8cb29bbf.hot-update.js"
+    "/chunks/platform~chunks/shared.dced5d2f93939d63cf2f.hot-update.js": "/chunks/platform~chunks/shared.dced5d2f93939d63cf2f.hot-update.js",
+    "/chunks/platform~chunks/shared.04755c3552d28e218479.hot-update.js": "/chunks/platform~chunks/shared.04755c3552d28e218479.hot-update.js",
+    "/chunks/platform~chunks/shared.ee3c905ed5714e259b6c.hot-update.js": "/chunks/platform~chunks/shared.ee3c905ed5714e259b6c.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.424dc018b4ad2094f8f0.hot-update.js": "/chunks/platform~chunks/shared.424dc018b4ad2094f8f0.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.1f14edfc94b2914f2040.hot-update.js": "/chunks/platform~chunks/shared.1f14edfc94b2914f2040.hot-update.js",
+    "/chunks/platform~chunks/shared.1d68e6cae1b4f6f2d932.hot-update.js": "/chunks/platform~chunks/shared.1d68e6cae1b4f6f2d932.hot-update.js",
+    "/chunks/platform~chunks/shared.bc34307dce4b5b82a055.hot-update.js": "/chunks/platform~chunks/shared.bc34307dce4b5b82a055.hot-update.js",
+    "/chunks/platform~chunks/shared.bb005a6dd98fc46ed3bc.hot-update.js": "/chunks/platform~chunks/shared.bb005a6dd98fc46ed3bc.hot-update.js",
+    "/chunks/platform~chunks/shared.01e6450d6f3a7f377430.hot-update.js": "/chunks/platform~chunks/shared.01e6450d6f3a7f377430.hot-update.js",
+    "/chunks/platform~chunks/shared.d964ced95c1366a62646.hot-update.js": "/chunks/platform~chunks/shared.d964ced95c1366a62646.hot-update.js",
+    "/chunks/platform~chunks/shared.2ff8f788d0b8a8bf4196.hot-update.js": "/chunks/platform~chunks/shared.2ff8f788d0b8a8bf4196.hot-update.js",
+    "/chunks/platform~chunks/shared.32e07db050d53c57ff06.hot-update.js": "/chunks/platform~chunks/shared.32e07db050d53c57ff06.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"
 }
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/resources/js/components/FilesView/FilePreview.vue
@@ -1,48 +1,37 @@
 <template>
 	<div
-        v-if="showFullPreview"
-        class="file-full-preview-wrapper"
-        id="fileFullPreview"
+        v-if="isFullPreview"
+        class="file-preview"
        ref="filePreview"
        tabindex="-1"
-        @click="closeContextMenu"
-        @keydown.esc="(showFullPreview = false), hideContextMenu()"
+        @keydown.esc="closeFilePreview"
        @keydown.right="next"
        @keydown.left="prev"
    >
-		<FilePreviewNavigationPanel />
-		<MediaFullPreview />
+		<FilePreviewToolbar />
+		<FilePreviewMedia />
 	</div>
 </template>

 <script>
-    import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
-    import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
-    import {mapGetters} from 'vuex'
+    import FilePreviewToolbar from '@/components/FilesView/FilePreviewToolbar'
+    import FilePreviewMedia from '@/components/FilesView/FilePreviewMedia'
    import {events} from '@/bus'

    export default {
        name: 'FilePreview',
        components: {
-            FilePreviewNavigationPanel,
-            MediaFullPreview,
-        },
-        computed: {
-            ...mapGetters([
-                'fileInfoDetail',
-                'data'
-            ])
+            FilePreviewToolbar,
+            FilePreviewMedia,
        },
        data() {
            return {
-                showFullPreview: false
+                isFullPreview: false
            }
        },
        methods: {
-            closeContextMenu(event) {
-                if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
-                    return
-                }
+            closeFilePreview() {
+                this.isFullPreview = false

                events.$emit('showContextMenuPreview:hide')
            },
@@ -51,43 +40,38 @@
            },
            prev() {
                events.$emit('file-preview:prev')
-            },
-            hideContextMenu() {
-                events.$emit('showContextMenuPreview:hide')
            }
        },
-
        updated() {
-            //Focus file preview for key binding
-            if (this.showFullPreview) {
+            if (this.isFullPreview) {
                this.$refs.filePreview.focus()
            }
        },
        mounted() {
            events.$on('file-preview:show', () => {
-                this.showFullPreview = true
+                this.isFullPreview = true
            })
            events.$on('file-preview:hide', () => {
-                this.showFullPreview = false
+                this.isFullPreview = false
            })
        }
    }
 </script>

 <style lang="scss" scoped>
-@import '@assets/vuefilemanager/_variables';
+    @import '@assets/vuefilemanager/_variables';

-.file-full-preview-wrapper {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 7;
-    background-color: white;
-}
-
-@media (prefers-color-scheme: dark) {
-    .file-full-preview-wrapper {
-        background-color: $dark_mode_background;
+    .file-preview {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 7;
+        background-color: white;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .file-preview {
+            background-color: $dark_mode_background;
+        }
    }
-}
 </style>
--- a/resources/js/components/FilesView/FilePreviewMedia.vue
+++ b/resources/js/components/FilesView/FilePreviewMedia.vue
@@ -129,13 +129,11 @@ export default {
                this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)

                this.files = []
-                //this.getFilesForView()
            }
        },
        data(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.files = []
-                //this.getFilesForView()
            }
        },
    },
@@ -215,7 +213,7 @@ export default {
    .prev, .next {
        cursor: pointer;
        position: absolute;
-        top: 35%;
+        top: 45%;
        display: flex;
        justify-content: center;
        color: $text;
--- a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
@@ -32,7 +32,7 @@
    import {events} from '@/bus'

    export default {
-        name: 'FilePreviewNavigationPanel',
+        name: 'FilePreviewToolbar',
        components: {
            MoreHorizontalIcon,
            ToolbarButton,
--- a/resources/js/components/Others/MoveItemPopup.vue
+++ b/resources/js/components/Others/MoveItemPopup.vue
@@ -94,9 +94,6 @@
                    this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem})
                }

-                console.log('to item:', this.selectedFolder);
-                console.log('isSelectedItem:', this.pickedItem);
-
                // Close popup
                events.$emit('popup:close')

--- a/resources/js/store/modules/fileFunctions.js
+++ b/resources/js/store/modules/fileFunctions.js
@@ -89,8 +89,6 @@ const actions = {
            ? `/api/editor/move/${router.currentRoute.params.token}`
            : '/api/move'

-        console.log(to_item);
-
        axios
            .post(route, {
                to_id: to_item.id ? to_item.id : null,
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
@@ -321,8 +321,6 @@ export default {
                    get_started_description: response.data.get_started_description,
                    footer_content: response.data.footer_content
                }
-
-                console.log(this.app);
            })
            .finally(() => {
                this.isLoading = false