merge local with remote changes (Peter)

config/vuefilemanager.php

@@ -2,7 +2,7 @@
 
 return [
 
-    'version'    => '1.8-rc.1',
+    'version'    => '1.8-rc.2',
 
     // Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB.
     'chunk_size' => env('CHUNK_SIZE', '128'),

public/mix-manifest.json

@@ -30,7 +30,7 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=48efd0b887fbc804ac90",
     "/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
     "/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=b5bf44fc6591d68c9d86",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=9dfd4ea3069b9a4b4484",
     "/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",
@@ -157,5 +157,10 @@
     "/js/main.0bc57da76f8e324dc858.hot-update.js": "/js/main.0bc57da76f8e324dc858.hot-update.js",
     "/js/main.048759ef5eff401f09ae.hot-update.js": "/js/main.048759ef5eff401f09ae.hot-update.js",
     "/chunks/files~chunks/shared-files~chunks/shared-page.13ae03ed21af9031c4ca.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.13ae03ed21af9031c4ca.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.a0f0c6ef92df103283b1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.a0f0c6ef92df103283b1.hot-update.js"
+    "/chunks/files~chunks/shared-files~chunks/shared-page.a0f0c6ef92df103283b1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.a0f0c6ef92df103283b1.hot-update.js",
+    "/js/main.ebd9a9d444091a32f5fa.hot-update.js": "/js/main.ebd9a9d444091a32f5fa.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.ebd9a9d444091a32f5fa.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.ebd9a9d444091a32f5fa.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.bd9826df1de83fbfe624.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.bd9826df1de83fbfe624.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.3097e1eb906da5445447.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.3097e1eb906da5445447.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.5794b7a90772587fee54.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.5794b7a90772587fee54.hot-update.js"
 }

resources/js/App.vue

@@ -12,6 +12,8 @@
             <!--Mobile Navigation-->
             <MobileNavigation/>
 
+            <ProcessingPopup/>
+
             <!--Confirm Popup-->
             <Confirm/>
 
@@ -65,6 +67,7 @@
 import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
 import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
 import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
+import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
 import FileFullPreview from '@/components/FilesView/FileFullPreview'
 import MobileNavigation from '@/components/Others/MobileNavigation'
 import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
@@ -91,6 +94,7 @@ export default {
         MobileNavigation,
         CookieDisclaimer,
         FileFullPreview,
+        ProcessingPopup,
         ToastrWrapper,
         CreateFolder,
         ShareCreate,

resources/js/components/FilesView/FileItemGrid.vue

@@ -8,7 +8,7 @@
             <div class="icon-item">
 
                 <!-- MultiSelecting for the mobile version -->
-                <div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="mobileMultiSelect">
+                <div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="multiSelectMode">
                     <div class="select-box" :class="{'select-box-active' : isClicked } ">
                         <CheckIcon v-if="isClicked" class="icon" size="17"/>
                     </div>
@@ -58,7 +58,7 @@
                 </div>
             </div>
 
-            <span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || mobileMultiSelect ) && canShowMobileOptions">
+            <span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || multiSelectMode ) && canShowMobileOptions">
                 <FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
             </span>
         </div>
@@ -132,7 +132,7 @@ export default {
         return {
             area: false,
             itemName: undefined,
-            mobileMultiSelect: false
+            multiSelectMode: false
         }
     },
     methods: {
@@ -193,7 +193,7 @@ export default {
                 }
             }
 
-            if (!this.mobileMultiSelect && this.$isMobile()) {
+            if (!this.multiSelectMode && this.$isMobile()) {
                 // Open in mobile version on first click
                 if (this.$isMobile() && this.isFolder) {
                     // Go to folder
@@ -212,7 +212,7 @@ export default {
                 }
             }
 
-            if (this.mobileMultiSelect && this.$isMobile()) {
+            if (this.multiSelectMode && this.$isMobile()) {
                 if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
                     this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
                 } else {
@@ -264,12 +264,12 @@ export default {
         this.itemName = this.data.name
 
         events.$on('mobileSelecting:start', () => {
-            this.mobileMultiSelect = true
+            this.multiSelectMode = true
             this.$store.commit('CLEAR_FILEINFO_DETAIL')
         })
 
         events.$on('mobileSelecting:stop', () => {
-            this.mobileMultiSelect = false
+            this.multiSelectMode = false
             this.$store.commit('CLEAR_FILEINFO_DETAIL')
         })
         // Change item name
@@ -564,11 +564,11 @@ export default {
 @media (prefers-color-scheme: dark) {
 
     .select-box {
-        background-color: $dark_mode_foreground;
+        background-color: lighten($dark_mode_foreground, 10%);
     }
 
     .select-box-active {
-        background-color: $theme;
+        background-color: #f4f5f6;
 
         .icon {
             stroke: $text;

resources/js/components/FilesView/MobileActions.vue

@@ -15,33 +15,37 @@
         </div>
 
         <!--ContextMenu for Base location with MASTER permission-->
-        <div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
+        <transition name="button">
-            <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
+            <div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
-                {{ $t('context_menu.add_folder') }}
+                <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
-            </MobileActionButton>
+                    {{ $t('context_menu.add_folder') }}
-            <MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
+                </MobileActionButton>
-                {{ $t('context_menu.upload') }}
+                <MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
-            </MobileActionButtonUpload>
+                    {{ $t('context_menu.upload') }}
-            <MobileMultiSelectButton @click.native="enableMultiSelectMode">
+                </MobileActionButtonUpload>
-                {{ $t('context_menu.select') }}
+                <MobileMultiSelectButton @click.native="enableMultiSelectMode">
-            </MobileMultiSelectButton>
+                    {{ $t('context_menu.select') }}
-            <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
+                </MobileMultiSelectButton>
-                {{$t('preview_sorting.preview_sorting_button')}}
+                <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
-            </MobileActionButton>
+                    {{$t('preview_sorting.preview_sorting_button')}}
-        </div>
+                </MobileActionButton>
+            </div>
+        </transition>
 
         <!-- Selecting buttons -->
-        <div v-if="multiSelectMode" class="mobile-actions">
+        <transition name="button">
-            <MobileActionButton @click.native="selectAll" icon="check-square">
+            <div v-if="multiSelectMode" class="mobile-actions">
-                {{$t('mobile_selecting.select_all')}}
+                <MobileActionButton @click.native="selectAll" icon="check-square">
-            </MobileActionButton>
+                    {{$t('mobile_selecting.select_all')}}
-            <MobileActionButton @click.native="deselectAll" icon="x-square">
+                </MobileActionButton>
-                {{$t('mobile_selecting.deselect_all')}}
+                <MobileActionButton @click.native="deselectAll" icon="x-square">
-            </MobileActionButton>
+                    {{$t('mobile_selecting.deselect_all')}}
-            <MobileActionButton @click.native="disableMultiSelectMode" icon="check">
+                </MobileActionButton>
-                {{$t('mobile_selecting.done')}}
+                <MobileActionButton @click.native="disableMultiSelectMode" icon="check">
-            </MobileActionButton>
+                    {{$t('mobile_selecting.done')}}
-        </div>
+                </MobileActionButton>
+            </div>
+        </transition>
 
         <!--ContextMenu for Base location with VISITOR permission-->
         <div v-if="baseLocationVisitorMenu && ! multiSelectMode" class="mobile-actions">
@@ -134,6 +138,25 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    .button-enter-active,
+    .button-leave-active {
+        transition: all 250ms;
+    }
+
+    .button-enter {
+        opacity: 0;
+        transform: translateY(-50%);
+    }
+
+    .button-leave-to {
+        opacity: 0;
+        transform: translateY(50%);
+    }
+
+    .button-leave-active {
+        position: absolute;
+    }
+
     .preview-sorting { 
         background: $light_background !important;
         /deep/ .label {

resources/js/components/FilesView/MobileMultiSelectMenu.vue

@@ -81,7 +81,7 @@ export default {
 .multiselect-actions {
     display: flex;
     padding: 10px 15px;
-    position: absolute;
+    position: fixed;
     bottom: 0;
     left: 0;
     right: 0;

resources/js/components/FilesView/ProcessingPopup.vue

@@ -0,0 +1,138 @@
+<template>
+    <transition name="popup">
+        <div class="popup" v-if="isZippingFiles">
+            <div class="popup-wrapper">
+                <div class="popup-content">
+                    <div class="spinner-wrapper">
+                        <Spinner/>
+                    </div>
+                    <h1 class="title">{{ $t('popup_zipping.title') }}</h1>
+                    <p class="message">{{ $t('popup_zipping.message') }}</p>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import Spinner from '@/components/FilesView/Spinner'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'ProcessingPopup',
+    components: {
+        Spinner
+    },
+    computed: {
+        ...mapGetters([
+            'isZippingFiles'
+        ])
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
+
+.spinner-wrapper {
+    padding-bottom: 90px;
+    position: relative;
+}
+
+.popup {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    overflow: auto;
+    height: 100%;
+}
+
+.popup-wrapper {
+    z-index: 12;
+    position: absolute;
+    left: 0;
+    right: 0;
+    max-width: 480px;
+    top: 50%;
+    transform: translateY(-50%) scale(1);
+    margin: 0 auto;
+    padding: 20px;
+    box-shadow: $light_mode_popup_shadow;
+    border-radius: 8px;
+    text-align: center;
+    background: white;
+}
+
+.popup-content {
+
+    .title {
+        @include font-size(22);
+        font-weight: 700;
+        color: $text;
+    }
+
+    .message {
+        @include font-size(16);
+        color: #333;
+        margin-top: 5px;
+    }
+}
+
+@media only screen and (max-width: 690px) {
+    .popup-wrapper {
+        padding: 20px;
+        left: 15px;
+        right: 15px;
+    }
+
+    .popup-content {
+
+        .title {
+            @include font-size(19);
+        }
+
+        .message {
+            @include font-size(15);
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .popup-wrapper {
+        background: $dark_mode_background;
+    }
+    .popup-content {
+        .title {
+            color: $dark_mode_text_primary;
+        }
+
+        .message {
+            color: $dark_mode_text_secondary;
+        }
+    }
+}
+
+// Animations
+.popup-enter-active {
+    animation: popup-in 0.35s 0.15s ease both;
+}
+
+.popup-leave-active {
+    animation: popup-in 0.15s ease reverse;
+}
+
+@keyframes popup-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+</style>

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

@@ -43,11 +43,7 @@
             })
 
             // Close popup
-            events.$on('popup:close', () => {
+            events.$on('popup:close', () => this.isVisibleWrapper = false)
-
-                // Close popup
-                this.isVisibleWrapper = false
-            })
         }
     }
 </script>

resources/js/components/Others/Vignette.vue

@@ -1,14 +1,23 @@
 <template>
     <transition name="vignette">
-        <div v-if="isVisibleVignette" class="vignette" @click="closePopup"></div>
+        <div v-if="isVisible" class="vignette" @click="closePopup"></div>
     </transition>
 </template>
 
 <script>
     import {events} from '@/bus'
+    import { mapGetters } from 'vuex'
 
     export default {
         name: 'Vignette',
+        computed: {
+            ...mapGetters([
+                'isZippingFiles'
+            ]),
+            isVisible() {
+                return this.isZippingFiles || this.isVisibleVignette
+            },
+        },
         data() {
             return {
                 isVisibleVignette: false,
@@ -31,9 +40,7 @@
             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) => {
+            events.$on('mobileSortingAndPreviewVignette', (state) => this.isVisibleVignette = state)
-                this.isVisibleVignette = state
-            })
 
         }
     }

resources/js/i18n/lang/cn.json

@@ -522,6 +522,10 @@
 		"title": "Oh no",
 		"message": "File of this type ({mimetype}) is not allowed to upload."
 	},
+	"popup_zipping": {
+		"title": "Zipping Your Files...",
+		"message": "Please wait until your files start downloading."
+	},
 	"popup_create_folder": {
 		"folder_default_name": "New Folder",
 		"title": "Create Folder",

resources/js/i18n/lang/en.json

@@ -565,6 +565,10 @@
 		"message": "Sorry, your file is too large and can't be uploaded",
 		"title": "File is too large"
 	},
+	"popup_zipping": {
+		"title": "Zipping Your Files...",
+		"message": "Please wait until your files start downloading."
+	},
 	"popup_rename": {
 		"title": "Rename Your {item}",
 		"label": "Edit Name",

resources/js/i18n/lang/sk.json

@@ -524,6 +524,10 @@
 		"title": "Ospravelnujume sa",
 		"message": "Nieje povolené nahrávať tento typ súboru ({mimetype})."
 	},
+	"popup_zipping": {
+		"title": "Súbory sa zipujú...",
+		"message": "Čakajte prosím, kým súbory sa nezačnú sťahovať."
+	},
 	"popup_create_folder": {
 		"folder_default_name": "Nový priečinok",
 		"title": "Vytvoriť priečinok",

resources/js/store/modules/fileBrowser.js

@@ -1,3 +1,4 @@
+import Vue from "vue"
 import axios from 'axios'
 import {events} from '@/bus'
 import router from '@/router'
@@ -84,7 +85,7 @@ const actions = {
                 commit('LOADING_STATE', {loading: false, data: response.data})
                 events.$emit('scrollTop')
             })
-            .catch(() => isSomethingWrong())
+            .catch(() => Vue.prototype.$isSomethingWrong())
     },
     getShared: ({commit, getters}) => {
         commit('LOADING_STATE', {loading: true, data: []})
@@ -107,7 +108,7 @@ const actions = {
 
                 events.$emit('scrollTop')
             })
-            .catch(() => isSomethingWrong())
+            .catch(() => Vue.prototype.$isSomethingWrong())
     },
     getParticipantUploads: ({commit, getters}) => {
         commit('LOADING_STATE', {loading: true, data: []})
@@ -126,7 +127,7 @@ const actions = {
 
                 events.$emit('scrollTop')
             })
-            .catch(() => isSomethingWrong())
+            .catch(() => Vue.prototype.$isSomethingWrong())
     },
     getTrash: ({commit, getters}) => {
         commit('LOADING_STATE', {loading: true, data: []})
@@ -148,7 +149,7 @@ const actions = {
 
                 events.$emit('scrollTop')
             })
-            .catch(() => isSomethingWrong())
+            .catch(() => Vue.prototype.$isSomethingWrong())
     },
     getSearchResult: ({commit, getters}, query) => {
         commit('LOADING_STATE', {loading: true, data: []})
@@ -171,7 +172,7 @@ const actions = {
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
             })
-            .catch(() => isSomethingWrong())
+            .catch(() => Vue.prototype.$isSomethingWrong())
     },
     getFolderTree: ({commit, getters}) => {
 
@@ -197,7 +198,7 @@ const actions = {
                 .catch((error) => {
                     reject(error)
 
-                    isSomethingWrong()
+                    Vue.prototype.$isSomethingWrong()
                 })
         })
     },
@@ -305,14 +306,6 @@ const getters = {
     data: state => state.data,
 }
 
-// Show error message
-function isSomethingWrong() {
-    events.$emit('alert:open', {
-        title: i18n.t('popup_error.title'),
-        message: i18n.t('popup_error.message'),
-    })
-}
-
 export default {
     state: defaultState,
     getters,

resources/js/store/modules/fileFunctions.js

@@ -1,337 +1,357 @@
 import i18n from '@/i18n/index'
 import router from '@/router'
-import {events} from '@/bus'
+import { events } from '@/bus'
-import { Store } from 'vuex'
+import { last } from 'lodash'
-import {last} from 'lodash'
 import axios from 'axios'
-import Vue from "vue"
+import Vue from 'vue'
 
+const defaultState = {
+	isZippingFiles: false,
+}
 
 const actions = {
-    downloadFiles: ({ getters }) => {
+	downloadFiles: ({ commit, getters }) => {
-        let files = []
+		let files = []
 
-        // get unique_ids of selected files
+		// get unique_ids of selected files
-        getters.fileInfoDetail.forEach(file => files.push(file.unique_id))
+		getters.fileInfoDetail.forEach(file => files.push(file.unique_id))
 
-        // Get route
+		// Get route
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
-            ? '/api/zip/public/' + router.currentRoute.params.token
+			? '/api/zip/public/' + router.currentRoute.params.token
-            : '/api/zip'
+			: '/api/zip'
 
-        axios.post(route, {
+		commit('ZIPPING_FILE_STATUS', true)
-            files: files
-        })
-            .then(response => {
-                Vue.prototype.$downloadFile(response.data.url, response.data.name)
-            })
-            .catch(() => {
-                Vue.prototype.$isSomethingWrong()
-            })
-    },
-    moveItem: ({commit, getters, dispatch}, {to_item ,noSelectedItem}) => {
 
-        let itemsToMove = []
+		axios.post(route, {
-        let items = [noSelectedItem]
+			files: files
+		})
+			.then(response => {
+				Vue.prototype.$downloadFile(response.data.url, response.data.name)
+			})
+			.catch(() => {
+				Vue.prototype.$isSomethingWrong()
+			})
+			.finally(() => {
+				commit('ZIPPING_FILE_STATUS', false)
+			})
+	},
+	moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {
 
-        // If coming no selected item dont get items to move from fileInfoDetail
+		let itemsToMove = []
-        if (!noSelectedItem)
+		let items = [noSelectedItem]
-            items = getters.fileInfoDetail
 
-        items.forEach(data => itemsToMove.push({
+		// If coming no selected item dont get items to move from fileInfoDetail
-            'force_delete': data.deleted_at ? true : false,
+		if (!noSelectedItem)
-            "unique_id": data.unique_id,
+			items = getters.fileInfoDetail
-            'type': data.type
-        }))
 
-        // Remove file preview
+		items.forEach(data => itemsToMove.push({
-        if (!noSelectedItem)
+			'force_delete': data.deleted_at ? true : false,
-            commit('CLEAR_FILEINFO_DETAIL')
+			'unique_id': data.unique_id,
+			'type': data.type
+		}))
 
-        // Get route
+		// Remove file preview
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		if (!noSelectedItem)
-            ? '/api/move/public/' + router.currentRoute.params.token
+			commit('CLEAR_FILEINFO_DETAIL')
-            : '/api/move'
 
-        axios
+		// Get route
-            .post(route, {
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
-                _method: 'post',
+			? '/api/move/public/' + router.currentRoute.params.token
-                to_unique_id: to_item.unique_id,
+			: '/api/move'
-                items: itemsToMove
-            })
-            .then(() => {
-                itemsToMove.forEach(item => {
-                    commit('REMOVE_ITEM', item.unique_id)
-                    commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
 
-                    if (item.type === 'folder')
+		axios
-                        dispatch('getAppData')
+			.post(route, {
-                    if ( getters.currentFolder.location === 'public')
+				_method: 'post',
-                        dispatch('getFolderTree')
+				to_unique_id: to_item.unique_id,
-                })
+				items: itemsToMove
-            })
+			})
-            .catch(() => Vue.prototype.$isSomethingWrong())
+			.then(() => {
-    },
+				itemsToMove.forEach(item => {
-    createFolder: ({commit, getters, dispatch}, folderName) => {
+					commit('REMOVE_ITEM', item.unique_id)
+					commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
 
-        // Get route
+					if (item.type === 'folder')
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+						dispatch('getAppData')
-            ? '/api/create-folder/public/' + router.currentRoute.params.token
+					if (getters.currentFolder.location === 'public')
-            : '/api/create-folder'
+						dispatch('getFolderTree')
+				})
+			})
+			.catch(() => Vue.prototype.$isSomethingWrong())
+	},
+	createFolder: ({ commit, getters, dispatch }, folderName) => {
 
-        axios
+		// Get route
-            .post(route, {
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
-                parent_id: getters.currentFolder.unique_id,
+			? '/api/create-folder/public/' + router.currentRoute.params.token
-                name: folderName
+			: '/api/create-folder'
-            })
-            .then(response => {
-                commit('ADD_NEW_FOLDER', response.data)
 
-                events.$emit('scrollTop')
+		axios
+			.post(route, {
+				parent_id: getters.currentFolder.unique_id,
+				name: folderName
+			})
+			.then(response => {
+				commit('ADD_NEW_FOLDER', response.data)
 
-                if ( getters.currentFolder.location !== 'public' )
+				events.$emit('scrollTop')
-                    dispatch('getAppData')
-                if ( getters.currentFolder.location === 'public')
-                    dispatch('getFolderTree')
 
-            })
+				if (getters.currentFolder.location !== 'public')
-            .catch(() => Vue.prototype.$isSomethingWrong())
+					dispatch('getAppData')
-    },
+				if (getters.currentFolder.location === 'public')
-    renameItem: ({commit, getters, dispatch}, data) => {
+					dispatch('getFolderTree')
 
-        // Updated name in favourites panel
+			})
-        if (getters.permission === 'master' && data.type === 'folder')
+			.catch(() => Vue.prototype.$isSomethingWrong())
-            commit('UPDATE_NAME_IN_FAVOURITES', data)
+	},
+	renameItem: ({ commit, getters, dispatch }, data) => {
 
-        // Get route
+		// Updated name in favourites panel
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		if (getters.permission === 'master' && data.type === 'folder')
-            ? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
+			commit('UPDATE_NAME_IN_FAVOURITES', data)
-            : '/api/rename-item/' + data.unique_id
 
-        axios
+		// Get route
-            .post(route, {
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
-                name: data.name,
+			? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
-                type: data.type,
+			: '/api/rename-item/' + data.unique_id
-                _method: 'patch'
-            })
-            .then(response => {
-                commit('CHANGE_ITEM_NAME', response.data)
 
-                if (data.type === 'folder' && getters.currentFolder.location !== 'public')
+		axios
-                    dispatch('getAppData')
+			.post(route, {
-                if (data.type === 'folder' && getters.currentFolder.location === 'public')
+				name: data.name,
-                    dispatch('getFolderTree')
+				type: data.type,
-            })
+				_method: 'patch'
-            .catch(() => Vue.prototype.$isSomethingWrong())
+			})
-    },
+			.then(response => {
-    uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
+				commit('CHANGE_ITEM_NAME', response.data)
-        return new Promise((resolve, reject) => {
 
-            // Get route
+				if (data.type === 'folder' && getters.currentFolder.location !== 'public')
-            let route = getters.sharedDetail && ! getters.sharedDetail.protected
+					dispatch('getAppData')
-                ? '/api/upload/public/' + router.currentRoute.params.token
+				if (data.type === 'folder' && getters.currentFolder.location === 'public')
-                : '/api/upload'
+					dispatch('getFolderTree')
+			})
+			.catch(() => Vue.prototype.$isSomethingWrong())
+	},
+	uploadFiles: ({ commit, getters }, { form, fileSize, totalUploadedSize }) => {
+		return new Promise((resolve, reject) => {
 
-            // Create cancel token for axios cancelation
+			// Get route
-            const CancelToken = axios.CancelToken;
+			let route = getters.sharedDetail && !getters.sharedDetail.protected
-            const source = CancelToken.source();
+				? '/api/upload/public/' + router.currentRoute.params.token
+				: '/api/upload'
 
-            axios
+			// Create cancel token for axios cancelation
-                .post(route, form, {
+			const CancelToken = axios.CancelToken
-                    cancelToken: source.token,
+			const source = CancelToken.source()
-                    headers: {
-                        'Content-Type': 'application/octet-stream'
-                    },
-                    onUploadProgress: event => {
 
-                        var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
+			axios
+				.post(route, form, {
+					cancelToken: source.token,
+					headers: {
+						'Content-Type': 'application/octet-stream'
+					},
+					onUploadProgress: event => {
 
-                        commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
+						var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
 
-                        if (percentCompleted >= 100) {
+						commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
-                            commit('PROCESSING_FILE', true)
-                        }
-                    }
-                })
-                .then(response => {
-                    commit('PROCESSING_FILE', false)
 
-                    // Check if user is in uploading folder, if yes, than show new file
+						if (percentCompleted >= 100) {
-                    if (response.data.folder_id == getters.currentFolder.unique_id)
+							commit('PROCESSING_FILE', true)
-                        commit('ADD_NEW_ITEMS', response.data)
+						}
+					}
+				})
+				.then(response => {
+					commit('PROCESSING_FILE', false)
 
-                    resolve(response)
+					// Check if user is in uploading folder, if yes, than show new file
-                })
+					if (response.data.folder_id == getters.currentFolder.unique_id)
-                .catch(error => {
+						commit('ADD_NEW_ITEMS', response.data)
-                    commit('PROCESSING_FILE', false)
 
-                    reject(error)
+					resolve(response)
+				})
+				.catch(error => {
+					commit('PROCESSING_FILE', false)
 
-                    switch (error.response.status) {
+					reject(error)
-                        case 423:
-                            events.$emit('alert:open', {
-                                emoji: '😬😬😬',
-                                title: i18n.t('popup_exceed_limit.title'),
-                                message: i18n.t('popup_exceed_limit.message')
-                            })
-                            break;
-                            case 415:
-                                events.$emit('alert:open', {
-                                    emoji: '😬😬😬',
-                                    title: i18n.t('popup_mimetypes_blacklist.title'),
-                                    message: i18n.t('popup_mimetypes_blacklist.message')
-                                })
-                            break;
-                        case 413:
-                            events.$emit('alert:open', {
-                                emoji: '😟😟😟',
-                                title: i18n.t('popup_paylod_error.title'),
-                                message: i18n.t('popup_paylod_error.message')
-                            })
-                            break;
-                        default:
-                            events.$emit('alert:open', {
-                                title: i18n.t('popup_error.title'),
-                                message: i18n.t('popup_error.message'),
-                            })
-                            break;
-                    }
 
-                    // Reset uploader
+					switch (error.response.status) {
-                    commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+						case 423:
-                })
+							events.$emit('alert:open', {
+								emoji: '😬😬😬',
+								title: i18n.t('popup_exceed_limit.title'),
+								message: i18n.t('popup_exceed_limit.message')
+							})
+							break
+						case 415:
+							events.$emit('alert:open', {
+								emoji: '😬😬😬',
+								title: i18n.t('popup_mimetypes_blacklist.title'),
+								message: i18n.t('popup_mimetypes_blacklist.message')
+							})
+							break
+						case 413:
+							events.$emit('alert:open', {
+								emoji: '😟😟😟',
+								title: i18n.t('popup_paylod_error.title'),
+								message: i18n.t('popup_paylod_error.message')
+							})
+							break
+						default:
+							events.$emit('alert:open', {
+								title: i18n.t('popup_error.title'),
+								message: i18n.t('popup_error.message')
+							})
+							break
+					}
 
-            // Cancel the upload request
+					// Reset uploader
-            events.$on('cancel-upload', () => {
+					commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
-                source.cancel();
+				})
 
-                // Hide upload progress bar
+			// Cancel the upload request
-                commit('PROCESSING_FILE', false)
+			events.$on('cancel-upload', () => {
-                commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+				source.cancel()
-            })
-        })
-    },
-    restoreItem: ({commit, getters}, item) => {
 
-        let restoreToHome = false
+				// Hide upload progress bar
+				commit('PROCESSING_FILE', false)
+				commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+			})
+		})
+	},
+	restoreItem: ({ commit, getters }, item) => {
 
-        // Check if file can be restored to home directory
+		let restoreToHome = false
-        if (getters.currentFolder.location === 'trash')
-            restoreToHome = true
 
-        // Remove file
+		// Check if file can be restored to home directory
-        commit('REMOVE_ITEM', item.unique_id)
+		if (getters.currentFolder.location === 'trash')
+			restoreToHome = true
 
-        // Remove file preview
+		// Remove file
-        commit('CLEAR_FILEINFO_DETAIL')
+		commit('REMOVE_ITEM', item.unique_id)
 
-        axios
+		// Remove file preview
-            .post(getters.api + '/restore-item/' + item.unique_id, {
+		commit('CLEAR_FILEINFO_DETAIL')
-                type: item.type,
-                to_home: restoreToHome,
-                _method: 'patch'
-            })
-            .catch(() => Vue.prototype.$isSomethingWrong())
-    },
-    deleteItem: ({commit, getters, dispatch}, noSelectedItem) => {
 
-        let itemsToDelete = []
+		axios
-        let items = [noSelectedItem]
+			.post(getters.api + '/restore-item/' + item.unique_id, {
+				type: item.type,
+				to_home: restoreToHome,
+				_method: 'patch'
+			})
+			.catch(() => Vue.prototype.$isSomethingWrong())
+	},
+	deleteItem: ({ commit, getters, dispatch }, noSelectedItem) => {
 
-         // If coming no selected item dont get items to move from fileInfoDetail
+		let itemsToDelete = []
-        if(!noSelectedItem) 
+		let items = [noSelectedItem]
-            items = getters.fileInfoDetail
 
-        items.forEach(data => {
+		// If coming no selected item dont get items to move from fileInfoDetail
-            itemsToDelete.push({
+		if (!noSelectedItem)
-                'force_delete': data.deleted_at ? true : false,
+			items = getters.fileInfoDetail
-                'type': data.type,
-                "unique_id": data.unique_id
-            })
 
-            // Remove file
+		items.forEach(data => {
-            commit('REMOVE_ITEM', data.unique_id)
+			itemsToDelete.push({
+				'force_delete': data.deleted_at ? true : false,
+				'type': data.type,
+				'unique_id': data.unique_id
+			})
 
-            // Remove item from sidebar
+			// Remove file
-            if (getters.permission === 'master') {
+			commit('REMOVE_ITEM', data.unique_id)
 
-                if (data.type === 'folder')
+			// Remove item from sidebar
-                    commit('REMOVE_ITEM_FROM_FAVOURITES', data)
+			if (getters.permission === 'master') {
-            }
 
-            // Remove file
+				if (data.type === 'folder')
-            commit('REMOVE_ITEM', data.unique_id)
+					commit('REMOVE_ITEM_FROM_FAVOURITES', data)
+			}
 
-            // Remove item from sidebar
+			// Remove file
-            if (getters.permission === 'master') {
+			commit('REMOVE_ITEM', data.unique_id)
 
-                if (data.type === 'folder')
+			// Remove item from sidebar
-                    commit('REMOVE_ITEM_FROM_FAVOURITES', data)
+			if (getters.permission === 'master') {
-            }   
-        })
 
-        // Remove file preview
+				if (data.type === 'folder')
-        if(!noSelectedItem){
+					commit('REMOVE_ITEM_FROM_FAVOURITES', data)
-            commit('CLEAR_FILEINFO_DETAIL')
+			}
-        }
+		})
 
-        // Get route
+		// Remove file preview
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		if (!noSelectedItem) {
-            ? '/api/remove-item/public/' + router.currentRoute.params.token
+			commit('CLEAR_FILEINFO_DETAIL')
-            : '/api/remove-item'
+		}
 
-        axios
+		// Get route
-            .post(route, {
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
-                _method: 'post',
+			? '/api/remove-item/public/' + router.currentRoute.params.token
-                data: itemsToDelete
+			: '/api/remove-item'
-            })
-            .then(() => {
 
-                itemsToDelete.forEach(data => {
+		axios
+			.post(route, {
+				_method: 'post',
+				data: itemsToDelete
+			})
+			.then(() => {
 
-                    // If is folder, update app data
+				itemsToDelete.forEach(data => {
-                    if (data.type === 'folder') {
 
-                        if (data.unique_id === getters.currentFolder.unique_id) {
+					// If is folder, update app data
+					if (data.type === 'folder') {
 
-                            if ( getters.currentFolder.location === 'public' ) {
+						if (data.unique_id === getters.currentFolder.unique_id) {
-                                dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
-                            } else {
-                                dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
-                            }
-                        }
-                    }
-                })
 
-                if ( getters.currentFolder.location !== 'public' )
+							if (getters.currentFolder.location === 'public') {
-                    dispatch('getAppData')
+								dispatch('browseShared', [{ folder: last(getters.browseHistory), back: true, init: false }])
+							} else {
+								dispatch('getFolder', [{ folder: last(getters.browseHistory), back: true, init: false }])
+							}
+						}
+					}
+				})
 
-                if ( getters.currentFolder.location === 'public')
+				if (getters.currentFolder.location !== 'public')
-                    dispatch('getFolderTree')
+					dispatch('getAppData')
 
-            })
+				if (getters.currentFolder.location === 'public')
-            .catch(() => Vue.prototype.$isSomethingWrong())
+					dispatch('getFolderTree')
-    },
-    emptyTrash: ({commit, getters}) => {
 
-        // Clear file browser
+			})
-        commit('LOADING_STATE', {loading: true, data: []})
+			.catch(() => Vue.prototype.$isSomethingWrong())
+	},
+	emptyTrash: ({ commit, getters }) => {
 
-        axios
+		// Clear file browser
-            .post(getters.api + '/empty-trash', {
+		commit('LOADING_STATE', { loading: true, data: [] })
-                _method: 'delete'
-            })
-            .then(() => {
-                commit('LOADING_STATE', {loading: false, data: []})
-                events.$emit('scrollTop')
 
-                // Remove file preview
+		axios
-                commit('CLEAR_FILEINFO_DETAIL')
+			.post(getters.api + '/empty-trash', {
-            })
+				_method: 'delete'
-            .catch(() => Vue.prototype.$isSomethingWrong())
+			})
-    },
+			.then(() => {
+				commit('LOADING_STATE', { loading: false, data: [] })
+				events.$emit('scrollTop')
+
+				// Remove file preview
+				commit('CLEAR_FILEINFO_DETAIL')
+			})
+			.catch(() => Vue.prototype.$isSomethingWrong())
+	}
+}
+
+const mutations = {
+	ZIPPING_FILE_STATUS(state, status) {
+		state.isZippingFiles = status
+	}
+}
+
+const getters = {
+	isZippingFiles: state => state.isZippingFiles
 }
 
 export default {
-    actions,
+	state: defaultState,
+	mutations,
+	actions,
+	getters
 }

resources/sass/vue-file-manager/_variables.scss

@@ -18,7 +18,7 @@ $dark_background: #EBEBEB;
 $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
 
 $light_mode_input_background: hsla(210, 10%, 98%, 1);
-$light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
+$light_mode_popup_shadow: 0 2px 40px rgba(26,38,74,0.12);
 $light_mode_vignette: rgba(9, 8, 12, 0.35);
 
 // Dark Mode