Integrated rename popup

public/mix-manifest.json

@@ -27,9 +27,9 @@
     "/chunks/database.js": "/chunks/database.js?id=a6f7e8d1696493c60072",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1d8ee4bfbcde69c97021",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=f56517bee181ef89921f",
-    "/chunks/files.js": "/chunks/files.js?id=52fcc78719bcc5537509",
+    "/chunks/files.js": "/chunks/files.js?id=e3c6ea1a30b677daea6f",
     "/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=335030ccf561b022c47f",
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=d345ab220fcc39b4d4e1",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=fe3fac648fc629b4dd8e",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=06fc72f0d9a057bb8f18",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=fe3a39bf87ae2a2f5a64",
     "/chunks/invoices.js": "/chunks/invoices.js?id=30bbcaf349ff65a0270b",
@@ -55,7 +55,7 @@
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=6172a89afe3b27cb76cd",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=99b4f321902fe6b0eb23",
     "/chunks/shared-files.js": "/chunks/shared-files.js?id=a1262ec81010fb16f1e8",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=8dfe757b4ccdf4bbe241",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=12a2c4d491940272159b",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=ddb0ae9561462e691ce3",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=be89f6dcf7372d23668f",
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=63c4118231cfa758568a",
@@ -175,5 +175,58 @@
     "/js/main.6536d44aac6ab07eb98e.hot-update.js": "/js/main.6536d44aac6ab07eb98e.hot-update.js",
     "/js/main.026222a7f70064478e87.hot-update.js": "/js/main.026222a7f70064478e87.hot-update.js",
     "/js/main.7b3fe8ed3bcf19d613bb.hot-update.js": "/js/main.7b3fe8ed3bcf19d613bb.hot-update.js",
-    "/js/main.295cfe0bdda42969294f.hot-update.js": "/js/main.295cfe0bdda42969294f.hot-update.js"
+    "/js/main.295cfe0bdda42969294f.hot-update.js": "/js/main.295cfe0bdda42969294f.hot-update.js",
+    "/chunks/shared-page.ce7a7f06cb2ccc502cab.hot-update.js": "/chunks/shared-page.ce7a7f06cb2ccc502cab.hot-update.js",
+    "/chunks/files.dce81e3ba61531fc316d.hot-update.js": "/chunks/files.dce81e3ba61531fc316d.hot-update.js",
+    "/chunks/shared-page.dce81e3ba61531fc316d.hot-update.js": "/chunks/shared-page.dce81e3ba61531fc316d.hot-update.js",
+    "/chunks/shared-page.36576c6e9ffa0c413472.hot-update.js": "/chunks/shared-page.36576c6e9ffa0c413472.hot-update.js",
+    "/chunks/shared-page.36fc08d913a707b4ca84.hot-update.js": "/chunks/shared-page.36fc08d913a707b4ca84.hot-update.js",
+    "/chunks/shared-page.1072e16a07a6a7450f77.hot-update.js": "/chunks/shared-page.1072e16a07a6a7450f77.hot-update.js",
+    "/chunks/shared-page.ad503d19980a760315b8.hot-update.js": "/chunks/shared-page.ad503d19980a760315b8.hot-update.js",
+    "/chunks/shared-page.51fb9b41c2a24944e261.hot-update.js": "/chunks/shared-page.51fb9b41c2a24944e261.hot-update.js",
+    "/js/main.dba0cbb000b00cbf2aa9.hot-update.js": "/js/main.dba0cbb000b00cbf2aa9.hot-update.js",
+    "/js/main.ffec6f2854480b7fce05.hot-update.js": "/js/main.ffec6f2854480b7fce05.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.43777e51472f17e59401.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.43777e51472f17e59401.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c0d69bf97c69edbc69f8.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c0d69bf97c69edbc69f8.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.702dd06c4143449aabaa.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.702dd06c4143449aabaa.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e058c9bf43a48e04335.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e058c9bf43a48e04335.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.546aacb945674dcc97fa.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.546aacb945674dcc97fa.hot-update.js",
+    "/js/main.0b0bb6325efedcce87c8.hot-update.js": "/js/main.0b0bb6325efedcce87c8.hot-update.js",
+    "/js/main.a2c31e95d09224ce978f.hot-update.js": "/js/main.a2c31e95d09224ce978f.hot-update.js",
+    "/js/main.77f61443a542361ce712.hot-update.js": "/js/main.77f61443a542361ce712.hot-update.js",
+    "/js/main.56a9ad2eccaed3b32788.hot-update.js": "/js/main.56a9ad2eccaed3b32788.hot-update.js",
+    "/js/main.522e0b72e965b21d282d.hot-update.js": "/js/main.522e0b72e965b21d282d.hot-update.js",
+    "/js/main.317fd94b7d93220a4426.hot-update.js": "/js/main.317fd94b7d93220a4426.hot-update.js",
+    "/js/main.d80ab0b7369ef5eb4ca9.hot-update.js": "/js/main.d80ab0b7369ef5eb4ca9.hot-update.js",
+    "/js/main.cdec973619d2769e5030.hot-update.js": "/js/main.cdec973619d2769e5030.hot-update.js",
+    "/js/main.e65a9bb99bd94535fd1e.hot-update.js": "/js/main.e65a9bb99bd94535fd1e.hot-update.js",
+    "/js/main.bb5c0d0c89a9f90efa6a.hot-update.js": "/js/main.bb5c0d0c89a9f90efa6a.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.2468f92bbfd70593a52a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.2468f92bbfd70593a52a.hot-update.js",
+    "/js/main.4a6b5485cda66662adf4.hot-update.js": "/js/main.4a6b5485cda66662adf4.hot-update.js",
+    "/js/main.cf87559a4b1814df3137.hot-update.js": "/js/main.cf87559a4b1814df3137.hot-update.js",
+    "/js/main.c1251372f151ebf4fc88.hot-update.js": "/js/main.c1251372f151ebf4fc88.hot-update.js",
+    "/js/main.167d349e835030519fa1.hot-update.js": "/js/main.167d349e835030519fa1.hot-update.js",
+    "/js/main.9747d9cbfbd0e2e6844a.hot-update.js": "/js/main.9747d9cbfbd0e2e6844a.hot-update.js",
+    "/js/main.c8c07b40e5347403205f.hot-update.js": "/js/main.c8c07b40e5347403205f.hot-update.js",
+    "/js/main.adcc6923c3c40b516033.hot-update.js": "/js/main.adcc6923c3c40b516033.hot-update.js",
+    "/js/main.786e04bb61a741de6f8a.hot-update.js": "/js/main.786e04bb61a741de6f8a.hot-update.js",
+    "/js/main.16c72f9f1c5efcc43e10.hot-update.js": "/js/main.16c72f9f1c5efcc43e10.hot-update.js",
+    "/js/main.b9605399b515b6a49942.hot-update.js": "/js/main.b9605399b515b6a49942.hot-update.js",
+    "/js/main.458e636eb80a7f566c69.hot-update.js": "/js/main.458e636eb80a7f566c69.hot-update.js",
+    "/js/main.b61145b946c1fe26d62d.hot-update.js": "/js/main.b61145b946c1fe26d62d.hot-update.js",
+    "/js/main.7170c1e42e25e7fb4152.hot-update.js": "/js/main.7170c1e42e25e7fb4152.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.7170c1e42e25e7fb4152.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.7170c1e42e25e7fb4152.hot-update.js",
+    "/js/main.4c08be8ed7a82c1d4869.hot-update.js": "/js/main.4c08be8ed7a82c1d4869.hot-update.js",
+    "/js/main.d40f0e922729609f7376.hot-update.js": "/js/main.d40f0e922729609f7376.hot-update.js",
+    "/js/main.b326c6fdedae6d3cdae8.hot-update.js": "/js/main.b326c6fdedae6d3cdae8.hot-update.js",
+    "/js/main.4fbb94382a8aa1bb7c93.hot-update.js": "/js/main.4fbb94382a8aa1bb7c93.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3d7c28fe519c04f20937.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3d7c28fe519c04f20937.hot-update.js",
+    "/js/main.ef1264b01d98967dd243.hot-update.js": "/js/main.ef1264b01d98967dd243.hot-update.js",
+    "/js/main.adb6bce7c8c57d9886e0.hot-update.js": "/js/main.adb6bce7c8c57d9886e0.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.31bfc07787a406c900c3.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.31bfc07787a406c900c3.hot-update.js",
+    "/chunks/shared-page.19257945cfcc3590213e.hot-update.js": "/chunks/shared-page.19257945cfcc3590213e.hot-update.js",
+    "/js/main.a7e0ee0912b0c6965dfb.hot-update.js": "/js/main.a7e0ee0912b0c6965dfb.hot-update.js",
+    "/js/main.d9b86a7675569dbff5b0.hot-update.js": "/js/main.d9b86a7675569dbff5b0.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.b466240212bb08f60c81.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.b466240212bb08f60c81.hot-update.js",
+    "/js/main.0144cb83b62ec5df33ec.hot-update.js": "/js/main.0144cb83b62ec5df33ec.hot-update.js"
 }

resources/js/App.vue

@@ -19,6 +19,9 @@
             <ShareCreate/>
             <ShareEdit/>
 
+            <!--Rename folder or file item-->
+            <RenameItem/>
+
             <!--Move item setup-->
             <MoveItem/>
 
@@ -54,6 +57,7 @@
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import ShareCreate from '@/components/Others/ShareCreate'
     import Confirm from '@/components/Others/Popup/Confirm'
+    import RenameItem from '@/components/Others/RenameItem'
     import ShareEdit from '@/components/Others/ShareEdit'
     import MoveItem from '@/components/Others/MoveItem'
     import Vignette from '@/components/Others/Vignette'
@@ -71,6 +75,7 @@
             FileFullPreview,
             ToastrWrapper,
             ShareCreate,
+            RenameItem,
             MobileMenu,
             ShareEdit,
             MoveItem,

resources/js/components/FilesView/ContextMenu.vue

@@ -96,7 +96,7 @@
 
         <!--ContextMenu for Base location with MASTER permission-->
         <div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
-            <ul class="menu-option-group" v-if="item && isFolder &&  multiSelectContextMenu">
+            <ul class="menu-option-group" v-if="item && isFolder && multiSelectContextMenu">
                 <li class="menu-option" @click="addToFavourites">
                     <div class="icon">
                         <star-icon size="17"></star-icon>
@@ -111,6 +111,14 @@
                 </li>
             </ul>
             <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="renameItem">
+                    <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="shareItem" v-if="multiSelectContextMenu">
                     <div class="icon">
                         <link-icon size="17"></link-icon>
@@ -132,7 +140,7 @@
                     </div>
                 </li>
             </ul>
-            <ul class="menu-option-group" v-if="item &&  multiSelectContextMenu">
+            <ul class="menu-option-group" v-if="item && multiSelectContextMenu">
                 <li class="menu-option" @click="ItemDetail" v-if="item">
                     <div class="icon">
                         <eye-icon size="17"></eye-icon>
@@ -180,6 +188,14 @@
                 </li>
             </ul>
             <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="renameItem">
+                    <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>
@@ -242,6 +258,14 @@
                 </li>
             </ul>
             <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="renameItem">
+                    <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>
@@ -381,33 +405,17 @@ export default {
 
     methods: {
         renameItem() {
-            let itemName = prompt(this.$t('popup_rename.title'), this.item.name)
+            events.$emit('popup:open', { name: 'rename-item', item: this.item })
-
-            if (itemName && itemName !== '') {
-                let item = {
-                    unique_id: this.item.unique_id,
-                    type: this.item.type,
-                    name: itemName
-                }
-
-                this.$store.dispatch('renameItem', item)
-
-                // Change item name if is mobile device or prompted
-                if (this.$isMobile()) {
-                    events.$emit('change:name', item)
-                }
-            }
         },
         moveItem() {
-            // Open move item popup
             events.$emit('popup:open', { name: 'move', item: [this.item] })
         },
         shareItem() {
             if (this.item.shared) {
-                // Open share item popup
+                // Open edit share popup
                 events.$emit('popup:open', { name: 'share-edit', item: this.item })
             } else {
-                // Open share item popup
+                // Open create share popup
                 events.$emit('popup:open', { name: 'share-create', item: this.item })
             }
         },
@@ -432,10 +440,7 @@ export default {
         },
         downloadItem() {
             // Download file
-            this.$downloadFile(
+            this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
-                this.item.file_url,
-                this.item.name + '.' + this.item.mimetype
-            )
         },
         ItemDetail() {
             // Dispatch load file info detail

resources/js/components/FilesView/MobileMenu.vue

@@ -442,25 +442,7 @@ export default {
       }
     },
     renameItem() {
-      let itemName = prompt(
+        events.$emit('popup:open', { name: 'rename-item', item: this.fileInfoDetail[0] })
-        this.$t("popup_rename.title"),
-        this.fileInfoDetail[0].name
-      );
-
-      if (itemName && itemName !== "") {
-        let item = {
-          unique_id: this.fileInfoDetail[0].unique_id,
-          type: this.fileInfoDetail[0].type,
-          name: itemName,
-        };
-
-        this.$store.dispatch("renameItem", item);
-
-        // Change item name if is mobile device or prompted
-        if (this.$isMobile()) {
-          events.$emit("change:name", item);
-        }
-      }
     },
     closeAndResetContextMenu() {
       //If emit to show menu coming from MediaFullPreview dont reset data

resources/js/components/Others/Popup/PopupHeader.vue

@@ -3,6 +3,7 @@
         <div class="icon">
             <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
             <link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon>
+            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon"></edit2-icon>
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -12,7 +13,7 @@
 </template>
 
 <script>
-    import {CornerDownRightIcon, LinkIcon, XIcon} from 'vue-feather-icons'
+    import {CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon} from 'vue-feather-icons'
     import {events} from '@/bus'
 
     export default {
@@ -22,6 +23,7 @@
         ],
         components: {
             CornerDownRightIcon,
+            Edit2Icon,
             LinkIcon,
             XIcon,
         },

resources/js/components/Others/RenameItem.vue

@@ -0,0 +1,129 @@
+<template>
+    <PopupWrapper name="rename-item">
+        <!--Title-->
+        <PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit" />
+
+        <!--Content-->
+        <PopupContent>
+
+            <!--Item Thumbnail-->
+            <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
+
+            <!--Form to set sharing-->
+            <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 }">
+                    <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>
+                </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="changeName"
+                    button-style="theme"
+            >{{ $t('popup_share_edit.save') }}
+            </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: 'RenameItem',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ThumbnailItem,
+            ActionButton,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            ButtonBase,
+            required,
+        },
+        computed: {
+            itemTypeTitle() {
+                return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
+            },
+        },
+        data() {
+            return {
+                pickedItem: undefined,
+            }
+        },
+        methods: {
+            changeName() {
+                if (this.pickedItem.name && this.pickedItem.name !== '') {
+
+                    let item = {
+                        unique_id: this.pickedItem.unique_id,
+                        type: this.pickedItem.type,
+                        name: this.pickedItem.name
+                    }
+
+                    // Rename item request
+                    this.$store.dispatch('renameItem', item)
+
+                    // Rename item in view
+                    events.$emit('change:name', item)
+
+                    this.$closePopup()
+                }
+            },
+        },
+        mounted() {
+
+            // Show popup
+            events.$on('popup:open', args => {
+
+                if (args.name !== 'rename-item') return
+
+                // Store picked item
+                this.pickedItem = args.item
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Restore data
+                setTimeout(() => {
+                    //
+                }, 150)
+            })
+        }
+    }
+</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/i18n/lang/cn.json

@@ -548,7 +548,9 @@
 		"title": "File is too large"
 	},
 	"popup_rename": {
-		"title": "修改文件/夹名称"
+		"title": "Rename Your {item}",
+		"label": "Edit Name",
+		"placeholder": "Type your title"
 	},
 	"popup_set_card": {
 		"message": "您的卡将被设置为默认卡，并且在以后的结算中始终会收取费用。",

resources/js/i18n/lang/en.json

@@ -550,7 +550,9 @@
 		"title": "File is too large"
 	},
 	"popup_rename": {
-		"title": "Change your item name"
+		"title": "Rename Your {item}",
+		"label": "Edit Name",
+		"placeholder": "Type your title"
 	},
 	"popup_set_card": {
 		"message": "Your card will be set as default and will be always charged for the next billings.",

resources/js/i18n/lang/sk.json

@@ -550,7 +550,9 @@
 		"title": "Súbor je príliš veľký"
 	},
 	"popup_rename": {
-		"title": "Zmeňte názov položky"
+		"title": "Zmeňte názov {item}",
+		"label": "Zmeniť názov",
+		"placeholder": "Napíš názov..."
 	},
 	"popup_set_card": {
 		"message": "Vaša karta bude nastavená ako predvolená a bude vám z nej vždy stiahnutá čiastka za nasledujúce obdobie fakturácie.",

resources/js/views/FilePages/Files.vue

@@ -3,6 +3,7 @@
 
         <ContentSidebar>
 
+            <!--Empty storage warning-->
             <ContentGroup v-if="config.storageLimit && storage.used > 95">
                 <UpgradeSidebarBanner />
             </ContentGroup>

resources/js/views/Shared/SharedPage.vue

@@ -9,6 +9,9 @@
         <!--Move item setup-->
         <MoveItem />
 
+        <!--Rename folder or file item-->
+        <RenameItem/>
+
         <!--Mobile Menu-->
         <MobileMenu/>
 
@@ -19,7 +22,7 @@
         <Vignette/>
 
         <!--Password verification-->
-        <div v-if="currentPage === 'page-password'" id="password-view">
+        <div v-if="isPagePasswordVerification" id="password-view">
 
             <!--Verify share link by password-->
             <AuthContent class="center" name="password" :visible="true">
@@ -42,7 +45,7 @@
         </div>
 
         <!--Single file page-->
-        <div id="single-file" v-if="sharedDetail.type === 'file' && currentPage === 'page-files'">
+        <div v-if="sharedDetail.type === 'file' && isPageFiles" id="single-file">
             <div class="single-file-wrapper">
                 <FileItemGrid v-if="sharedFile" :data="sharedFile" :context-menu="false"/>
 
@@ -52,10 +55,15 @@
             </div>
         </div>
 
-        <!--Items view page-->
+        <!--Multiple items view page-->
-        <div id="viewport" v-if="sharedDetail.type === 'folder' && currentPage === 'page-files'" @contextmenu.prevent.capture="contextMenu($event, undefined)" @click="fileViewClick">
+        <div v-if="sharedDetail.type === 'folder' && isPageFiles"
+             @contextmenu.prevent.capture="contextMenu($event, undefined)"
+             @click="fileViewClick"
+             id="viewport">
 
-                <ContentSidebar v-if="navigationTree && navigationTree.length > 1">
+                <ContentSidebar v-if="navigationTree">
+
+                    <!--Locations-->
                     <ContentGroup :title="$t('sidebar.locations_title')">
                         <div class="menu-list-wrapper vertical">
                             <a class="menu-list-item link" @click="goHome">
@@ -68,7 +76,12 @@
                             </a>
                         </div>
                     </ContentGroup>
-                    <ContentGroup :title="$t('sidebar.navigator_title')">
+
+                    <!--Navigator-->
+                    <ContentGroup :title="$t('sidebar.navigator_title')" class="navigator">
+                        <span class="empty-note navigator" v-if="navigationTree.length == 0">
+                            {{ $t('sidebar.folders_empty') }}
+                        </span>
                         <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in navigationTree" :key="items.unique_id"/>
                     </ContentGroup>
                 </ContentSidebar>
@@ -100,6 +113,7 @@
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import AuthContent from '@/components/Auth/AuthContent'
+    import RenameItem from '@/components/Others/RenameItem'
     import AuthButton from '@/components/Auth/AuthButton'
     import Spinner from '@/components/FilesView/Spinner'
     import MoveItem from '@/components/Others/MoveItem'
@@ -130,6 +144,7 @@
             AuthButton,
             MobileMenu,
             ButtonBase,
+            RenameItem,
             HomeIcon,
             MoveItem,
             required,
@@ -146,6 +161,12 @@
             ]),
             navigationTree() {
                 return this.navigation ? this.navigation[0].folders : undefined
+            },
+            isPageFiles() {
+                return this.currentPage === 'page-files'
+            },
+            isPagePasswordVerification() {
+                return this.currentPage === 'page-password'
             }
         },
         data() {
@@ -333,4 +354,11 @@
         }
     }
 
+    .empty-note {
+
+        &.navigator {
+            padding: 5px 25px 10px;
+        }
+    }
+
 </style>