From 9d9e07d0fa930e60b988997661b121eeead74d25 Mon Sep 17 00:00:00 2001
From: Milos Holba <milosholba78@gmail.com>
Date: Mon, 16 Nov 2020 17:57:43 +0100
Subject: [PATCH] bulk-operations v0.1 mobileSeleting finished, change
 FileFullPreview code

---
 public/mix-manifest.json                      |  79 +++++-
 .../components/FilesView/DesktopToolbar.vue   |  11 +-
 .../js/components/FilesView/FileBrowser.vue   |  15 +-
 .../js/components/FilesView/FileItemGrid.vue  | 224 +++++++++++++-----
 .../js/components/FilesView/FileItemList.vue  |  29 ++-
 .../FilesView/FilePreviewActions.vue          |   2 +-
 .../FilesView/FilePreviewNavigationPanel.vue  |  22 +-
 .../components/FilesView/MediaFullPreview.vue |  23 +-
 .../js/components/FilesView/MobileActions.vue |  45 +++-
 .../js/components/FilesView/MobileMenu.vue    |  84 +++++--
 .../FilesView/MobileMultiSelectButton.vue     |   8 +-
 .../js/components/FilesView/MobileToolbar.vue |   1 +
 .../js/components/FilesView/ToolbarButton.vue |   3 +
 resources/js/components/Others/MoveItem.vue   |   6 +-
 resources/js/components/Others/TreeMenu.vue   |  18 +-
 resources/js/i18n/lang/cn.json                |   3 +-
 resources/js/i18n/lang/en.json                |   3 +-
 resources/js/i18n/lang/sk.json                |   3 +-
 resources/js/store/modules/fileFunctions.js   |   2 -
 19 files changed, 438 insertions(+), 143 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 3631d93f..1fcd0323 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -29,7 +29,7 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=405847df44edd86e301a",
     "/chunks/files.js": "/chunks/files.js?id=e0e01c40a7c37f170270",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js?id=6cafd70cb9e5ae25f02a",
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=195540d080e3889ca57f",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=3703e138e9d316a9d850",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=aba8c662fbc234892216",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=ecceaa6cdf5768826b36",
     "/chunks/invoices.js": "/chunks/invoices.js?id=248503ac5967fe8370f9",
@@ -74,5 +74,80 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=b036eeaa5ef8e798f6dd",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=a99910f95c3e39caa78b",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e8ea1e67f9ac0a835ed0",
-    "/chunks/users.js": "/chunks/users.js?id=cdba7af8fb0cd8e64c40"
+    "/chunks/users.js": "/chunks/users.js?id=cdba7af8fb0cd8e64c40",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c6be29fc8fb5f6066889.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c6be29fc8fb5f6066889.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ddb66a6efe5bcb01ed50.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ddb66a6efe5bcb01ed50.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.7aeb3b63de0a18f158dd.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.7aeb3b63de0a18f158dd.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.80b31c9384d68ca81426.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.80b31c9384d68ca81426.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6bdf4bd28e383386a08f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6bdf4bd28e383386a08f.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c687d4d9a48b5bf55b6d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c687d4d9a48b5bf55b6d.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d658f6bebc345fd0748b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d658f6bebc345fd0748b.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.62332b6c26a3a17243c9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.62332b6c26a3a17243c9.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.32224af37576509ffc32.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.32224af37576509ffc32.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3f516bc5454ea15bb769.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3f516bc5454ea15bb769.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c37d7459aa7f09878c0a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c37d7459aa7f09878c0a.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8c4daf554552aa20f374.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8c4daf554552aa20f374.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a8773e02004276bf57de.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a8773e02004276bf57de.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3dd73d1160e4595d5106.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3dd73d1160e4595d5106.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.68dcd7b1fc9b05db68f6.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.68dcd7b1fc9b05db68f6.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.f19c3e219f01eccd8fb3.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.f19c3e219f01eccd8fb3.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.2eccbc694b11b2efbc63.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.2eccbc694b11b2efbc63.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.38f836026c4fc800e3c4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.38f836026c4fc800e3c4.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9dfaf9f542df321ba991.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9dfaf9f542df321ba991.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.73b7b39eefa288138dfc.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.73b7b39eefa288138dfc.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.5751401aba1adb64a925.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.5751401aba1adb64a925.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.06c57069549acfea652d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.06c57069549acfea652d.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.52deb1b66739be132d70.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.52deb1b66739be132d70.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.985a286b1418248fc878.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.985a286b1418248fc878.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.cc7a2c5d70236867a163.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.cc7a2c5d70236867a163.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.0cb903ff08c25eb5d015.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.0cb903ff08c25eb5d015.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.90fb6e64be7464215f6f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.90fb6e64be7464215f6f.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6378f26bda11216c9d7a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6378f26bda11216c9d7a.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fc9d458b9024171d896f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fc9d458b9024171d896f.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ebafe3c3d8c3ca24226f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ebafe3c3d8c3ca24226f.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.204578bdb6eba7d9459d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.204578bdb6eba7d9459d.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.b374bcefda7eea419a77.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.b374bcefda7eea419a77.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1297c60f82fcee404a0b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1297c60f82fcee404a0b.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8bb631240ea107faeee1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8bb631240ea107faeee1.hot-update.js",
+    "/js/main.aa14968f01b581f22523.hot-update.js": "/js/main.aa14968f01b581f22523.hot-update.js",
+    "/chunks/dashboard.aa14968f01b581f22523.hot-update.js": "/chunks/dashboard.aa14968f01b581f22523.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-methods~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-methods~chunks/users.js?id=2bb9ebac09457d3b898e",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.aa14968f01b581f22523.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.aa14968f01b581f22523.hot-update.js",
+    "/chunks/invoices.aa14968f01b581f22523.hot-update.js": "/chunks/invoices.aa14968f01b581f22523.hot-update.js",
+    "/chunks/pages.aa14968f01b581f22523.hot-update.js": "/chunks/pages.aa14968f01b581f22523.hot-update.js",
+    "/chunks/plans.aa14968f01b581f22523.hot-update.js": "/chunks/plans.aa14968f01b581f22523.hot-update.js",
+    "/chunks/settings-payment-methods.aa14968f01b581f22523.hot-update.js": "/chunks/settings-payment-methods.aa14968f01b581f22523.hot-update.js",
+    "/chunks/users.aa14968f01b581f22523.hot-update.js": "/chunks/users.aa14968f01b581f22523.hot-update.js",
+    "/js/main.957105d51b4b371c02f7.hot-update.js": "/js/main.957105d51b4b371c02f7.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.957105d51b4b371c02f7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.957105d51b4b371c02f7.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.29c8874dfb2c94995650.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.29c8874dfb2c94995650.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fe60ff9d657992a1b3fc.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fe60ff9d657992a1b3fc.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.39547a50bad3eaef19d5.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.39547a50bad3eaef19d5.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.49f90f3476114215e153.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.49f90f3476114215e153.hot-update.js",
+    "/js/main.b1e1c83f945ac034e4b6.hot-update.js": "/js/main.b1e1c83f945ac034e4b6.hot-update.js",
+    "/js/main.09d58bdcd52e76eea49a.hot-update.js": "/js/main.09d58bdcd52e76eea49a.hot-update.js",
+    "/js/main.0f77ad05525e6d1f485b.hot-update.js": "/js/main.0f77ad05525e6d1f485b.hot-update.js",
+    "/js/main.c7508405578e74d6d5d0.hot-update.js": "/js/main.c7508405578e74d6d5d0.hot-update.js",
+    "/js/main.03f879f9830de6d3b02d.hot-update.js": "/js/main.03f879f9830de6d3b02d.hot-update.js",
+    "/js/main.13df6330a44eda756456.hot-update.js": "/js/main.13df6330a44eda756456.hot-update.js",
+    "/js/main.a74beb7aef66d2190d52.hot-update.js": "/js/main.a74beb7aef66d2190d52.hot-update.js",
+    "/js/main.5cd5987df958d7bb7eec.hot-update.js": "/js/main.5cd5987df958d7bb7eec.hot-update.js",
+    "/js/main.3e7f55b2c44e25eb1164.hot-update.js": "/js/main.3e7f55b2c44e25eb1164.hot-update.js",
+    "/js/main.457b5d135de215ee357d.hot-update.js": "/js/main.457b5d135de215ee357d.hot-update.js",
+    "/js/main.9cbc62e607b82155c099.hot-update.js": "/js/main.9cbc62e607b82155c099.hot-update.js",
+    "/js/main.7a48fee0a61738f74542.hot-update.js": "/js/main.7a48fee0a61738f74542.hot-update.js",
+    "/js/main.c6167479106cf4d6528d.hot-update.js": "/js/main.c6167479106cf4d6528d.hot-update.js",
+    "/js/main.78b0f051b1396111d2f1.hot-update.js": "/js/main.78b0f051b1396111d2f1.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9a0fe6f8a67a58879bca.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9a0fe6f8a67a58879bca.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9b35209ca84faca947c0.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9b35209ca84faca947c0.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a674fdf77aea80c0529b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a674fdf77aea80c0529b.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.97d913769431b05cc7c2.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.97d913769431b05cc7c2.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8cf94a788280336dda73.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8cf94a788280336dda73.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3af71b38ca39f36d99e4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3af71b38ca39f36d99e4.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.401b03e61a5ab310bb94.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.401b03e61a5ab310bb94.hot-update.js",
+    "/js/main.6f45362ec6c423157bfe.hot-update.js": "/js/main.6f45362ec6c423157bfe.hot-update.js",
+    "/js/main.3644cc8d59343b060b54.hot-update.js": "/js/main.3644cc8d59343b060b54.hot-update.js",
+    "/js/main.946a09d801c105987d08.hot-update.js": "/js/main.946a09d801c105987d08.hot-update.js",
+    "/js/main.2558534849562d05fae1.hot-update.js": "/js/main.2558534849562d05fae1.hot-update.js",
+    "/js/main.9d6ddebbc75464578783.hot-update.js": "/js/main.9d6ddebbc75464578783.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index de98e723..cf1773e8 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -149,7 +149,11 @@ export default {
       return this.FilePreviewType === "list" ? "th" : "th-list";
     },
     canCreateFolderInView() {
-      return !this.$isThisLocation(["base", "public"]);
+      let location = !this.$isThisLocation(["base", "public"]);
+
+      if(location || this.fileInfoDetail.length >1) {
+        return true
+      }
     },
     canDeleteInView() {
       return !this.$isThisLocation([
@@ -163,7 +167,10 @@ export default {
       ]);
     },
     canUploadInView() {
-      return !this.$isThisLocation(["base", "public"]);
+     let location = !this.$isThisLocation(["base", "public"]);
+       if(location || this.fileInfoDetail.length >1) {
+        return true
+      }
     },
     canMoveInView() {
       return !this.$isThisLocation([
diff --git a/resources/js/components/FilesView/FileBrowser.vue b/resources/js/components/FilesView/FileBrowser.vue
index d8813d20..6350bdc4 100644
--- a/resources/js/components/FilesView/FileBrowser.vue
+++ b/resources/js/components/FilesView/FileBrowser.vue
@@ -8,7 +8,7 @@
         <div
                 class="files-container"
                 ref="fileContainer"
-                :class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() }"
+                :class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() , 'mobile-multi-select' : mobileMultiSelect}"
                 @click.self="filesContainerClick"
         >
             <!--MobileToolbar-->
@@ -135,6 +135,7 @@
             return {
                 draggingId: undefined,
                 isDragging: false,
+                mobileMultiSelect: false
             }
         },
         methods: {
@@ -191,6 +192,14 @@
             }
         },
         created() {
+            events.$on('mobileSelecting-start' , () => {
+            this.mobileMultiSelect =true
+            })
+
+            events.$on('mobileSelecting-stop' , () => {
+            this.mobileMultiSelect = false
+            })
+
             events.$on('fileItem:deselect', () =>
                 this.$store.commit('CLEAR_FILEINFO_DETAIL')
             )
@@ -216,6 +225,10 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    .mobile-multi-select {
+        bottom: 50px !important;
+    }
+
     .button-upload {
         display: block;
         text-align: center;
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index ded94f16..d08367e1 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -16,11 +16,18 @@
                 @dragleave="dragLeave"
                 @dragover.prevent="dragEnter"
                 class="file-item"
-                :class="{ 'is-clicked': this.isClicked, 'is-dragenter': area }"
-        >
+                :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked, 'is-dragenter': area }"
+        >       
             <!--Thumbnail for item-->
             <div class="icon-item">
 
+            <div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="mobileMultiSelect">			
+				<div class="select-box" :class="{'select-box-active' : isClicked } ">
+                    <!-- <p>|</p> -->
+					<CheckIcon v-if="isClicked" class="icon" size="17"/>		
+				</div>
+			</div>
+
                 <!--If is file or image, then link item-->
                 <span v-if="isFile" class="file-icon-text">
                     {{ data.mimetype }}
@@ -71,7 +78,7 @@
             </div>
 
             <span @click.stop="showItemActions" class="show-actions"
-                  v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder ) && canShowMobileOptions">
+                  v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || mobileMultiSelect ) && canShowMobileOptions">
                 <FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
             </span>
         </div>
@@ -79,7 +86,7 @@
 </template>
 
 <script>
-    import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
+    import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
     import {debounce} from 'lodash'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
@@ -89,6 +96,7 @@
         props: ['data'],
         components: {
             UserPlusIcon,
+            CheckIcon,
             LinkIcon,
         },
         computed: {
@@ -97,12 +105,12 @@
             ]),
             ...mapGetters({allData: 'data'}),
             isClicked() {
-			if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
-				return true
-			}else {
-				return false
-			}	
-		    },
+                if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){	
+                    return true
+                }else {
+                    return false
+                }	
+            },
             isFolder() {
                 return this.data.type === 'folder'
             },
@@ -147,12 +155,14 @@
         data() {
             return {
                 area: false,
-                itemName: undefined
+                itemName: undefined,
+                mobileMultiSelect:false
             }
         },
         methods: {
             showItemActions() {
                 // Load file info detail
+                this.$store.commit('CLEAR_FILEINFO_DETAIL')
                 this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
                 events.$emit('mobileMenu:show')
@@ -168,61 +178,68 @@
             clickedItem(e) {
                 events.$emit('contextMenu:hide')
 
-            if(e.ctrlKey && !e.shiftKey) {
-                // Click + Ctrl
-				if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
-					this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
-				}else {
-					console.log(this.data.name)
-					this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-				}
-			}else if (e.shiftKey){
-                // Click + Shift
-				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) {
-					this.$store.commit('CLEAR_FILEINFO_DETAIL')
-				}
-				
-				if(lastItem < clickedItem) {
-					for(let i=lastItem ; i<=clickedItem; i++ ) {
-						this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
-						console.log(this.allData[i].name)
-					}
-				}else {
-					for(let i=clickedItem ; i<=lastItem; i++ ) {
-						this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
-						console.log(this.allData[i].name)
-					}
-				}
-				this.fileInfoDetail.forEach(element => console.log(element.id ,element.name))
-			}else {
-                // Click
-                
-				events.$emit('fileItem:deselect')
-				this.$store.commit('CLEAR_FILEINFO_DETAIL')
-                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-			}
-
-                // Open in mobile version on first click
-                if (this.$isMobile() && this.isFolder) {
-
-                    // Go to folder
-                    if (this.$isThisLocation('public')) {
-                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
-                    } else {
-                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
+                if(!this.$isMobile()) {
+                    if(e.ctrlKey && !e.shiftKey) {
+                        // Click + Ctrl
+                        if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
+                            this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
+                        }else {
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                        }
+                    }else if (e.shiftKey){
+                        // Click + Shift
+                        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) {
+                            this.$store.commit('CLEAR_FILEINFO_DETAIL')
+                        }
+                        
+                        if(lastItem < clickedItem) {
+                            for(let i=lastItem ; i<=clickedItem; i++ ) {
+                                this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                            }
+                        }else {
+                            for(let i=clickedItem ; i<=lastItem; i++ ) {
+                                this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                            }
+                        }
+                    }else {
+                        // Click
+                        
+                        events.$emit('fileItem:deselect')
+                        this.$store.commit('CLEAR_FILEINFO_DETAIL')
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
                     }
                 }
 
-                if (this.$isMobile()) {
-                    if (this.isImage || this.isVideo || this.isAudio) {
-                        events.$emit('fileFullPreview:show')
+                if(!this.mobileMultiSelect && this.$isMobile()){
+                    // Open in mobile version on first click
+                    if (this.$isMobile() && this.isFolder) {
+                        // Go to folder
+                        if (this.$isThisLocation('public')) {
+                            this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+                        } else {
+                            this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+                        }
+                    }
+
+                    if (this.$isMobile()) {
+                        if (this.isImage || this.isVideo || this.isAudio) {
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                            events.$emit('fileFullPreview:show')
+                        }
+                    }
+                }  
+
+                if(this.mobileMultiSelect && this.$isMobile()) {
+                    if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
+                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
+                    }else {
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
                     }
                 }
-
                 // Get target classname
                 let itemClass = e.target.className
 
@@ -263,6 +280,16 @@
         created() {
             this.itemName = this.data.name
 
+        events.$on('mobileSelecting-start', () => {
+			this.mobileMultiSelect = true
+			this.$store.commit('CLEAR_FILEINFO_DETAIL')
+		})
+
+		events.$on('mobileSelecting-stop', () => {
+			this.mobileMultiSelect = false
+			this.$store.commit('CLEAR_FILEINFO_DETAIL')
+		})
+
             events.$on('fileItem:deselect', () => {
                 // Deselect file
                 this.$store.commit('CLEAR_FILEINFO_DETAIL')
@@ -280,6 +307,40 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    .check-select { 
+	margin-right: 10px;
+    margin-left: 3px;
+    position: absolute;
+    top: -10px;
+    z-index: 5;
+    left: 0px;
+    }
+    .check-select-folder { 
+	margin-right: 10px;
+    margin-left: 3px;
+    position: absolute;
+    top: 8px;
+    z-index: 5;
+    left: 10px;
+    }
+	.select-box {
+		width: 20px;
+		height: 20px;
+		background-color:$light_background;
+		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 !important;
+		.icon {
+			stroke: white;
+		}
+	}
+    
+
     .show-actions {
         cursor: pointer;
         padding: 4px 26px;
@@ -381,14 +442,22 @@
                 border-radius: 8px;
             }
 
+            &.no-clicked {
+            background: white !important;
+                    .item-name {
+                        .name {
+                            color: $text !important;
+                        }
+                    }
+		}
+
             &:hover,
             &.is-clicked {
                 border-radius: 8px;
                 background: $light_background;
-
                 .item-name .name {
-                    color: $theme;
-                }
+				    color: $theme;
+			    }
             }
         }
 
@@ -510,6 +579,17 @@
     }
 
     @media (prefers-color-scheme: dark) {
+
+		.select-box {
+			background-color: $dark_mode_foreground;
+		}
+		.select-box-active {
+			background-color: $dark_mode_text_primary !important;
+			.icon {
+				stroke: $text;
+			}
+		}
+    
         .file-wrapper {
 
             .icon-item {
@@ -533,6 +613,22 @@
             }
 
             .file-item {
+                &.no-clicked {
+                    background: $dark_mode_background !important;
+                    .file-icon {
+
+                        path {
+                            fill: $dark_mode_foreground !important;
+                            stroke: #2F3C54 !important;
+                        }
+                    }
+                    .item-name {
+
+                        .name {
+                            color: $dark_mode_text_primary !important;
+                        }
+                    }
+                }
 
                 &:hover,
                 &.is-clicked {
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index 00e224b7..412ea1fe 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -95,7 +95,6 @@ export default {
 		...mapGetters({allData: 'data'}),
 		isClicked() {	
 			if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
-				console.log('som tu')
 				return true
 			}else {
 				return false
@@ -221,6 +220,7 @@ export default {
 
 				if (this.$isMobile()) {
 					if (this.isImage || this.isVideo || this.isAudio) {
+						this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 						events.$emit('fileFullPreview:show')
 					}
 				}
@@ -229,7 +229,6 @@ export default {
 			if(this.mobileMultiSelect && this.$isMobile()) {
 				if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
 					this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
-					console.log(this.data)
 				}else {
 					this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 				}
@@ -270,7 +269,12 @@ export default {
 		this.itemName = this.data.name
 
 		events.$on('mobileSelecting-start', () => {
-			this.mobileMultiSelect = !this.mobileMultiSelect
+			this.mobileMultiSelect = true
+			this.$store.commit('CLEAR_FILEINFO_DETAIL')
+		})
+
+		events.$on('mobileSelecting-stop', () => {
+			this.mobileMultiSelect = false
 			this.$store.commit('CLEAR_FILEINFO_DETAIL')
 		})
 
@@ -486,13 +490,17 @@ export default {
 
 		&.no-clicked {
 			background: white !important;
+                    .item-name {
+                        .name {
+                            color: $text !important;
+                        }
+                    }
 		}
 
 		&:hover,
 		&.is-clicked {
 			border-radius: 8px;
 			background: $light_background  ;
-
 			.item-name .name {
 				color: $theme;
 			}
@@ -534,6 +542,19 @@ export default {
 		.file-item {
 			&.no-clicked {
 				background: $dark_mode_background !important;
+				.file-icon {
+
+                        path {
+                            fill: $dark_mode_foreground !important;
+                            stroke: #2F3C54 !important;
+                        }
+                    }
+                    .item-name {
+
+                        .name {
+                            color: $dark_mode_text_primary !important;
+                        }
+                    }
 			}
 			&:hover,
 			&.is-clicked {
diff --git a/resources/js/components/FilesView/FilePreviewActions.vue b/resources/js/components/FilesView/FilePreviewActions.vue
index b0a60b4b..da637315 100644
--- a/resources/js/components/FilesView/FilePreviewActions.vue
+++ b/resources/js/components/FilesView/FilePreviewActions.vue
@@ -26,7 +26,7 @@ export default {
 		filteredFiles() {
 			let filteredData = []
 			this.data.filter((element) => {
-				if (element.type == this.fileInfoDetail.type) {
+				if (element.type == this.fileInfoDetail[0].type) {
 					filteredData.push(element)
 				}
 			})
diff --git a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
index 96d9835f..7c2c5103 100644
--- a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="navigation-panel" v-if="fileInfoDetail">
+	<div class="navigation-panel" v-if="fileInfoDetail[0]">
 		<div class="name-wrapper">
 			<x-icon @click="closeFullPreview" size="22" class="icon-close"></x-icon>
 			<div class="name-count-wrapper">
@@ -12,13 +12,13 @@
 		</div>
 
 		<div class="created-at-wrapper">
-			<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
+			<p>{{ fileInfoDetail[0].filesize }}, {{ fileInfoDetail[0].created_at }}</p>
 		</div>
 		<div class="navigation-icons">
 			<div class="navigation-tool-wrapper">
 				<ToolbarButton source="download" class="mobile-hide" @click.native="downloadItem" :action="$t('actions.download')" />
 				<ToolbarButton source="share" class="mobile-hide" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem" />
-				<ToolbarButton v-if="this.fileInfoDetail.type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
+				<ToolbarButton v-if="this.fileInfoDetail[0].type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
 			</div>
 		</div>
 	</div>
@@ -39,7 +39,7 @@ export default {
 		filteredFiles() {
 			let files = []
 			this.data.filter((element) => {
-				if (element.type == this.fileInfoDetail.type) {
+				if (element.type == this.fileInfoDetail[0].type) {
 					files.push(element)
 				}
 			})
@@ -48,7 +48,7 @@ export default {
 		showingImageIndex() {
 			let activeIndex = ''
 			this.filteredFiles.filter((element, index) => {
-				if (element.unique_id == this.fileInfoDetail.unique_id) {
+				if (element.unique_id == this.fileInfoDetail[0].unique_id) {
 					activeIndex = index + 1
 				}
 			})
@@ -57,7 +57,7 @@ export default {
 
 		formatedName() {
 			//Name length handling
-			let name = this.fileInfoDetail.name
+			let name = this.fileInfoDetail[0].name
 			let windowWidth = window.innerWidth
 			let nameLength
 			if (windowWidth < 410) {
@@ -94,18 +94,18 @@ export default {
 		},
 		downloadItem() {
 			// Download file
-			this.$downloadFile(this.fileInfoDetail.file_url, this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype)
+			this.$downloadFile(this.fileInfoDetail[0].file_url, this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype)
 		},
 		shareItem() {
-			if (this.fileInfoDetail.shared) {
+			if (this.fileInfoDetail[0].shared) {
 				events.$emit('popup:open', {
 					name: 'share-edit',
-					item: this.fileInfoDetail
+					item: this.fileInfoDetail[0]
 				})
 			} else {
 				events.$emit('popup:open', {
 					name: 'share-create',
-					item: this.fileInfoDetail
+					item: this.fileInfoDetail[0]
 				})
 			}
 		},
@@ -113,7 +113,7 @@ export default {
 			if (this.$isMobile()) {
 				events.$emit('mobileMenu:show', 'showFromMediaPreview')
 			} else {
-				events.$emit('showContextMenuPreview:show', this.fileInfoDetail)
+				events.$emit('showContextMenuPreview:show', this.fileInfoDetail[0])
 			}
 		},
 		closeFullPreview() {
diff --git a/resources/js/components/FilesView/MediaFullPreview.vue b/resources/js/components/FilesView/MediaFullPreview.vue
index cb958373..5ecebf4a 100644
--- a/resources/js/components/FilesView/MediaFullPreview.vue
+++ b/resources/js/components/FilesView/MediaFullPreview.vue
@@ -1,14 +1,13 @@
 <template>
-	<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail">
+	<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail[0]">
 		<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
 			<div class="file-wrapper">
-				<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail.type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
-				<img v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
-				<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
+				<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail[0].type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
+				<img v-if="fileInfoDetail[0].type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
+				<div class="video-wrapper" v-if="fileInfoDetail[0].type === 'video' && currentFile.file_url">
 					<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
 				</div>
 			</div>
-			<!-- <spinner class="loading-spinner" v-if="!loaded && fileInfoDetail.type === 'image'" /> -->
 		</div>
 	</div>
 </template>
@@ -33,7 +32,7 @@ export default {
 			return this.sliderFile[Math.abs(this.currentIndex) % this.sliderFile.length]
 		},
 		isMedia() {
-			return this.fileInfoDetail === 'image' || 'video' || 'audio'
+			return this.fileInfoDetail[0] === 'image' || 'video' || 'audio'
 		},
 
 		canShareInView() {
@@ -57,7 +56,8 @@ export default {
 		},
 		currentFile() {
 			//Handle actual view image in fileInfoDetail
-			if (this.fileInfoDetail) {
+			if (this.fileInfoDetail[0]) {
+				this.$store.commit('CLEAR_FILEINFO_DETAIL')
 				this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
 				events.$emit('actualShowingImage:ContextMenu', this.currentFile)
 				// this.loaded = false
@@ -65,7 +65,7 @@ export default {
 		},
 		fileInfoDetail() {
 			//File delete handling - show next image after delete one
-			if (!this.fileInfoDetail) {
+			if (!this.fileInfoDetail[0]) {
 				this.currentIndex = this.currentIndex - 1
 				this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
 				this.sliderFile = []
@@ -83,18 +83,15 @@ export default {
 	methods: {
 		filteredFiles() {
 			this.data.filter((element) => {
-				if (element.type == this.fileInfoDetail.type) {
+				if (element.type == this.fileInfoDetail[0].type) {
 					this.sliderFile.push(element)
 				}
 			})
 			this.choseActiveFile()
 		},
-		// onLoaded(event) {
-		// 	this.loaded = true
-		// },
 		choseActiveFile() {
 			this.sliderFile.forEach((element, index) => {
-				if (element.unique_id == this.fileInfoDetail.unique_id) {
+				if (element.unique_id == this.fileInfoDetail[0].unique_id) {
 					this.currentIndex = index
 				}
 			})
diff --git a/resources/js/components/FilesView/MobileActions.vue b/resources/js/components/FilesView/MobileActions.vue
index 3e57da45..a96f34c3 100644
--- a/resources/js/components/FilesView/MobileActions.vue
+++ b/resources/js/components/FilesView/MobileActions.vue
@@ -6,6 +6,9 @@
             <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
                 {{ previewText }}
             </MobileActionButton>
+            <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
+                Select
+            </MobileMultiSelectButton>
             <MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
                 {{ $t('context_menu.empty_trash') }}
             </MobileActionButton>
@@ -13,13 +16,13 @@
 
         <!--ContextMenu for Base location with MASTER permission-->
         <div v-if="$isThisLocation(['base', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
-            <MobileActionButton @click.native="createFolder" icon="folder-plus">
+            <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : mobileMultiSelect}">
                 {{ $t('context_menu.add_folder') }}
             </MobileActionButton>
-            <MobileActionButtonUpload>
+            <MobileActionButtonUpload :class="{'is-inactive' : mobileMultiSelect}">
                 {{ $t('context_menu.upload') }}
             </MobileActionButtonUpload>
-            <MobileMultiSelectButton @click.native="mobileSelecting">
+            <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
                 Select
             </MobileMultiSelectButton>
             <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
@@ -65,12 +68,29 @@
                 return this.FilePreviewType === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
             }
         },
+        data () {
+            return {
+                mobileMultiSelect: false,
+                turnOff:false
+            }
+        },
+        watch: {
+            mobileMultiSelect () {
+                
+                if(this.mobileMultiSelect ) {
+                    events.$emit('mobileSelecting-start')
+                    // this.mobileMultiSelect = true
+                }
+                if(!this.mobileMultiSelect) {
+                    events.$emit('mobileSelecting-stop')
+                    // this.mobileSelecting = false
+                }
+            }
+        },
         methods: {
-            mobileSelecting() {
-                events.$emit('mobileSelecting-start')
-            },
             switchPreview() {
                 this.$store.dispatch('changePreviewType')
+                events.$emit('mobileSelecting-stop')
             },
             createFolder() {
                 if (this.$isMobile()) {
@@ -84,6 +104,12 @@
                     this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
                 }
             },
+        },
+        mounted () {
+                events.$on('mobileSelecting-stop', () => {
+                    this.mobileMultiSelect = false
+                }) 
+
         }
     }
 </script>
@@ -100,6 +126,13 @@
         z-index: 3;
     }
 
+    .mobile-action-button {
+        &.is-inactive {
+            opacity: 0.25;
+            pointer-events: none;
+        }
+    }
+
     .mobile-actions {
         padding-top: 10px;
         padding-bottom: 10px;
diff --git a/resources/js/components/FilesView/MobileMenu.vue b/resources/js/components/FilesView/MobileMenu.vue
index cf7fe86d..bfae6c57 100644
--- a/resources/js/components/FilesView/MobileMenu.vue
+++ b/resources/js/components/FilesView/MobileMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="options-wrapper">
+  <div class="options-wrapper" :class="{'mobile-selected-menu-wrapper' : mobileMultiSelect}">
     <transition name="context-menu">
       <div
         v-if="isVisible"
@@ -11,19 +11,26 @@
         <div class="menu-wrapper">
 
           <div class="mobile-selected-menu" v-if="mobileMultiSelect">
-            <ToolbarButton
-            source="move"
-            
-            :action="$t('actions.move')"
-            @click.native="moveItem"
-          />
+              <ToolbarButton
+               v-if="
+              !$isThisLocation(['trash', 'trash-root']) &&
+              $checkPermission('master')
+            "
+              source="move"
+              :action="$t('actions.move')"
+              class="move-icon"
+              @click.native="moveItem"/>
 
-           <ToolbarButton
-            source="trash"
-            
-            :action="$t('actions.move')"
-            @click.native="moveItem"
-          />
+            <ToolbarButton
+              source="trash"
+              :action="$t('actions.delete')"
+              @click.native="deleteItem"/>
+              
+              <ToolbarButton
+              source="close"
+              :action="$t('actions.close')"
+              class="close-icon"
+              @click.native="closeSelecting"/>
           </div>
 
           <!--Item Thumbnail-->
@@ -374,13 +381,18 @@ export default {
     };
   },
   methods: {
+    closeSelecting() {
+      events.$emit('mobileSelecting-stop')
+    },
     moveItem() {
-      // Open move item popup
+      // Open move item popup 
       if(!this.mobileMultiSelect) {
-        events.$emit("popup:open", { name: "move", item: [this.fileInfoDetail[0]] });
+        let item = this.fileInfoDetail[0]
+        this.$store.commit('CLEAR_FILEINFO_DETAIL')
+        events.$emit('popup:open', { name: 'move', item: [item] })
       }
       if(this.mobileMultiSelect) {
-        events.$emit("popup:open", { name: "move", item: null });
+        events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
       }
     },
     shareItem() {
@@ -417,7 +429,14 @@ export default {
       );
     },
     deleteItem() {
-      this.$store.dispatch("deleteItem", this.fileInfoDetail[0]);
+      if(!this.mobileMultiSelect) {
+        let item = this.fileInfoDetail[0]
+        this.$store.commit('CLEAR_FILEINFO_DETAIL')
+        this.$store.dispatch("deleteItem", item);
+      }
+      if(this.mobileMultiSelect) {
+        this.$store.dispatch("deleteItem");
+      }
     },
     renameItem() {
       let itemName = prompt(
@@ -446,18 +465,22 @@ export default {
         this.isVisible = false;
         this.showFromMediaPreview = false;
       } else {
-        this.isVisible = false;
-        events.$emit("fileItem:deselect");
+        if(!this.mobileMultiSelect) {
+          this.isVisible = false;
+          events.$emit("fileItem:deselect");
+        }
       }
-
-      // Close context menu
-      //   this.isVisible = false;
     },
   },
   created() {
     events.$on('mobileSelecting-start' , () => {
-      this.mobileMultiSelect = !this.mobileMultiSelect
-      this.isVisible = !this.isVisible
+      this.mobileMultiSelect = true
+      this.isVisible = true
+    })
+
+    events.$on('mobileSelecting-stop' , () => {
+      this.mobileMultiSelect = false
+      this.isVisible = false
     })
     // Show context menu
     events.$on("mobileMenu:show", (showFromMedia) => {
@@ -482,6 +505,19 @@ export default {
 @import "@assets/vue-file-manager/_variables";
 @import "@assets/vue-file-manager/_mixins";
 
+.mobile-selected-menu-wrapper {
+  z-index: 1;
+}
+
+.mobile-selected-menu {
+  display: flex;
+  margin-left: 15px;
+  margin-right: 15px;
+  .close-icon {
+    margin-left: auto !important;
+  }
+}
+
 .menu-option {
   display: flex;
   align-items: center;
diff --git a/resources/js/components/FilesView/MobileMultiSelectButton.vue b/resources/js/components/FilesView/MobileMultiSelectButton.vue
index ac02908a..2049f2e8 100644
--- a/resources/js/components/FilesView/MobileMultiSelectButton.vue
+++ b/resources/js/components/FilesView/MobileMultiSelectButton.vue
@@ -28,7 +28,11 @@
         },
       mounted() {
           events.$on('mobileSelecting-start' , () => {
-              this.mobileSelectingActive = !this.mobileSelectingActive
+              this.mobileSelectingActive = true
+          })
+
+           events.$on('mobileSelecting-stop' , () => {
+              this.mobileSelectingActive = false
           })
       }
     }
@@ -70,7 +74,7 @@
 
         .active {
             // @include transform(scale(0.95));
-             background: rgba($theme, 0.1);
+            //  background: rgba($theme, 0.1);
 
             .icon {
                 path, line, polyline, rect, circle {
diff --git a/resources/js/components/FilesView/MobileToolbar.vue b/resources/js/components/FilesView/MobileToolbar.vue
index b542d158..be388109 100644
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -52,6 +52,7 @@
         methods: {
             showMobileNavigation() {
                 events.$emit('show:mobile-navigation')
+                events.$emit('mobileSelecting-stop')
             },
             goBack() {
 
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/FilesView/ToolbarButton.vue
index ec22fb35..83a66f99 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -19,6 +19,7 @@
     <info-icon v-if="source === 'info'" size="19"></info-icon>
     <grid-icon v-if="source === 'th'" size="19"></grid-icon>
     <link-icon v-if="source === 'share'" size="19"></link-icon>
+    <x-icon v-if="source === 'close'" size="19"></x-icon>
   </button>
 </template>
 
@@ -33,6 +34,7 @@ import {
   CornerDownRightIcon,
   LinkIcon,
   DownloadCloudIcon,
+  XIcon,
   PrinterIcon,
 } from "vue-feather-icons";
 
@@ -47,6 +49,7 @@ export default {
     Trash2Icon,
     Edit2Icon,
     ListIcon,
+    XIcon,
     GridIcon,
     InfoIcon,
     LinkIcon,
diff --git a/resources/js/components/Others/MoveItem.vue b/resources/js/components/Others/MoveItem.vue
index d6ba3ee4..6291108b 100644
--- a/resources/js/components/Others/MoveItem.vue
+++ b/resources/js/components/Others/MoveItem.vue
@@ -15,7 +15,7 @@
 
                 <MultiSelected class="multiple-selected" moveItem="true" v-if="fileInfoDetail.length > 1 && !noSelectedItem"/> 
                     
-                <TreeMenu :disabled-by-id="pickedItem.unique_id" :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
+                <TreeMenu  :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
             </div>
         </PopupContent>
 
@@ -108,7 +108,6 @@
             events.$on('popup:open', args => {
 
                 if (args.name !== 'move') return
-                // console.log(args.item[0])
                 // Show tree spinner
                 this.isLoadingTree = true
 
@@ -126,9 +125,6 @@
                     this.pickedItem = this.fileInfoDetail[0]
                     this.noSelectedItem = false
                 }
-
-                // this.pickedItem = args.item[0]
-                // this.totalItems = args.item
             })
 
             // Close popup
diff --git a/resources/js/components/Others/TreeMenu.vue b/resources/js/components/Others/TreeMenu.vue
index 7eb0649e..b3bb5652 100644
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/Others/TreeMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <!--Folder Icon-->
-    <div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById === nodes.unique_id}">
+    <div class="folder-item-wrapper" :class="{'is-inactive': !disableId} ">
 
         <div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
             <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
@@ -9,7 +9,7 @@
             <span class="label">{{ nodes.name }}</span>
         </div>
 
-        <TreeMenu :disabled-by-id="disabledById" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.unique_id" />
+        <TreeMenu  :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.unique_id" />
     </div>
 </template>
 
@@ -17,11 +17,12 @@
     import TreeMenu from '@/components/Others/TreeMenu'
     import {FolderIcon, ChevronRightIcon, HardDriveIcon} from 'vue-feather-icons'
     import {events} from "@/bus"
+    import {mapGetters} from 'vuex'
 
     export default {
         name: 'TreeMenu',
         props: [
-            'nodes', 'depth', 'disabledById'
+            'nodes', 'depth', 
         ],
         components: {
             ChevronRightIcon,
@@ -30,9 +31,20 @@
             TreeMenu,
         },
         computed: {
+            ...mapGetters(['fileInfoDetail']),
             indent() {
                 return { paddingLeft: this.depth * 20 + 'px' }
+                console.log(this.nodes )
             },
+            disableId() {
+                let canBeShow = true
+                this.fileInfoDetail.map(item => {
+                    if(item.unique_id === this.nodes.unique_id) {
+                        canBeShow = false
+                    }
+                })
+                return canBeShow
+            }
         },
         data() {
             return {
diff --git a/resources/js/i18n/lang/cn.json b/resources/js/i18n/lang/cn.json
index c854c2d5..04e4f66b 100644
--- a/resources/js/i18n/lang/cn.json
+++ b/resources/js/i18n/lang/cn.json
@@ -5,7 +5,8 @@
 		"move": "Move item",
 		"preview": "更改预览",
 		"share": "Share item",
-		"upload": "上传文件"
+		"upload": "上传文件",
+		"close": "Close"
 	},
 	"activation": {
 		"stripe": {
diff --git a/resources/js/i18n/lang/en.json b/resources/js/i18n/lang/en.json
index 77e1d92d..d33fa7bf 100644
--- a/resources/js/i18n/lang/en.json
+++ b/resources/js/i18n/lang/en.json
@@ -7,7 +7,8 @@
 		"share": "Share item",
 		"upload": "Upload file",
 		"download": "Download item",
-		"print": "Print item"
+		"print": "Print item",
+		"close": "Close"
 	},
 	"activation": {
 		"stripe": {
diff --git a/resources/js/i18n/lang/sk.json b/resources/js/i18n/lang/sk.json
index 80ebfac1..b8018f8f 100644
--- a/resources/js/i18n/lang/sk.json
+++ b/resources/js/i18n/lang/sk.json
@@ -7,7 +7,8 @@
 		"share": "Zdieľať položku",
 		"upload": "Nahrať súbory",
 		"download": "Stiahnuť položku",
-		"print": "Vytlačiť položku"
+		"print": "Vytlačiť položku",
+		"close": "Zatvoriť"
 	},
 	"activation": {
 		"stripe": {
diff --git a/resources/js/store/modules/fileFunctions.js b/resources/js/store/modules/fileFunctions.js
index 77ffa390..50f36f46 100644
--- a/resources/js/store/modules/fileFunctions.js
+++ b/resources/js/store/modules/fileFunctions.js
@@ -25,8 +25,6 @@ const actions = {
             })
         })
 
-        console.log(items)
-
         // Get route
         let route = getters.sharedDetail && ! getters.sharedDetail.protected
             ? '/api/move/public' + router.currentRoute.params.token