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">
@@ -30,18 +21,17 @@
                 </span>
 
                 <!--Folder thumbnail-->
-				<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
+                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
 
                 <!--Image thumbnail-->
-				<img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
+                <img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
 
                 <!--Else show only folder icon-->
-				<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
+                <FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
             </div>
 
             <!--Name-->
             <div class="item-name">
-				<!--Name-->
                 <b ref="name" @input="renameItem" @keydown.delete.stop :contenteditable="canEditName" class="name">
                     {{ itemName }}
                 </b>
@@ -65,18 +55,20 @@
                 </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>
 
 <script>
-import { LinkIcon, UserPlusIcon , CheckIcon } from 'vue-feather-icons'
+import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
 import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '@/bus'
@@ -87,11 +79,11 @@ export default {
     components: {
         UserPlusIcon,
         LinkIcon,
-		CheckIcon,
+        CheckIcon
     },
     computed: {
-		...mapGetters(['FilePreviewType', 'fileInfoDetail' ]),
+        ...mapGetters(['FilePreviewType', 'fileInfoDetail']),
-		...mapGetters({allData: 'data'}),
+        ...mapGetters({ allData: 'data' }),
         isClicked() {
             return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
         },
@@ -143,7 +135,7 @@ export default {
         return {
             area: false,
             itemName: undefined,
-			mobileMultiSelect:false
+            mobileMultiSelect: false
         }
     },
     methods: {
@@ -168,45 +160,45 @@ export default {
         clickedItem(e) {
             events.$emit('unClick')
 
-			if(!this.$isMobile()) {
+            if (!this.$isMobile()) {
 
-				if( (e.ctrlKey || e.metaKey ) && !e.shiftKey) {
+                if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
                     // Click + Ctrl
 
-					if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
+                    if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-						this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
+                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
-					}else {
+                    } else {
                         this.$store.commit('GET_FILEINFO_DETAIL', this.data)
                     }
-				}else if (e.shiftKey){
+                } else if (e.shiftKey) {
                     // Click + Shift
-					let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
+                    let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
                     let clickedItem = this.allData.indexOf(this.data)
 
                     // If Click + Shift + Ctrl dont remove already selected items
-					if(!e.ctrlKey && !e.metaKey ) {
+                    if (!e.ctrlKey && !e.metaKey) {
                         this.$store.commit('CLEAR_FILEINFO_DETAIL')
                     }
 
                     //Shift selecting from top to bottom
-					if(lastItem < clickedItem) {
+                    if (lastItem < clickedItem) {
-						for(let i=lastItem ; i<=clickedItem; i++ ) {
+                        for (let i = lastItem; i <= clickedItem; i++) {
                             this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
                         }
                         //Shift selecting from bottom to top
-					}else {
+                    } else {
-						for(let i=lastItem ; i>=clickedItem; i-- ) {
+                        for (let i = lastItem; i >= clickedItem; i--) {
                             this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
                         }
                     }
-				}else {
+                } else {
                     // Click
                     this.$store.commit('CLEAR_FILEINFO_DETAIL')
                     this.$store.commit('GET_FILEINFO_DETAIL', this.data)
                 }
             }
 
-			if(!this.mobileMultiSelect && this.$isMobile()){
+            if (!this.mobileMultiSelect && this.$isMobile()) {
                 // Open in mobile version on first click
                 if (this.$isMobile() && this.isFolder) {
                     // Go to folder
@@ -225,10 +217,10 @@ export default {
                 }
             }
 
-			if(this.mobileMultiSelect && this.$isMobile()) {
+            if (this.mobileMultiSelect && this.$isMobile()) {
-				if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
+                if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-					this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
+                    this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
-				}else {
+                } else {
                     this.$store.commit('GET_FILEINFO_DETAIL', this.data)
                 }
             }
@@ -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,19 +505,21 @@ export default {
 
         &.no-clicked {
             background: white !important;
+
             .item-name {
                 .name {
-                            color: $text !important ;
+                    color: $text !important;
                 }
             }
         }
 
-		&:hover ,
+        &:hover,
         &.is-clicked {
             border-radius: 8px;
-			background: $light_background  ;
+            background: $light_background;
+
             .item-name .name {
-				color: $theme ;
+                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,13 +562,15 @@ export default {
         .file-item {
             &.no-clicked {
                 background: $dark_mode_background !important;
+
                 .file-icon {
 
                     path {
                         fill: $dark_mode_foreground !important;
-                            stroke: #2F3C54 ;
+                        stroke: #2F3C54;
                     }
                 }
+
                 .item-name {
 
                     .name {
@@ -555,17 +578,18 @@ export default {
                     }
                 }
             }
+
             &:hover,
             &.is-clicked {
-					background: $dark_mode_foreground ;
+                background: $dark_mode_foreground;
 
                 .item-name .name {
-						color: $theme ;
+                    color: $theme;
                 }
 
                 .file-icon {
                     path {
-							fill: $dark_mode_background ;
+                        fill: $dark_mode_background;
                     }
                 }
             }

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,24 +1,28 @@
 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 = []
 
 		// get unique_ids of selected files
 		getters.fileInfoDetail.forEach(file => files.push(file.unique_id))
 
 		// 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'
 
+		commit('ZIPPING_FILE_STATUS', true)
+
 		axios.post(route, {
 			files: files
 		})
@@ -28,8 +32,11 @@ const actions = {
 			.catch(() => {
 				Vue.prototype.$isSomethingWrong()
 			})
+			.finally(() => {
+				commit('ZIPPING_FILE_STATUS', false)
+			})
 	},
-    moveItem: ({commit, getters, dispatch}, {to_item ,noSelectedItem}) => {
+	moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {
 
 		let itemsToMove = []
 		let items = [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
 		}))
 
@@ -49,7 +56,7 @@ const actions = {
 			commit('CLEAR_FILEINFO_DETAIL')
 
 		// Get route
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
 			? '/api/move/public/' + router.currentRoute.params.token
 			: '/api/move'
 
@@ -66,16 +73,16 @@ const actions = {
 
 					if (item.type === 'folder')
 						dispatch('getAppData')
-                    if ( getters.currentFolder.location === 'public')
+					if (getters.currentFolder.location === 'public')
 						dispatch('getFolderTree')
 				})
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-    createFolder: ({commit, getters, dispatch}, folderName) => {
+	createFolder: ({ commit, getters, dispatch }, folderName) => {
 
 		// Get route
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
 			? '/api/create-folder/public/' + router.currentRoute.params.token
 			: '/api/create-folder'
 
@@ -89,22 +96,22 @@ const actions = {
 
 				events.$emit('scrollTop')
 
-                if ( getters.currentFolder.location !== 'public' )
+				if (getters.currentFolder.location !== 'public')
 					dispatch('getAppData')
-                if ( getters.currentFolder.location === 'public')
+				if (getters.currentFolder.location === 'public')
 					dispatch('getFolderTree')
 
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-    renameItem: ({commit, getters, dispatch}, data) => {
+	renameItem: ({ commit, getters, dispatch }, data) => {
 
 		// Updated name in favourites panel
 		if (getters.permission === 'master' && data.type === 'folder')
 			commit('UPDATE_NAME_IN_FAVOURITES', data)
 
 		// Get route
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
 			? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
 			: '/api/rename-item/' + data.unique_id
 
@@ -124,17 +131,17 @@ const actions = {
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-    uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
+	uploadFiles: ({ commit, getters }, { form, fileSize, totalUploadedSize }) => {
 		return new Promise((resolve, reject) => {
 
 			// Get route
-            let route = getters.sharedDetail && ! getters.sharedDetail.protected
+			let route = getters.sharedDetail && !getters.sharedDetail.protected
 				? '/api/upload/public/' + router.currentRoute.params.token
 				: '/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)
@@ -211,7 +218,7 @@ const actions = {
 			})
 		})
 	},
-    restoreItem: ({commit, getters}, item) => {
+	restoreItem: ({ commit, getters }, item) => {
 
 		let restoreToHome = false
 
@@ -233,20 +240,20 @@ const actions = {
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-    deleteItem: ({commit, getters, dispatch}, noSelectedItem) => {
+	deleteItem: ({ commit, getters, dispatch }, noSelectedItem) => {
 
 		let itemsToDelete = []
 		let items = [noSelectedItem]
 
 		// If coming no selected item dont get items to move from fileInfoDetail
-        if(!noSelectedItem) 
+		if (!noSelectedItem)
 			items = getters.fileInfoDetail
 
 		items.forEach(data => {
 			itemsToDelete.push({
 				'force_delete': data.deleted_at ? true : false,
 				'type': data.type,
-                "unique_id": data.unique_id
+				'unique_id': data.unique_id
 			})
 
 			// Remove file
@@ -271,12 +278,12 @@ const actions = {
 		})
 
 		// Remove file preview
-        if(!noSelectedItem){
+		if (!noSelectedItem) {
 			commit('CLEAR_FILEINFO_DETAIL')
 		}
 
 		// Get route
-        let route = getters.sharedDetail && ! getters.sharedDetail.protected
+		let route = getters.sharedDetail && !getters.sharedDetail.protected
 			? '/api/remove-item/public/' + router.currentRoute.params.token
 			: '/api/remove-item'
 
@@ -294,44 +301,57 @@ const actions = {
 
 						if (data.unique_id === getters.currentFolder.unique_id) {
 
-                            if ( getters.currentFolder.location === 'public' ) {
+							if (getters.currentFolder.location === 'public') {
-                                dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
+								dispatch('browseShared', [{ folder: last(getters.browseHistory), back: true, init: false }])
 							} else {
-                                dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
+								dispatch('getFolder', [{ folder: last(getters.browseHistory), back: true, init: false }])
 							}
 						}
 					}
 				})
 
-                if ( getters.currentFolder.location !== 'public' )
+				if (getters.currentFolder.location !== 'public')
 					dispatch('getAppData')
 
-                if ( getters.currentFolder.location === 'public')
+				if (getters.currentFolder.location === 'public')
 					dispatch('getFolderTree')
 
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-    emptyTrash: ({commit, getters}) => {
+	emptyTrash: ({ commit, getters }) => {
 
 		// Clear file browser
-        commit('LOADING_STATE', {loading: true, data: []})
+		commit('LOADING_STATE', { loading: true, data: [] })
 
 		axios
 			.post(getters.api + '/empty-trash', {
 				_method: 'delete'
 			})
 			.then(() => {
-                commit('LOADING_STATE', {loading: false, data: []})
+				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 {
+	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