- MobileAction buttons animation

- build

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 {
@@ -240,7 +240,7 @@ export default {
 
                 //Clear selected data after open another folder
                 this.$store.commit('CLEAR_FILEINFO_DETAIL')
-                
+
                 if (this.$isThisLocation('public')) {
                     this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
                 } 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

resources/js/components/FilesView/FileItemList.vue

@@ -16,32 +16,33 @@
 			:class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }"
 		>
 			<!-- MultiSelecting for the mobile version -->
-			<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 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">
-				<!--If is file or image, then link item-->
-				<span v-if="isFile" class="file-icon-text">
-					{{ data.mimetype | limitCharacters }}
-				</span>
+            <div class="icon-item">
+                <!--If is file or image, then link item-->
+                <span v-if="isFile" class="file-icon-text">
+                    {{ data.mimetype | limitCharacters }}
+                </span>
 
-				<!--Folder thumbnail-->
-				<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
+                <!--Folder thumbnail-->
+                <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" />
+                <!--Image thumbnail-->
+                <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" />
-			</div>
+                <!--Else show only folder icon-->
+                <FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
+            </div>
 
-			<!--Name-->
+            <!--Name-->
 			<div class="item-name">
-				<!--Name-->
 				<b ref="name" @input="renameItem" @keydown.delete.stop :contenteditable="canEditName" class="name">
 					{{ itemName }}
 				</b>
@@ -65,12 +66,14 @@
 				</div>
 			</div>
 
-			<!--Go Next icon-->
-			<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>
+			<!--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>
@@ -293,6 +296,31 @@ 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,7 +328,7 @@ 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;

resources/js/components/FilesView/MobileActions.vue

@@ -16,31 +16,35 @@
 
         <!--ContextMenu for Base location with MASTER permission-->
         <div v-if="baseLocationMasterMenu" class="mobile-actions">
-            <div v-if="! multiSelectMode">
-                <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
-                    {{ $t('context_menu.add_folder') }}
-                </MobileActionButton>
-                <MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
-                    {{ $t('context_menu.upload') }}
-                </MobileActionButtonUpload>
-                <MobileMultiSelectButton @click.native="enableMultiSelectMode">
-                   {{ $t('context_menu.select') }}
-                </MobileMultiSelectButton>
-                <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
-                    {{$t('preview_sorting.preview_sorting_button')}}
-                </MobileActionButton>
-            </div>
-            <div v-if="multiSelectMode">
-                <MobileActionButton @click.native="selectAll" icon="check-square">
-                    Select All
-                </MobileActionButton>
-                <MobileActionButton @click.native="deselectAll" icon="x-square">
-                    Deselect All
-                </MobileActionButton>
-                <MobileActionButton @click.native="disableMultiSelectMode" icon="check">
-                    Done
-                </MobileActionButton>
-            </div>
+            <transition name="button">
+                <div v-if="! multiSelectMode">
+                    <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
+                        {{ $t('context_menu.add_folder') }}
+                    </MobileActionButton>
+                    <MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
+                        {{ $t('context_menu.upload') }}
+                    </MobileActionButtonUpload>
+                    <MobileMultiSelectButton @click.native="enableMultiSelectMode">
+                       {{ $t('context_menu.select') }}
+                    </MobileMultiSelectButton>
+                    <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
+                        {{$t('preview_sorting.preview_sorting_button')}}
+                    </MobileActionButton>
+                </div>
+            </transition>
+            <transition name="button">
+                <div v-if="multiSelectMode">
+                    <MobileActionButton @click.native="selectAll" icon="check-square">
+                        Select All
+                    </MobileActionButton>
+                    <MobileActionButton @click.native="deselectAll" icon="x-square">
+                        Deselect All
+                    </MobileActionButton>
+                    <MobileActionButton @click.native="disableMultiSelectMode" icon="check">
+                        Done
+                    </MobileActionButton>
+                </div>
+            </transition>
         </div>
 
         <!--ContextMenu for Base location with VISITOR permission-->
@@ -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(-100%);
+    }
+
+    .button-leave-to {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    .button-leave-active, {
+        position: absolute;
+    }
+
     .preview-sorting { 
         background: $light_background !important;
         /deep/ .label {

resources/js/components/FilesView/ProcessingPopup.vue

@@ -88,6 +88,17 @@ export default {
         left: 15px;
         right: 15px;
     }
+
+    .popup-content {
+
+        .title {
+            @include font-size(19);
+        }
+
+        .message {
+            @include font-size(15);
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {