refactoring sorting and preview component

public/mix-manifest.json

@@ -28,9 +28,10 @@
     "/chunks/database.js": "/chunks/database.js?id=ce57f3e69798319aab7b",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=48efd0b887fbc804ac90",
-    "/chunks/files.js": "/chunks/files.js?id=aedd3b50fcff6f480666",
+    "/chunks/files.js": "/chunks/files.js?id=bde4326bbabd3f0bdeb0",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=ed091eaefb05cf66c62e",
+    "/chunks/files~chunks/shared-files.js": "/chunks/files~chunks/shared-files.js?id=901d5a1126b7dbbcdda8",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=8d6864bd2b6d92b8dadf",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=f037ea11689d01ea489e",
@@ -56,8 +57,8 @@
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=0ec77e47b2622ee5e253",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=00c6bca64820c4fd3a89",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=b671f4f3198119b48449",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=6b49b705eabc281a0ed4",
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=07cc644014b02adafc69",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=8f18a860a223c27f8d81",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=2048702b2eb7d0043bc9",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=0212907c9bf1cdbd99ed",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=91001c0d2c2522eb0d03",
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0e90002c41282e286785",
@@ -76,21 +77,7 @@
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=34603496ceacb8bd2da3",
     "/chunks/users.js": "/chunks/users.js?id=d97166d7e60c1ec9facb",
-    "/chunks/files.bc88c2ffdbf69cc44471.hot-update.js": "/chunks/files.bc88c2ffdbf69cc44471.hot-update.js",
+    "/js/main.b9f23bd6fac9e569cb87.hot-update.js": "/js/main.b9f23bd6fac9e569cb87.hot-update.js",
-    "/chunks/shared-files.bc88c2ffdbf69cc44471.hot-update.js": "/chunks/shared-files.bc88c2ffdbf69cc44471.hot-update.js",
+    "/chunks/shared-page.b9f23bd6fac9e569cb87.hot-update.js": "/chunks/shared-page.b9f23bd6fac9e569cb87.hot-update.js",
-    "/chunks/files.b8c6561b654744789845.hot-update.js": "/chunks/files.b8c6561b654744789845.hot-update.js",
+    "/js/main.c8942aac993bcf5a1632.hot-update.js": "/js/main.c8942aac993bcf5a1632.hot-update.js"
-    "/chunks/shared-files.b8c6561b654744789845.hot-update.js": "/chunks/shared-files.b8c6561b654744789845.hot-update.js",
-    "/chunks/files.abc94da00c803b8c75d4.hot-update.js": "/chunks/files.abc94da00c803b8c75d4.hot-update.js",
-    "/chunks/shared-files.abc94da00c803b8c75d4.hot-update.js": "/chunks/shared-files.abc94da00c803b8c75d4.hot-update.js",
-    "/chunks/files.836f0c5a855c1cef741e.hot-update.js": "/chunks/files.836f0c5a855c1cef741e.hot-update.js",
-    "/chunks/shared-files.836f0c5a855c1cef741e.hot-update.js": "/chunks/shared-files.836f0c5a855c1cef741e.hot-update.js",
-    "/chunks/files.ca107009e6991438d582.hot-update.js": "/chunks/files.ca107009e6991438d582.hot-update.js",
-    "/chunks/shared-files.ca107009e6991438d582.hot-update.js": "/chunks/shared-files.ca107009e6991438d582.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.404d243a58ecc659da43.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.404d243a58ecc659da43.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.10ac0bc160a8455ab413.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.10ac0bc160a8455ab413.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.50bcf4db8de43be79fbf.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.50bcf4db8de43be79fbf.hot-update.js",
-    "/chunks/files.2cd4c521383beff94fe8.hot-update.js": "/chunks/files.2cd4c521383beff94fe8.hot-update.js",
-    "/chunks/shared-files.2cd4c521383beff94fe8.hot-update.js": "/chunks/shared-files.2cd4c521383beff94fe8.hot-update.js",
-    "/js/main.ccc1b32b1d8155a9569c.hot-update.js": "/js/main.ccc1b32b1d8155a9569c.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.a61ed53b6caab3d4095d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.a61ed53b6caab3d4095d.hot-update.js"
 }

resources/js/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="vue-file-manager" v-cloak @click="close">
+    <div id="vue-file-manager" v-cloak @click="unClick">
 
         <!--System alerts-->
         <Alert/>
@@ -136,7 +136,7 @@
             }
         },
         methods: {
-            close () {
+            unClick () {
                 events.$emit('sortingAndPreview', false)
             }
         },

resources/js/components/FilesView/DesktopSortingAndPreview.vue

@@ -0,0 +1,82 @@
+<template>
+    <div v-if="isVisible" class="sorting-preview">
+        <SortingAndPreviewMenu />
+    </div>
+</template>
+
+<script>
+import SortingAndPreviewMenu from '@/components/FilesView/SortingAndPreviewMenu'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
+
+    export default {
+        name: 'DesktopSortingAndPreview',
+        components: {SortingAndPreviewMenu},
+        data () {
+            return {
+                isVisible: false
+            }
+        },
+        mounted () {
+            events.$on('sortingAndPreview', (state) => {
+                this.isVisible = state
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
+
+.sorting-preview {
+    min-width: 250px;
+    position: absolute;
+    z-index: 99;
+    box-shadow: $shadow;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    right: 66px;
+    top: 63px;
+
+    &.showed {
+        display: block;
+    }
+
+    /deep/.menu-option {
+
+        &:hover {
+            background: $light_background;
+
+            .text-label {
+                color: $theme;
+            }
+
+            path,
+            /deep/ line,
+            /deep/ polyline,
+            rect,
+            circle,
+            polygon {
+                stroke: $theme !important;
+            }
+        }
+    }
+}
+
+
+@media (prefers-color-scheme: dark) {
+    .sorting-preview {
+        background: $dark_mode_foreground;
+
+         /deep/ .menu-option {
+         &:hover {
+                background: rgba($theme, 0.1);
+            }
+        }
+    }
+   
+}
+
+</style>

resources/js/components/FilesView/MobileSortingAndPreview.vue

@@ -1,188 +1,34 @@
 <template>
-    <transition name="context-menu" class="options-wrapper">
+    <transition v-if="isVisible" name="preview-menu" >
-        <div class="options" v-if="isVisible">
+        <SortingAndPreviewMenu class="options"/>
-            <div class="menu-options">
-                <ul class="menu-option-group">
-                    <li v-if="isList" class="menu-option" @click="changePreview('grid')">
-                        <div class="icon">
-                            <grid-icon size="17"/>
-                        </div>
-                        <div class="text-label">
-                            {{ $t('preview_sorting.grid_view') }}
-                        </div>
-                    </li>
-                    <li v-if="isGrid" class="menu-option" @click="changePreview('list')">
-                        <div class="icon">
-                            <list-icon size="17"/>
-                        </div>
-                        <div class="text-label">
-                            {{ $t('preview_sorting.list_view') }}
-                        </div>
-                    </li>
-                </ul>
-                <ul class="menu-option-group">
-                    <li class="menu-option" @click="sort('created_at')">
-                        <div class="icon">
-                            <calendar-icon size="17"/>
-                        </div>
-                        <div class="text-label">
-                            {{ $t('preview_sorting.sort_date') }}
-                        </div>
-                        <div class="show-icon">
-                            <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
-                        </div>
-                    </li>
-                    <li class="menu-option" @click="sort('name')">
-                        <div class="icon">
-                            <alphabet-icon size="17" class="alphabet-icon"/>
-                        </div>
-                        <div class="text-label">
-                            {{ $t('preview_sorting.sort_alphabet') }}
-                        </div>
-                        <div class="show-icon">
-                            <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
     </transition>
 </template>
 
 <script>
-
+import SortingAndPreviewMenu from '@/components/FilesView/SortingAndPreviewMenu'
-import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
-import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
 import { mapGetters } from 'vuex'
 import { events } from '@/bus'
 
-export default {
+    export default {
-    name: 'MobileSortingAndPreview',
+        name: 'MobileSortingAndPreview',
-    components: {
+        components: {SortingAndPreviewMenu},
-        CalendarIcon,
+        data () {
-        AlphabetIcon,
+            return {
-        ArrowUpIcon,
+                isVisible: false
-        CheckIcon,
-        ListIcon,
-        GridIcon
-    },
-    computed: {
-        ...mapGetters(['FilePreviewType']),
-        isGrid() {
-            return this.FilePreviewType === 'grid'
-        },
-        isList() {
-            return this.FilePreviewType === 'list'
-        }
-    },
-    data() {
-        return {
-            isVisible: false,
-            filter: {
-                sort: 'DESC',
-                field: undefined
             }
-        }
-    },
-    methods: {
-        close() {
-            this.isVisible = false
-            events.$emit('mobileSortingAndPreview', false)
         },
-        sort(field) {
+        mounted () {
-
+            events.$on('mobileSortingAndPreview', (state) => {
-            this.filter.field = field
+                this.isVisible = state
-
+            })
-            // Set sorting direction
-            if (this.filter.sort === 'DESC') {
-                this.filter.sort = 'ASC'
-            } else if (this.filter.sort === 'ASC') {
-                this.filter.sort = 'DESC'
-            }
-
-            // Save to localStorage sorting options
-            localStorage.setItem('sorting', JSON.stringify({ sort: this.filter.sort, field: this.filter.field }))
-
-            // Update sorting state in vuex
-            this.$store.commit('UPDATE_SORTING')
-
-            // Get data using the application location
-            this.$getDataByLocation()
-        },
-        changePreview(previewType) {
-
-            this.$store.dispatch('changePreviewType', previewType)
-
-            this.close()
         }
-    },
-    mounted() {
-
-        let sorting = JSON.parse(localStorage.getItem('sorting'))
-
-        // Set default sorting if is not setup in LocalStorage
-        this.filter.sort = sorting ? sorting.sort : 'DESC'
-        this.filter.field = sorting ? sorting.field : 'created_at'
-
-        events.$on('mobileSortingAndPreview', (state) => {
-            this.isVisible = state
-        })
     }
-}
 </script>
 
 <style scoped lang="scss">
 @import "@assets/vue-file-manager/_variables";
 @import "@assets/vue-file-manager/_mixins";
 
-.show-icon {
-    margin-left: auto;
-    max-height: 19px;
-
-    .arrow-down {
-        @include transform(rotate(180deg));
-    }
-}
-
-.icon {
-    margin-right: 20px;
-    line-height: 0;
-
-    .alphabet-icon {
-        /deep/ line,
-        /deep/ polyline {
-            stroke: $text;
-        }
-    }
-
-}
-
-.menu-option {
-    display: flex;
-    align-items: center;
-
-    .icon {
-        margin-right: 20px;
-        line-height: 0;
-    }
-
-    .text-label {
-        @include font-size(16);
-    }
-}
-
-.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;
-}
-
 .options {
     position: absolute;
     bottom: 0;
@@ -193,79 +39,22 @@ export default {
     background: white;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
-
-    .menu-options {
-        margin-top: 10px;
-        list-style: none;
-        width: 100%;
-
-        .menu-option-group {
-            padding: 5px 0;
-            border-bottom: 1px solid $light_mode_border;
-
-            &:first-child {
-                padding-top: 0;
-            }
-
-            &:last-child {
-                padding-bottom: 0;
-                border-bottom: none;
-            }
-        }
-
-        .menu-option {
-            font-weight: 700;
-            letter-spacing: 0.15px;
-            @include font-size(14);
-            cursor: pointer;
-            width: 100%;
-            padding: 17px 20px;
-            text-align: center;
-
-            &:last-child {
-                border: none;
-            }
-        }
-    }
 }
 
 @media (prefers-color-scheme: dark) {
-    .vignette {
-        background: $dark_mode_vignette;
-    }
-
     .options {
         background: $dark_mode_background;
-
-        .menu-options {
-            background: $dark_mode_background;
-
-            .menu-option-group {
-                border-color: $dark_mode_border_color;
-            }
-
-            .menu-option {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-    .icon {
-        .alphabet-icon {
-            /deep/ line,
-            /deep/ polyline {
-                stroke: $dark_mode_text_primary;
-            }
-        }
     }
 }
 
+
 // Transition
-.context-menu-enter-active,
+.preview-menu-enter-active,
 .fade-enter-active {
     transition: all 200ms;
 }
 
-.context-menu-leave-active,
+.preview-menu-leave-active,
 .fade-leave-active {
     transition: all 200ms;
 }
@@ -275,13 +64,14 @@ export default {
     opacity: 0;
 }
 
-.context-menu-enter,
+.preview-menu-enter,
-.context-menu-leave-to {
+.preview-menu-leave-to {
     opacity: 0;
     transform: translateY(100%);
 }
 
-.context-menu-leave-active {
+.preview-menu-leave-active {
     position: absolute;
 }
+
 </style>

resources/js/components/FilesView/SortingAndPreviewMenu.vue

@@ -1,6 +1,4 @@
 <template>
-    <div v-if="isVisible" class="sorting-preview">
-
         <div class="menu-options" id="menu-list">
             <ul class="menu-option-group">
                 <li v-if="isList" class="menu-option" @click="changePreview('grid')">
@@ -45,7 +43,6 @@
                 </li>
             </ul>
         </div>
-    </div>
 </template>
 
 <script>
@@ -56,7 +53,7 @@ import { mapGetters } from 'vuex'
 import { events } from '@/bus'
 
 export default {
-    name: 'SortingAndPreview',
+    name: 'SortingAndPreviewMenu',
     components: {
         CalendarIcon,
         AlphabetIcon,
@@ -76,7 +73,6 @@ export default {
     },
     data() {
         return {
-            isVisible: false,
             filter: {
                 sort: 'DESC',
                 field: undefined
@@ -108,9 +104,9 @@ export default {
 
             this.$store.dispatch('changePreviewType', previewType)
 
-            this.isVisible = false
+            if(this.$isMobile()) {
-
+                events.$emit('mobileSortingAndPreview', false )
-            events.$emit('sortingAndPreview', false)
+            }
         }
     },
     mounted() {
@@ -121,9 +117,6 @@ export default {
         this.filter.sort = sorting ? sorting.sort : 'DESC'
         this.filter.field = sorting ? sorting.field : 'created_at'
 
-        events.$on('sortingAndPreview', (state) => {
-            this.isVisible = state
-        })
     }
 
 }
@@ -207,50 +200,25 @@ export default {
         cursor: pointer;
         width: 100%;
         color: $text;
-
-        &:hover {
-            background: $light_background;
-
-            .text-label {
-                color: $theme;
-            }
-
-            path,
-            /deep/ line,
-            /deep/ polyline,
-            rect,
-            circle,
-            polygon {
-                stroke: $theme !important;
-            }
-        }
     }
 }
 
 @media (prefers-color-scheme: dark) {
-    .sorting-preview {
+    .menu-options {
-        background: $dark_mode_foreground;
+        .menu-option-group {
+            border-color: $dark_mode_border_color;
+        }
 
-        .menu-options {
+        .menu-option {
-            .menu-option-group {
+            color: $dark_mode_text_primary;
-                border-color: $dark_mode_border_color;
-            }
 
-            .menu-option {
+            .icon {
-                color: $dark_mode_text_primary;
+                .alphabet-icon {
-
+                    /deep/ line,
-                .icon {
+                    /deep/ polyline {
-                    .alphabet-icon {
+                        stroke: $dark_mode_text_primary;
-                        /deep/ line,
-                        /deep/ polyline {
-                            stroke: $dark_mode_text_primary;
-                        }
                     }
                 }
-
-                &:hover {
-                    background: rgba($theme, 0.1);
-                }
             }
         }
     }

resources/js/components/Others/ContentFileView.vue

@@ -3,14 +3,14 @@
          @contextmenu.prevent.capture="contextMenu($event, undefined)"
          id="files-view">
         <ContextMenu/>
-        <SortingAndPreview/>
+        <DesktopSortingAndPreview/>
         <DesktopToolbar/>
         <FileBrowser/>
     </div>
 </template>
 
 <script>
-    import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
+    import DesktopSortingAndPreview from '@/components/FilesView/DesktopSortingAndPreview'
     import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
     import FileBrowser from '@/components/FilesView/FileBrowser'
     import ContextMenu from '@/components/FilesView/ContextMenu'
@@ -20,7 +20,7 @@
     export default {
         name: 'FilesView',
         components: {
-            SortingAndPreview,
+            DesktopSortingAndPreview,
             DesktopToolbar,
             FileBrowser,
             ContextMenu,

resources/js/views/Shared/SharedPage.vue

@@ -106,7 +106,7 @@
                     <FileBrowser/>
                     
                     <!-- Selecting preview list and sorting -->
-                    <SortingAndPreview/>
+                    <DesktopSortingAndPreview/>
                 </div>
             </div>
     </div>
@@ -116,7 +116,7 @@
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
     import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
-    import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
+    import DesktopSortingAndPreview from '@/components/FilesView/DesktopSortingAndPreview'
     import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
     import FileFullPreview from '@/components/FilesView/FileFullPreview'
     import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
@@ -149,7 +149,7 @@
             MobileSortingAndPreview,
             MobileMultiSelectMenu,
             ValidationProvider,
-            SortingAndPreview,
+            DesktopSortingAndPreview,
             ValidationObserver,
             TreeMenuNavigator,
             FileFullPreview,