Merge remote-tracking branch 'origin/master' into oasis

# Conflicts: # public/chunks/admin-account.js # public/chunks/admin.js # public/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js # public/chunks/app-language.js # public/chunks/app-settings.js # public/chunks/app-setup.js # public/chunks/billings-detail.js # public/chunks/dashboard.js # public/chunks/database.js # public/chunks/environment-setup.js # public/chunks/files.js # public/chunks/files~chunks/shared-files~chunks/shared/file-browser.js # public/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js # public/chunks/homepage.js # public/chunks/installation-disclaimer.js # public/chunks/invoices.js # public/chunks/page-edit.js # public/chunks/pages.js # public/chunks/plan-create.js # public/chunks/plan-settings.js # public/chunks/plan-subscribers.js # public/chunks/plan.js # public/chunks/plans.js # public/chunks/platform.js # public/chunks/profile.js # public/chunks/profile~chunks/settings-password.js # public/chunks/purchase-code.js # public/chunks/settings-create-payment-methods.js # public/chunks/settings-invoices.js # public/chunks/settings-payment-methods.js # public/chunks/settings-storage.js # public/chunks/settings-subscription.js # public/chunks/settings.js # public/chunks/shared-files.js # public/chunks/shared.js # public/chunks/shared/file-browser.js # public/chunks/stripe-credentials.js # public/chunks/subscription-plans.js # public/chunks/subscription-service.js # public/chunks/upgrade-billing.js # public/chunks/upgrade-plan.js # public/chunks/user-create.js # public/chunks/user-delete.js # public/chunks/user-detail.js # public/chunks/user-invoices.js # public/chunks/user-storage.js # public/chunks/user-subscription.js # public/chunks/user.js # public/chunks/users.js # public/js/main.js # public/mix-manifest.json # public/vendors~chunks/platform~chunks/shared.js
2026-04-29 11:15:58 +00:00 · 2021-04-20 08:15:34 +02:00
parent edafa1791b 25a28c37c8
commit 80019b822d
154 changed files with 5332 additions and 4857 deletions
@@ -4,14 +4,14 @@
        <!--Mobile Navigation-->
        <MobileNavigation />

-        <!--Confirm Popup-->
-        <Confirm />
+        <!--ConfirmPopup Popup-->
+        <ConfirmPopup />

        <!-- Create language popup -->
        <CreateLanguage/>

        <!--Navigation Sidebar-->
-        <MenuBar/>
+        <SidebarNavigation/>

        <ContentSidebar>

@@ -90,12 +90,12 @@

 <script>
    import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
+    import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
    import MobileNavigation from '@/components/Others/MobileNavigation'
    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
    import CreateLanguage from '@/components/Others/CreateLanguage'
    import ContentGroup from '@/components/Sidebar/ContentGroup'
-    import Confirm from '@/components/Others/Popup/Confirm'
-    import MenuBar from '@/components/Sidebar/MenuBar'
+    import ConfirmPopup from '@/components/Others/Popup/ConfirmPopup'
    import { mapGetters } from 'vuex'

    export default {
@@ -104,6 +104,7 @@
            ...mapGetters(['config']),
        },
        components: {
+            SidebarNavigation,
            MobileNavigation,
            CreateLanguage,
            ContentSidebar,
@@ -115,8 +116,7 @@
            MonitorIcon,
            UsersIcon,
            GlobeIcon,
-            Confirm,
-            MenuBar,
+            ConfirmPopup,
            BoxIcon,
        },
    }
@@ -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
@@ -386,7 +386,7 @@
        }

        .languages-wrapper {
-            margin-top: 0px;
+            margin-top: 0;
        }
    }
 }
@@ -430,7 +430,7 @@
@media only screen and (max-width: 1024px) {

    .search-bar-wrapper {
-        top: 15px;
+        top: 58px;
        z-index: 7;
    }
 }
@@ -6,7 +6,7 @@
                <p>{{ $t('user_box_delete.description') }}</p>
            </InfoBox>
            <ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form" class="form block-form">
-                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="User name" :rules="'required|is:' + user.data.relationships.settings.data.attributes.name">
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="User name" rules="required">
                    <label>{{ $t('admin_page_user.label_delete_user', {user: user.data.relationships.settings.data.attributes.name}) }}:</label>
                    <div class="single-line-form">
                        <input v-model="userName"
@@ -71,6 +71,15 @@

                if (!isValid) return;

+                if (this.userName !== this.user.data.relationships.settings.data.attributes.name) {
+
+                    this.$refs.deleteUser.setErrors({
+                        'User name': 'The user name is not the same.'
+                    });
+
+                    return
+                }
+
                this.isSendingRequest = true

                axios
@@ -43,7 +43,7 @@
                <span class="empty-note navigator" v-if="tree.length == 0">
                    {{ $t('sidebar.folders_empty') }}
                </span>
-                <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in tree" :key="items.id"/>
+                <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
            </ContentGroup>

            <!--Favourites-->
@@ -74,7 +74,7 @@
 <script>
 import UpgradeSidebarBanner from '@/components/Others/UpgradeSidebarBanner'
 import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
-import MultiSelected from '@/components/FilesView/MultiSelected'
+import TitlePreview from '@/components/FilesView/TitlePreview'
 import ContentFileView from '@/components/Others/ContentFileView'
 import ContentSidebar from '@/components/Sidebar/ContentSidebar'
 import ContentGroup from '@/components/Sidebar/ContentGroup'
@@ -94,7 +94,7 @@ export default {
        UpgradeSidebarBanner,
        TreeMenuNavigator,
        ContentFileView,
-        MultiSelected,
+        TitlePreview,
        ContentSidebar,
        UploadCloudIcon,
        ContentGroup,
@@ -104,7 +104,7 @@ export default {
        XIcon
    },
    computed: {
-        ...mapGetters(['user', 'homeDirectory', 'currentFolder', 'config', 'fileInfoDetail']),
+        ...mapGetters(['user', 'homeDirectory', 'currentFolder', 'config', 'clipboard']),
        favourites() {
            return this.user.data.relationships.favourites.data.attributes.folders
        },
@@ -137,7 +137,7 @@ export default {
        dragEnter() {
            if (this.draggedItem && this.draggedItem.type !== 'folder') return

-            if (this.fileInfoDetail.length > 0 && this.fileInfoDetail.find(item => item.type !== 'folder')) return
+            if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return

            this.area = true
        },
@@ -156,17 +156,17 @@ export default {
            if (this.favourites.find(folder => folder.id == this.draggedItem.id)) return

            // Prevent to move folders to self
-            if (this.fileInfoDetail.length > 0 && this.fileInfoDetail.find(item => item.type !== 'folder')) return
+            if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return

            // Store favourites folder

            //Add to favourites non selected folder
-            if (!this.fileInfoDetail.includes(this.draggedItem)) {
+            if (!this.clipboard.includes(this.draggedItem)) {
                this.$store.dispatch('addToFavourites', this.draggedItem)
            }

            //Add to favourites selected folders
-            if (this.fileInfoDetail.includes(this.draggedItem)) {
+            if (this.clipboard.includes(this.draggedItem)) {
                this.$store.dispatch('addToFavourites', null)
            }

@@ -6,7 +6,7 @@
            <!--Navigator-->
            <ContentGroup :title="$t('sidebar.locations_title')">
                <div class="menu-list-wrapper vertical">
-                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared()">
+                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared">
                        <div class="icon text-theme">
                            <link-icon size="17"></link-icon>
                        </div>
@@ -14,7 +14,7 @@
                            {{ $t('sidebar.my_shared') }}
                        </div>
                    </li>
-                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads()">
+                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads">
                        <div class="icon text-theme">
                            <users-icon size="17"></users-icon>
                        </div>
@@ -1,125 +0,0 @@
-<template>
-    <div id="single-page">
-        <div id="page-content">
-
-            <!--Header-->
-            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
-
-            <!--Content-->
-            <div class="content-page">
-                <nav class="mobile-navigation">
-
-                    <!--Admin menu-->
-                    <b class="mobile-menu-label">{{ $t('global.admin') }}</b>
-                    <MenuItemList :navigation="AdminNavigation" />
-
-                    <!--SaaS menu-->
-                    <b v-if="config.isSaaS" class="mobile-menu-label">{{ $t('global.saas') }}</b>
-                    <MenuItemList v-if="config.isSaaS" :navigation="SassNavigation" />
-                </nav>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import MenuItemList from '@/components/Mobile/MenuItemList'
-    import MobileHeader from '@/components/Mobile/MobileHeader'
-    import { mapGetters } from 'vuex'
-
-    export default {
-        name: 'AdminMobileMenu',
-        components: {
-            MenuItemList,
-            MobileHeader,
-        },
-        computed: {
-            ...mapGetters(['config']),
-        },
-        data() {
-            return {
-                AdminNavigation: [
-                    {
-                        icon: 'box',
-                        title: this.$t('admin_menu.dashboard'),
-                        routeName: 'Dashboard',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'users',
-                        title: this.$t('admin_menu.users'),
-                        routeName: 'Users',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'settings',
-                        title: this.$t('admin_menu.settings'),
-                        routeName: 'AppOthers',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'monitor',
-                        title: this.$t('admin_menu.pages'),
-                        routeName: 'Pages',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'language',
-                        title: this.$t('languages'),
-                        routeName: 'Language',
-                        isVisible: true,
-
-                    }
-                ],
-                SassNavigation: [
-                    {
-                        icon: 'database',
-                        title: this.$t('admin_menu.plans'),
-                        routeName: 'Plans',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'file-text',
-                        title: this.$t('admin_menu.invoices'),
-                        routeName: 'Invoices',
-                        isVisible: true,
-                    },
-                ]
-            }
-        },
-    }
-</script>
-
-<style scoped lang="scss">
-    @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
-
-    .mobile-navigation {
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 99;
-
-        .mobile-menu-label {
-            margin-top: 30px;
-            margin-bottom: 5px;
-            @include font-size(11);
-            color: $text-muted;
-            display: block;
-
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .mobile-navigation {
-
-            .mobile-menu-label {
-                color: $dark_mode_text_secondary;
-            }
-        }
-    }
-</style>
@@ -1,114 +0,0 @@
-<template>
-    <div id="single-page">
-        <div id="page-content">
-
-            <!--Header-->
-            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
-
-            <!--Content-->
-            <div class="content-page">
-                <nav class="mobile-navigation">
-
-                    <!--Admin menu-->
-                    <b class="mobile-menu-label">{{ $t('global.menu') }}</b>
-                    <MenuItemList :navigation="ProfileNavigation" />
-
-                    <!--SaaS menu-->
-                    <b class="mobile-menu-label">{{ $t('global.subscription') }}</b>
-                    <MenuItemList :navigation="SubscriptionNavigation" />
-                </nav>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import MenuItemList from '@/components/Mobile/MenuItemList'
-    import MobileHeader from '@/components/Mobile/MobileHeader'
-
-    export default {
-        name: 'UserProfileMobileMenu',
-        components: {
-            MenuItemList,
-            MobileHeader,
-        },
-        data() {
-            return {
-                ProfileNavigation: [
-                    {
-                        icon: 'user',
-                        title: this.$t('menu.profile'),
-                        routeName: 'Profile',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'hard-drive',
-                        title: this.$t('menu.storage'),
-                        routeName: 'Storage',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'lock',
-                        title: this.$t('menu.password'),
-                        routeName: 'Password',
-                        isVisible: true,
-                    },
-                ],
-                SubscriptionNavigation: [
-                    {
-                        icon: 'cloud',
-                        title: this.$t('menu.subscription'),
-                        routeName: 'Subscription',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'credit-card',
-                        title: this.$t('menu.payment_cards'),
-                        routeName: 'PaymentMethods',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'file-text',
-                        title: this.$t('menu.invoices'),
-                        routeName: 'Invoice',
-                        isVisible: true,
-                    },
-                ]
-            }
-        },
-    }
-</script>
-
-<style scoped lang="scss">
-    @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
-
-    .mobile-navigation {
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 99;
-
-        .mobile-menu-label {
-            margin-top: 30px;
-            margin-bottom: 5px;
-            @include font-size(11);
-            color: $text-muted;
-            display: block;
-
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .mobile-navigation {
-
-            .mobile-menu-label {
-                color: $dark_mode_text_secondary;
-            }
-        }
-    }
-</style>
@@ -1,118 +1,103 @@
 <template>
    <div id="application-wrapper">

-        <!--Full File Preview-->
-        <FileFullPreview />
+        <!--File preview window-->
+        <FilePreview />

-        <!--Mobile Navigation-->
-        <MobileNavigation />
-
-        <!--Processing popup-->
+        <!--Popups-->
        <ProcessingPopup />
+        <ConfirmPopup />

-        <!--Confirm Popup-->
-        <Confirm />
+        <ShareCreatePopup />
+        <ShareEditPopup />

-        <!--Share Item popup-->
-        <ShareCreate />
-        <ShareEdit />
+        <CreateFolderPopup />
+        <RenameItemPopup />

-        <!--Rename folder/file item-->
-        <RenameItem />
+        <MoveItemPopup />

-        <!--Create folder mobile UI-->
-        <CreateFolder />
+        <!--Mobile components-->
+        <FileSortingMobile />
+        <FileFilterMobile />
+        <FileMenuMobile />

-        <!--Move item popup-->
-        <MoveItem />
+        <MultiSelectToolbarMobile />

-        <!-- Mobile Menu for Multi selected items -->
-        <MobileMultiSelectMenu />
+        <!--Navigations-->
+        <MobileNavigation />
+        <SidebarNavigation />

-        <!--Drag UI-->
+        <!--Others-->
        <DragUI />

-        <!--Mobile menu for selecting view and sorting-->
-        <MobileSortingAndPreview />
-
-        <!--Mobile Menu-->
-        <MobileMenu />
-
-        <!--Navigation Sidebar-->
-        <MenuBar />
-
-        <!--File page-->
-        <keep-alive :include="['Admin', 'Users']">
-            <router-view :class="{'is-scaled-down': isScaledDown}" />
-        </keep-alive>
+        <router-view :class="{'is-scaled-down': isScaledDown}" />
    </div>
 </template>

 <script>
-import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
-import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
-import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
-import FileFullPreview from '@/components/FilesView/FileFullPreview'
-import MobileNavigation from '@/components/Others/MobileNavigation'
-import CreateFolder from '@/components/Others/CreateFolder'
-import MobileMenu from '@/components/FilesView/MobileMenu'
-import ShareCreate from '@/components/Others/ShareCreate'
-import Confirm from '@/components/Others/Popup/Confirm'
-import RenameItem from '@/components/Others/RenameItem'
-import ShareEdit from '@/components/Others/ShareEdit'
-import MoveItem from '@/components/Others/MoveItem'
-import DragUI from '@/components/FilesView/DragUI'
-import MenuBar from '@/components/Sidebar/MenuBar'
-import {includes} from 'lodash'
-import {mapGetters} from 'vuex'
-import {events} from '@/bus'
+    import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
+    import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
+    import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
+    import FileFilterMobile from '@/components/FilesView/FileFilterMobile'
+    import CreateFolderPopup from '@/components/Others/CreateFolderPopup'
+    import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
+    import MobileNavigation from '@/components/Others/MobileNavigation'
+    import ShareCreatePopup from '@/components/Others/ShareCreatePopup'
+    import FileMenuMobile from '@/components/FilesView/FileMenuMobile'
+    import ConfirmPopup from '@/components/Others/Popup/ConfirmPopup'
+    import RenameItemPopup from '@/components/Others/RenameItemPopup'
+    import ShareEditPopup from '@/components/Others/ShareEditPopup'
+    import MoveItemPopup from '@/components/Others/MoveItemPopup'
+    import FilePreview from '@/components/FilesView/FilePreview'
+    import DragUI from '@/components/FilesView/DragUI'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'

-export default {
-    name: 'Platform',
-    components: {
-        MobileSortingAndPreview,
-        MobileMultiSelectMenu,
-        MobileNavigation,
-        FileFullPreview,
-        ProcessingPopup,
-        CreateFolder,
-        ShareCreate,
-        MobileMenu,
-        RenameItem,
-        ShareEdit,
-        MoveItem,
-        Confirm,
-        MenuBar,
-        DragUI,
-    },
-    computed: {
-        ...mapGetters([
-            'config'
-        ]),
-    },
-    data() {
-        return {
-            isScaledDown: false
+    export default {
+        name: 'Platform',
+        components: {
+            MultiSelectToolbarMobile,
+            CreateFolderPopup,
+            FileSortingMobile,
+            SidebarNavigation,
+            FileFilterMobile,
+            MobileNavigation,
+            ShareCreatePopup,
+            ProcessingPopup,
+            RenameItemPopup,
+            ShareEditPopup,
+            FileMenuMobile,
+            MoveItemPopup,
+            ConfirmPopup,
+            FilePreview,
+            DragUI,
+        },
+        computed: {
+            ...mapGetters([
+                'config'
+            ]),
+        },
+        data() {
+            return {
+                isScaledDown: false
+            }
+        },
+        mounted() {
+            events.$on('mobile-menu:show', () => this.isScaledDown = true)
+
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
+            events.$on('mobile-menu:hide', () => this.isScaledDown = false)
        }
-    },
-    mounted() {
-        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)
-        events.$on('mobileSortingAndPreview', state => this.isScaledDown = state)
    }
-}
 </script>

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

-@media only screen and (max-width: 690px) {
+    @media only screen and (max-width: 690px) {

-    .is-scaled-down {
-        @include transform(scale(0.95));
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
    }
-}
 </style>
@@ -1,108 +1,112 @@
 <template>
    <div id="application-wrapper">

-        <!--Full File Preview-->
-        <FileFullPreview />
-
        <!--Loading Spinner-->
        <Spinner v-if="isLoading" />

-        <!--Move item popup-->
-        <MoveItem />
+        <!--File preview window-->
+        <FilePreview />

-        <!-- Processing popup for zip -->
+        <!--Popups-->
        <ProcessingPopup />

-        <!-- Mobile Menu for Multi selected items -->
-        <MobileMultiSelectMenu />
+        <CreateFolderPopup />
+        <RenameItemPopup />

-        <!--Rename folder/file item-->
-        <RenameItem />
+        <MoveItemPopup />

-        <!--Create folder mobile UI-->
-        <CreateFolder />
+        <!-- Mobile components -->
+        <FileSortingMobile />
+        <FileMenuMobile />

-        <!--Drag UI-->
+        <MultiSelectToolbarMobile />
+
+        <!--Others-->
+        <Vignette />
        <DragUI />
-
-        <!--Mobile Menu-->
-        <MobileMenu />
-
-        <!--Mobile menu for selecting view and sorting-->
-        <MobileSortingAndPreview />
-
-        <!--System alerts-->
        <Alert />

-        <!--Background vignette-->
-        <Vignette />
-
-        <!--Pages-->
-        <router-view />
+        <router-view :class="{'is-scaled-down': isScaledDown}" />
    </div>
 </template>

 <script>
-import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
-import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
-import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
-import FileFullPreview from '@/components/FilesView/FileFullPreview'
-import CreateFolder from '@/components/Others/CreateFolder'
-import MobileMenu from '@/components/FilesView/MobileMenu'
-import RenameItem from '@/components/Others/RenameItem'
-import Spinner from '@/components/FilesView/Spinner'
-import MoveItem from '@/components/Others/MoveItem'
-import Vignette from '@/components/Others/Vignette'
-import DragUI from '@/components/FilesView/DragUI'
-import Alert from '@/components/FilesView/Alert'
-import {mapGetters} from 'vuex'
+    import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
+    import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
+    import CreateFolderPopup from '@/components/Others/CreateFolderPopup'
+    import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
+    import FileMenuMobile from '@/components/FilesView/FileMenuMobile'
+    import RenameItemPopup from '@/components/Others/RenameItemPopup'
+    import MoveItemPopup from '@/components/Others/MoveItemPopup'
+    import FilePreview from '@/components/FilesView/FilePreview'
+    import Spinner from '@/components/FilesView/Spinner'
+    import Vignette from '@/components/Others/Vignette'
+    import DragUI from '@/components/FilesView/DragUI'
+    import Alert from '@/components/FilesView/Alert'
+    import {events} from '@/bus'
+    import {mapGetters} from 'vuex'

-export default {
-    name: 'Platform',
-    components: {
-        MobileSortingAndPreview,
-        MobileMultiSelectMenu,
-        FileFullPreview,
-        ProcessingPopup,
-        CreateFolder,
-        MobileMenu,
-        RenameItem,
-        MoveItem,
-        Vignette,
-        Spinner,
-        DragUI,
-        Alert,
-    },
-    computed: {
-        ...mapGetters([
-            'config'
-        ]),
-    },
-    data() {
-        return {
-            isLoading: true,
+    export default {
+        name: 'Platform',
+        components: {
+            MultiSelectToolbarMobile,
+            CreateFolderPopup,
+            FileSortingMobile,
+            ProcessingPopup,
+            RenameItemPopup,
+            FileMenuMobile,
+            MoveItemPopup,
+            FilePreview,
+            Vignette,
+            Spinner,
+            DragUI,
+            Alert,
+        },
+        computed: {
+            ...mapGetters([
+                'config'
+            ]),
+        },
+        data() {
+            return {
+                isLoading: true,
+                isScaledDown: false
+            }
+        },
+        mounted() {
+            events.$on('mobile-menu:show', () => this.isScaledDown = true)
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
+
+            this.$store.dispatch('getShareDetail', this.$route.params.token)
+                .then(response => {
+                    this.isLoading = false
+
+                    // Show public file browser
+                    if (response.data.data.attributes.type === 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedFileBrowser') {
+                        this.$router.push({name: 'SharedFileBrowser'})
+                    }
+
+                    // Show public single file
+                    if (response.data.data.attributes.type !== 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedSingleFile') {
+                        this.$router.push({name: 'SharedSingleFile'})
+                    }
+
+                    // Show authentication page
+                    if (response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedAuthentication') {
+                        this.$router.push({name: 'SharedAuthentication'})
+                    }
+                })
        }
-    },
-    mounted() {
-        this.$store.dispatch('getShareDetail', this.$route.params.token)
-            .then(response => {
-                this.isLoading = false
-
-                // Show public file browser
-                if (response.data.data.attributes.type === 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedFileBrowser') {
-                    this.$router.push({name: 'SharedFileBrowser'})
-                }
-
-                // Show public single file
-                if (response.data.data.attributes.type !== 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedSingleFile') {
-                    this.$router.push({name: 'SharedSingleFile'})
-                }
-
-                // Show authentication page
-                if (response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedAuthentication') {
-                    this.$router.push({name: 'SharedAuthentication'})
-                }
-            })
    }
-}
 </script>
+
+<style lang="scss">
+    @import '@assets/vuefilemanager/_mixins';
+
+    @media only screen and (max-width: 690px) {
+
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
+    }
+</style>
@@ -7,7 +7,7 @@
                <div class="menu-list-wrapper vertical">
                    <a class="menu-list-item link" @click="goHome">
                        <div class="icon">
-                            <home-icon size="17"></home-icon>
+                            <home-icon size="17"/>
                        </div>
                        <div class="label">
                            {{ $t('sidebar.home') }}
@@ -18,7 +18,7 @@

            <!--Navigator-->
            <ContentGroup :title="$t('sidebar.navigator_title')" class="navigator">
-                <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in navigationTree" :key="items.id" />
+                <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
            </ContentGroup>
        </ContentSidebar>

@@ -28,14 +28,11 @@
            <DesktopToolbar />

            <FileBrowser />
-
-            <DesktopSortingAndPreview />
        </div>
    </div>
 </template>

 <script>
-    import DesktopSortingAndPreview from '@/components/FilesView/DesktopSortingAndPreview'
    import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
    import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
@@ -49,7 +46,6 @@
    export default {
        name: 'SharedFileBrowser',
        components: {
-            DesktopSortingAndPreview,
            TreeMenuNavigator,
            ContentSidebar,
            DesktopToolbar,