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/FileItemList.vue

@@ -1,26 +1,17 @@
 <template>
-	<div class="file-wrapper" 
+    <div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
-	@click.stop="clickedItem" 
-	@dblclick="goToItem" 
-	spellcheck="false">
         <!--List preview-->
-		<div
+        <div :draggable="canDrag" @dragstart="$emit('dragstart')" @drop="
-			:draggable="canDrag"
-			@dragstart="$emit('dragstart')"
-			@drop="
 				drop()
-				area = false"
+				area = false" @dragleave="dragLeave" @dragover.prevent="dragEnter" class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }">
-			@dragleave="dragLeave"
-			@dragover.prevent="dragEnter"
-			class="file-item"
-			:class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }"
-		>
             <!-- MultiSelecting for the mobile version -->
+            <transition name="slide-from-left">
                 <div class="check-select" v-if="mobileMultiSelect">
                     <div class="select-box" :class="{'select-box-active' : isClicked } ">
                         <CheckIcon v-if="isClicked" class="icon" size="17"/>
                     </div>
                 </div>
+            </transition>
 
             <!--Thumbnail for item-->
             <div class="icon-item">
@@ -41,7 +32,6 @@
 
             <!--Name-->
             <div class="item-name">
-				<!--Name-->
                 <b ref="name" @input="renameItem" @keydown.delete.stop :contenteditable="canEditName" class="name">
                     {{ itemName }}
                 </b>
@@ -65,12 +55,14 @@
                 </div>
             </div>
 
-			<!--Go Next icon-->
+            <!--Show item actions-->
+            <transition name="slide-from-right">
                 <div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)">
                     <span @click.stop="showItemActions" class="show-actions">
                         <FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
                     </span>
                 </div>
+            </transition>
         </div>
     </div>
 </template>
@@ -87,7 +79,7 @@ export default {
     components: {
         UserPlusIcon,
         LinkIcon,
-		CheckIcon,
+        CheckIcon
     },
     computed: {
         ...mapGetters(['FilePreviewType', 'fileInfoDetail']),
@@ -293,6 +285,30 @@ export default {
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
+.slide-from-left-move {
+    transition: transform 300s ease;
+}
+
+.slide-from-left-enter-active,
+.slide-from-right-enter-active,
+.slide-from-left-leave-active,
+.slide-from-right-leave-active {
+    transition: all 300ms;
+}
+
+.slide-from-left-enter,
+.slide-from-left-leave-to {
+    opacity: 0;
+    transform: translateX(-100%);
+}
+
+.slide-from-right-enter,
+.slide-from-right-leave-to {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+
 .check-select {
     margin-right: 15px;
     margin-left: 6px;
@@ -300,17 +316,18 @@ export default {
     .select-box {
         width: 20px;
         height: 20px;
-		background-color: $light_background;
+        background-color: darken($light_background, 5%);
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 5px;
-  		box-shadow: 0 3px 15px 2px hsla(220, 36%, 16%, 0.05);
     }
+
     .select-box-active {
-		background-color: $text ;
+        background-color: #f4f5f6;
+
         .icon {
-			stroke: white;
+            stroke: $text;
         }
     }
 }
@@ -480,7 +497,6 @@ export default {
         display: flex;
         align-items: center;
         padding: 7px;
-		// background-color: white ;
 
         &.is-dragenter {
             border: 2px dashed $theme;
@@ -489,6 +505,7 @@ export default {
 
         &.no-clicked {
             background: white !important;
+
             .item-name {
                 .name {
                     color: $text !important;
@@ -500,6 +517,7 @@ export default {
         &.is-clicked {
             border-radius: 8px;
             background: $light_background;
+
             .item-name .name {
                 color: $theme;
             }
@@ -509,13 +527,16 @@ export default {
 
 @media (prefers-color-scheme: dark) {
     .check-select {
+
         .select-box {
-			background-color: $dark_mode_foreground;
+            background-color: lighten($dark_mode_foreground, 10%);
         }
+
         .select-box-active {
-			background-color: $theme;
+            background-color: lighten($dark_mode_foreground, 10%);
+
             .icon {
-				stroke: $text;
+                stroke: $theme;
             }
         }
     }
@@ -541,6 +562,7 @@ export default {
         .file-item {
             &.no-clicked {
                 background: $dark_mode_background !important;
+
                 .file-icon {
 
                     path {
@@ -548,6 +570,7 @@ export default {
                         stroke: #2F3C54;
                     }
                 }
+
                 .item-name {
 
                     .name {
@@ -555,6 +578,7 @@ export default {
                     }
                 }
             }
+
             &:hover,
             &.is-clicked {
                 background: $dark_mode_foreground;

resources/js/components/FilesView/MobileActions.vue

@@ -15,6 +15,7 @@
         </div>
 
         <!--ContextMenu for Base location with MASTER permission-->
+        <transition name="button">
             <div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
                 <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
                     {{ $t('context_menu.add_folder') }}
@@ -29,8 +30,10 @@
                     {{$t('preview_sorting.preview_sorting_button')}}
                 </MobileActionButton>
             </div>
+        </transition>
 
         <!-- Selecting buttons -->
+        <transition name="button">
             <div v-if="multiSelectMode" class="mobile-actions">
                 <MobileActionButton @click.native="selectAll" icon="check-square">
                     {{$t('mobile_selecting.select_all')}}
@@ -42,6 +45,7 @@
                     {{$t('mobile_selecting.done')}}
                 </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,14 +1,16 @@
 import i18n from '@/i18n/index'
 import router from '@/router'
 import { events } from '@/bus'
-import { Store } from 'vuex'
 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 = []
 
 		// get unique_ids of selected files
@@ -19,6 +21,8 @@ const actions = {
 			? '/api/zip/public/' + router.currentRoute.params.token
 			: '/api/zip'
 
+		commit('ZIPPING_FILE_STATUS', true)
+
 		axios.post(route, {
 			files: files
 		})
@@ -28,6 +32,9 @@ const actions = {
 			.catch(() => {
 				Vue.prototype.$isSomethingWrong()
 			})
+			.finally(() => {
+				commit('ZIPPING_FILE_STATUS', false)
+			})
 	},
 	moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {
 
@@ -40,7 +47,7 @@ const actions = {
 
 		items.forEach(data => itemsToMove.push({
 			'force_delete': data.deleted_at ? true : false,
-            "unique_id": data.unique_id,
+			'unique_id': data.unique_id,
 			'type': data.type
 		}))
 
@@ -133,8 +140,8 @@ const actions = {
 				: '/api/upload'
 
 			// Create cancel token for axios cancelation
-            const CancelToken = axios.CancelToken;
+			const CancelToken = axios.CancelToken
-            const source = CancelToken.source();
+			const source = CancelToken.source()
 
 			axios
 				.post(route, form, {
@@ -174,27 +181,27 @@ const actions = {
 								title: i18n.t('popup_exceed_limit.title'),
 								message: i18n.t('popup_exceed_limit.message')
 							})
-                            break;
+							break
 						case 415:
 							events.$emit('alert:open', {
 								emoji: '😬😬😬',
 								title: i18n.t('popup_mimetypes_blacklist.title'),
 								message: i18n.t('popup_mimetypes_blacklist.message')
 							})
-                            break;
+							break
 						case 413:
 							events.$emit('alert:open', {
 								emoji: '😟😟😟',
 								title: i18n.t('popup_paylod_error.title'),
 								message: i18n.t('popup_paylod_error.message')
 							})
-                            break;
+							break
 						default:
 							events.$emit('alert:open', {
 								title: i18n.t('popup_error.title'),
-                                message: i18n.t('popup_error.message'),
+								message: i18n.t('popup_error.message')
 							})
-                            break;
+							break
 					}
 
 					// Reset uploader
@@ -203,7 +210,7 @@ const actions = {
 
 			// Cancel the upload request
 			events.$on('cancel-upload', () => {
-                source.cancel();
+				source.cancel()
 
 				// Hide upload progress bar
 				commit('PROCESSING_FILE', false)
@@ -246,7 +253,7 @@ const actions = {
 			itemsToDelete.push({
 				'force_delete': data.deleted_at ? true : false,
 				'type': data.type,
-                "unique_id": data.unique_id
+				'unique_id': data.unique_id
 			})
 
 			// Remove file
@@ -329,9 +336,22 @@ const actions = {
 				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 {
+	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