- App popup for creating folder in mobile version

- bug fixes

resources/js/components/FilesView/ContextMenu.vue

@@ -3,6 +3,14 @@
         <!-- ContextMenu for File Preview -->
         <div class="menu-options" id="menu-list" v-if="showFromPreview">
             <ul class="menu-option-group">
+                <li class="menu-option" @click="renameItem" v-if="multiSelectContextMenu">
+                    <div class="icon">
+                        <edit2-icon size="17"></edit2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.rename') }}
+                    </div>
+                </li>
                 <li class="menu-option" @click="moveItem">
                     <div class="icon">
                         <corner-down-right-icon size="17"></corner-down-right-icon>
@@ -475,8 +483,7 @@ export default {
             }
         },
         createFolder() {
-            // Create folder
-            this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
+            this.$store.dispatch('createFolder', this.$t('popup_create_folder.folder_default_name'))
         },
         closeAndResetContextMenu() {
             // Close context menu

resources/js/components/FilesView/DesktopToolbar.vue

@@ -183,7 +183,7 @@ export default {
             this.$store.dispatch('deleteItem')
         },
         createFolder() {
-            this.$createFolder()
+            this.$store.dispatch('createFolder', this.$t('popup_create_folder.folder_default_name'))
         },
         moveItem() {
             events.$emit('popup:open', { name: 'move', item: this.fileInfoDetail })

resources/js/components/FilesView/MediaFullPreview.vue

@@ -172,7 +172,7 @@ export default {
 		align-items: center;
 
 		.file-shadow {
-			box-shadow: 0 8px 40px rgba(17, 26, 52, 0.15);
+			box-shadow: 0 8px 40px rgba(17, 26, 52, 0.05);
 		}
 
 		.file {
@@ -228,7 +228,7 @@ export default {
 		background-color: $dark_mode_background;
 		.file-wrapper {
 			.file-shadow {
-				box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+				box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
 			}
 		}
 	}

resources/js/components/FilesView/MobileActions.vue

@@ -85,7 +85,8 @@
                     events.$emit('mobileSelecting:stop')
                 }
             },
-            mobileSortingAndPreview (oldValue , newValue) {
+            mobileSortingAndPreview () {
+                // TODO: co to
                 if(this.mobileSortingAndPreview) {
                     events.$emit('mobileSortingAndPreview' , true)
                     events.$emit('mobileSortingAndPreviewVignette' , true)
@@ -100,16 +101,7 @@
         },
         methods: {
             createFolder() {
-                if (this.$isMobile()) {
-                    // Get folder name
-                    let folderName = prompt(this.$t('popup_create_folder.title'))
-
-                    // Create folder
-                    if (folderName) this.$createFolder(folderName)
-                } else {
-                    // Create folder
-                    this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
-                }
+                events.$emit('popup:open', {name: 'create-folder'})
             },
         },
         mounted () {
@@ -120,8 +112,6 @@
                 events.$on('mobileSortingAndPreview', (state) => {
                     this.mobileSortingAndPreview = state
                 })
-                
-
         }
     }
 </script>

resources/js/components/FilesView/MobileMultiSelectMenu.vue

@@ -77,7 +77,7 @@ export default {
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 99;
+    z-index: 9;
     overflow: hidden;
     background: white;
 

resources/js/components/FilesView/SortingAndPreviewMenu.vue

@@ -84,11 +84,12 @@ export default {
 
             this.filter.field = field
 
+            console.log(this.filter);
+
             // Set sorting direction
             if (this.filter.sort === 'DESC')
                 this.filter.sort = 'ASC'
-
-            if (this.filter.sort === 'ASC')
+            else if (this.filter.sort === 'ASC')
                 this.filter.sort = 'DESC'
 
             // Save to localStorage sorting options

resources/js/components/Others/CreateFolder.vue

@@ -0,0 +1,95 @@
+<template>
+    <PopupWrapper name="create-folder">
+
+        <!--Title-->
+        <PopupHeader :title="$t('popup_create_folder.title')" icon="edit" />
+
+        <!--Content-->
+        <PopupContent>
+
+            <!--Form to set sharing-->
+            <ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <!--Set password-->
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Title" rules="required" v-slot="{ errors }">
+                    <label class="input-label">{{ $t('popup_create_folder.label') }}:</label>
+                    <input v-model="name" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('popup_create_folder.placeholder')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="$closePopup()"
+                    button-style="secondary"
+            >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="createFolder"
+                    button-style="theme"
+            >{{ $t('popup_create_folder.title') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import PopupHeader from '@/components/Others/Popup/PopupHeader'
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import ActionButton from '@/components/Others/ActionButton'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {required} from 'vee-validate/dist/rules'
+    import {events} from '@/bus'
+    import axios from 'axios'
+
+    export default {
+        name: 'CreateFolder',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ThumbnailItem,
+            ActionButton,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            ButtonBase,
+            required,
+        },
+        data() {
+            return {
+                name: undefined,
+            }
+        },
+        methods: {
+            async createFolder() {
+
+                // Validate fields
+                const isValid = await this.$refs.createForm.validate();
+
+                if (isValid) {
+                    this.$store.dispatch('createFolder', this.name)
+
+                    this.$closePopup()
+                }
+            },
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+</style>

resources/js/components/Others/RenameItem.vue

@@ -13,7 +13,7 @@
             <ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
 
                 <!--Set password-->
-                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_rename.label') }}:</label>
                     <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('popup_rename.placeholder')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -106,15 +106,6 @@
                 // Store picked item
                 this.pickedItem = args.item
             })
-
-            // Close popup
-            events.$on('popup:close', () => {
-
-                // Restore data
-                setTimeout(() => {
-                    //
-                }, 150)
-            })
         }
     }
 </script>