v1.5-alpha.1

resources/js/App.vue

@@ -1,57 +1,61 @@
 <template>
-    <div id="vue-file-manager" :class="appSize">
+    <div id="vue-file-manager" :class="appSize" v-cloak>
 
         <!--System alerts-->
-        <Alert />
+        <Alert/>
 
         <div id="application-wrapper" v-if="layout === 'authorized'">
 
+            <MobileNavigation />
+
             <!--Share Item setup-->
-            <ShareCreate />
-            <ShareEdit />
+            <ShareCreate/>
+            <ShareEdit/>
 
             <!--Move item setup-->
-            <MoveItem />
+            <MoveItem/>
 
             <!--Mobile Menu-->
-            <MobileMenu />
+            <MobileMenu/>
 
             <!--Navigation Sidebar-->
-            <Sidebar/>
+            <MenuBar/>
 
             <!--File page-->
-            <router-view/>
+            <router-view :class="{'is-scaled-down': isScaledDown}"/>
         </div>
 
         <router-view v-if="layout === 'unauthorized'"/>
 
         <!--Background vignette-->
-        <Vignette />
+        <Vignette/>
     </div>
 </template>
 
 <script>
+    import MobileNavigation from '@/components/Others/MobileNavigation'
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import ShareCreate from '@/components/Others/ShareCreate'
     import ShareEdit from '@/components/Others/ShareEdit'
     import MoveItem from '@/components/Others/MoveItem'
     import Vignette from '@/components/Others/Vignette'
-    import Sidebar from '@/components/Sidebar/Sidebar'
+    import MenuBar from '@/components/Sidebar/MenuBar'
     import Alert from '@/components/FilesView/Alert'
     import {ResizeSensor} from 'css-element-queries'
-    import { includes } from 'lodash'
+    import {includes} from 'lodash'
     import {mapGetters} from 'vuex'
     import {events} from "./bus"
 
     export default {
         name: 'app',
         components: {
+            MobileNavigation,
             ShareCreate,
             MobileMenu,
             ShareEdit,
             MoveItem,
             Vignette,
-            Sidebar,
+            MenuBar,
             Alert,
         },
         computed: {
@@ -66,6 +70,11 @@
                 return 'authorized'
             }
         },
+        data() {
+            return {
+                isScaledDown: false,
+            }
+        },
         methods: {
             handleAppResize() {
                 let appView = document.getElementById('vue-file-manager')
@@ -80,20 +89,41 @@
             },
         },
         beforeMount() {
+
             // Store config to vuex
-            this.$store.commit('SET_AUTHORIZED', this.$root.$data.config.hasAuthCookie)
-            this.$store.commit('SET_CONFIG', this.$root.$data.config)
+            this.$store.commit('INIT', {
+                authCookie: this.$root.$data.config.hasAuthCookie,
+                config: this.$root.$data.config,
+                rootDirectory: {
+                    name: this.$t('locations.home'),
+                    location: 'base',
+                    unique_id: 0,
+                }
+            })
         },
         mounted() {
             // Handle VueFileManager width
             var VueFileManager = document.getElementById('vue-file-manager');
             new ResizeSensor(VueFileManager, this.handleAppResize);
+
+            // Handle mobile navigation scale animation
+            events.$on('show:mobile-navigation', () => this.isScaledDown = true)
+            events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
+            events.$on('mobileMenu:show', () => this.isScaledDown = true)
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
         }
     }
 </script>
 
 <style lang="scss">
-    @import "@assets/app.scss";
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    [v-cloak],
+    [v-cloak] > * {
+        display: none
+    }
 
     * {
         outline: 0;
@@ -107,6 +137,25 @@
         font-size: 16px;
     }
 
+    #auth {
+        width: 100%;
+        height: 100%;
+    }
+
+    #vue-file-manager {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
+    }
+
     // Dark mode support
     @media (prefers-color-scheme: dark) {
 
@@ -119,16 +168,4 @@
             }
         }
     }
-
-    #auth {
-        width: 100%;
-        height: 100%;
-    }
-
-    #vue-file-manager {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-    }
 </style>