- Mobile menu components refactoring

- Components name renaming

resources/js/components/Others/CreateFolderPopup.vue

@@ -55,7 +55,7 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'CreateFolder',
+        name: 'CreateFolderPopup',
         components: {
             ValidationProvider,
             ValidationObserver,

resources/js/components/Others/FilePreviewDetail.vue

@@ -0,0 +1,61 @@
+<template>
+    <div v-if="canBePreview" class="preview">
+        <img v-if="fileInfoDetail[0].type == 'image' && fileInfoDetail[0].thumbnail" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
+        <audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
+        <video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
+            <source :src="fileInfoDetail[0].file_url" type="video/mp4">
+        </video>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import { includes } from 'lodash'
+
+    export default {
+        name: 'FilePreview',
+        computed: {
+            ...mapGetters(['fileInfoDetail']),
+            canBePreview() {
+                return this.fileInfoDetail[0] && ! includes([
+                    'folder', 'file'
+                ], this.fileInfoDetail[0].type)
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vuefilemanager/_variables';
+    @import '@assets/vuefilemanager/_mixins';
+
+    .preview {
+        width: 100%;
+        display: block;
+        margin-bottom: 7px;
+
+        img {
+            border-radius: 4px;
+            overflow: hidden;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        audio {
+            width: 100%;
+            &::-webkit-media-controls-panel {
+                background-color: $light_background;
+            }
+
+            &::-webkit-media-controls-play-button {
+                color: $theme;
+            }
+        }
+
+        video {
+            width: 100%;
+            height: auto;
+            border-radius: 3px;
+        }
+    }
+</style>

resources/js/components/Others/MobileNavigation.vue

@@ -4,25 +4,18 @@
             <nav v-if="isVisible" class="mobile-navigation">
 
                 <!--User Info-->
-                <div class="user-info">
-                    <UserAvatar size="large"/>
-                    <UserHeadline/>
-                </div>
+                <UserHeadline class="user-info"/>
 
                 <!--Navigation-->
                 <MenuItemList :navigation="navigation" @menu="action"/>
             </nav>
         </transition>
-        <transition name="fade">
-            <div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
-        </transition>
     </div>
 </template>
 
 <script>
     import UserHeadline from '@/components/Sidebar/UserHeadline'
     import MenuItemList from '@/components/Mobile/MenuItemList'
-    import UserAvatar from '@/components/Others/UserAvatar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -31,7 +24,6 @@
         components: {
             MenuItemList,
             UserHeadline,
-            UserAvatar,
         },
         computed: {
             ...mapGetters(['user', 'homeDirectory']),
@@ -43,7 +35,7 @@
                         routeName: 'Files',
                         isVisible: true,
                     },
-                    {
+                    /*{
                         icon: 'latest',
                         title: this.$t('menu.latest'),
                         routeName: 'Files',
@@ -60,7 +52,7 @@
                         title: this.$t('menu.trash'),
                         routeName: 'Files',
                         isVisible: true,
-                    },
+                    },*/
                     {
                         icon: 'user',
                         title: this.$t('menu.settings'),
@@ -90,13 +82,13 @@
         methods: {
             action(name) {
 
-                if (name === 'latest') {
+                /*if (name === 'latest') {
                     this.$store.dispatch('getLatest')
                 }
 
                 if (name === 'trash') {
                     this.$store.dispatch('getTrash')
-                }
+                }*/
 
                 if (name === 'hard-drive') {
                     this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
@@ -106,18 +98,12 @@
                     this.$store.dispatch('logOut')
                 }
 
-                this.closeAndResetContextMenu()
+                events.$emit('mobile-navigation:hide')
             },
-            closeAndResetContextMenu() {
-                this.isVisible = false
-
-                events.$emit('hide:mobile-navigation')
-            }
         },
         created() {
-            events.$on('show:mobile-navigation', () => {
-                this.isVisible = true
-            })
+            events.$on('mobile-navigation:show', () => this.isVisible = true)
+            events.$on('mobile-navigation:hide', () => this.isVisible = false)
         }
     }
 </script>
@@ -137,33 +123,14 @@
         background: white;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
-        min-height: 440px;
         max-height: 80%;
         overflow-y: auto;
     }
 
-    .vignette {
-        background: rgba(0, 0, 0, 0.35);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 9;
-        cursor: pointer;
-        opacity: 1;
-    }
-
     .user-info {
-        display: flex;
-        align-items: center;
         margin-bottom: 10px;
     }
 
-    @media only screen and (max-width: 690px) {
-
-    }
-
     @media (prefers-color-scheme: dark) {
         .mobile-navigation {
             background: $dark_mode_background;

resources/js/components/Others/MoveItemPopup.vue

@@ -54,7 +54,7 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'MoveItem',
+        name: 'MoveItemPopup',
         components: {
             ThumbnailItem,
             PopupWrapper,

resources/js/components/Others/Popup/ConfirmPopup.vue

@@ -1,6 +1,5 @@
 <template>
     <PopupWrapper>
-
         <div class="popup-image">
             <span class="emoji">{{ emoji }}</span>
         </div>

resources/js/components/Others/RenameItemPopup.vue

@@ -59,7 +59,7 @@ import {required} from 'vee-validate/dist/rules'
 import {events} from '@/bus'
 
 export default {
-    name: 'RenameItem',
+    name: 'RenameItemPopup',
     components: {
         ValidationProvider,
         ValidationObserver,

resources/js/components/Others/ShareCreatePopup.vue

@@ -112,7 +112,7 @@ import {events} from '@/bus'
 import axios from 'axios'
 
 export default {
-    name: 'ShareCreate',
+    name: 'ShareCreatePopup',
     components: {
         ValidationProvider,
         ValidationObserver,

resources/js/components/Others/ShareEditPopup.vue

@@ -115,7 +115,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'ShareEdit',
+        name: 'ShareEditPopup',
         components: {
             ValidationProvider,
             ValidationObserver,

resources/js/components/Others/Vignette.vue

@@ -26,22 +26,23 @@
         methods: {
             closePopup() {
                 events.$emit('popup:close')
-                events.$emit('mobileMenu:hide')
-                events.$emit('mobileSortingAndPreview', false)
+                events.$emit('mobile-menu:hide')
+                events.$emit('mobile-navigation:hide')
             }
         },
         created() {
-
-            // Hide vignette
-            events.$on('popup:close', () => this.isVisibleVignette = false)
-
             // Show vignette
             events.$on('popup:open', () => this.isVisibleVignette = true)
+            events.$on('mobile-menu:show', () => this.isVisibleVignette = true)
             events.$on('alert:open', () => this.isVisibleVignette = true)
             events.$on('success:open', () => this.isVisibleVignette = true)
             events.$on('confirm:open', () => this.isVisibleVignette = true)
-            events.$on('mobileSortingAndPreviewVignette', (state) => this.isVisibleVignette = state)
+            events.$on('mobile-navigation:show', () => this.isVisibleVignette = true)
 
+            // Hide vignette
+            events.$on('mobile-navigation:hide', () => this.isVisibleVignette = false)
+            events.$on('mobile-menu:hide', () => this.isVisibleVignette = false)
+            events.$on('popup:close', () => this.isVisibleVignette = false)
         }
     }
 </script>