- filebrowser contextmenu fix

resources/js/components/FilePreview/FilePreview.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
         v-if="isFullPreview"
-        class="file-preview z-20"
+        class="file-preview z-40"
         ref="filePreview"
         tabindex="-1"
         @keydown.esc="closeFilePreview"

resources/js/components/FilePreview/FilePreviewToolbar.vue

@@ -1,15 +1,29 @@
 <template>
 	<div class="navigation-panel" v-if="currentFile">
 		<div class="name-wrapper">
-			<x-icon @click="closeFullPreview" size="22" class="icon-close hover-text-theme" />
+
+			<!--Close icon-->
+			<span @click="closeFullPreview" class="p-3 -m-3">
+				<x-icon size="17" class="icon-close hover-text-theme" />
+			</span>
+
+			<!--Item name-->
 			<div class="name-count-wrapper">
 				<p class="title">{{ currentFile.data.attributes.name }}</p>
 				<span v-if="! fastPreview" class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
 			</div>
+
+			<!--Context menu handler-->
 			<PopoverWrapper>
-				<span @click.stop="showItemContextMenu" id="fast-preview-menu" class="fast-menu-icon group">
-					<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
+
+				<!--Icon-->
+				<span @click.stop="showItemContextMenu" class="p-3 -m-3">
+					<div class="py-0.5 px-1.5 align-middle inline-block rounded-md lg:bg-transparent dark:bg-dark-foreground bg-light-background transition-all duration-200">
+						<more-horizontal-icon size="14" />
+					</div>
 				</span>
+
+				<!--Desktop context menu-->
 				<PopoverItem name="file-preview-contextmenu" side="right">
 					<OptionGroup class="menu-option-group">
 						<Option @click.native="$renameFileOrFolder(currentFile)" :title="$t('context_menu.rename')" icon="rename" />
@@ -24,10 +38,12 @@
 			</PopoverWrapper>
 		</div>
 
+		<!--Item metadata-->
 		<div class="created-at-wrapper">
 			<p>{{ currentFile.data.attributes.filesize }}, {{ currentFile.data.attributes.created_at }}</p>
 		</div>
 
+		<!--Icon actions-->
 		<div class="navigation-icons">
 			<div v-if="isPdf" class="navigation-tool-wrapper">
 				<ToolbarButton @click.native="decreaseSizeOfPDF" source="zoom-out" :action="$t('pdf_zoom_out')" />
@@ -121,6 +137,7 @@
         methods: {
 			showItemContextMenu() {
 				if (this.$isMobile()) {
+					events.$emit('mobile-context-menu:show', this.currentFile)
 					this.$showMobileMenu('file-menu')
 				} else {
 					events.$emit('popover:open', 'file-preview-contextmenu')
@@ -208,7 +225,6 @@
 
     .icon-close {
         min-width: 22px;
-        padding: 1px 4px;
         border-radius: 6px;
         vertical-align: middle;
         cursor: pointer;
@@ -222,35 +238,6 @@
             }
         }
     }
-
-    .fast-menu-icon {
-        height: 24px;
-        display: flex;
-        align-items: center;
-        vertical-align: middle;
-        padding: 1px 4px;
-        line-height: 0;
-        border-radius: 3px;
-        cursor: pointer;
-        @include transition(150ms);
-
-        svg circle {
-            @include transition(150ms);
-        }
-
-        &:hover {
-            background: $light_background;
-
-            svg circle {
-                color: inherit;
-            }
-        }
-
-        .more-icon {
-            vertical-align: middle;
-            cursor: pointer;
-        }
-    }
 }
 
 .context-menu {
@@ -353,10 +340,6 @@
                 background-color: $dark_mode_background;
             }
         }
-
-        .fast-menu-icon:hover {
-            background: $dark_mode_background;
-        }
     }
 
     .name-wrapper {

resources/js/components/FilesView/ItemGrid.vue

@@ -193,7 +193,7 @@
 
 			// Change item name
 			events.$on('change:name', item => {
-				if (this.item.data.id === item.id) this.itemName = item.name
+				if (this.entry.data.id === item.id) this.itemName = item.name
 			})
 
 			// Autofocus after newly created folder

resources/js/components/FilesView/ItemList.vue

@@ -171,7 +171,7 @@
 
 			// Change item name
 			events.$on('change:name', item => {
-				if (this.item.data.id === item.id) this.itemName = item.name
+				if (this.entry.data.id === item.id) this.itemName = item.name
 			})
 
 			// Autofocus after newly created folder

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

@@ -1,7 +1,7 @@
 <template>
     <transition name="popup">
         <div
-			class="popup lg:absolute fixed top-0 left-0 right-0 bottom-0 z-40 overflow-y-auto grid h-full p-10"
+			class="popup lg:absolute fixed top-0 left-0 right-0 bottom-0 overflow-y-auto grid h-full p-10"
 			@click.self="closePopup"
 			v-if="isVisibleWrapper"
 		>
@@ -61,6 +61,10 @@
     @import '/resources/sass/vuefilemanager/_variables';
     @import '/resources/sass/vuefilemanager/_mixins';
 
+	.popup {
+		z-index: 41;
+	}
+
     .popup-wrapper {
         box-shadow: $light_mode_popup_shadow;
         border-radius: 8px;

resources/js/components/Others/Vignette.vue

@@ -56,7 +56,7 @@
         right: 0;
         left: 0;
         bottom: 0;
-        z-index: 30;
+        z-index: 40;
         background: $light_mode_vignette;
     }
 

resources/js/views/FileView/Files.vue

@@ -151,6 +151,7 @@
 		},
 		computed: {
 			...mapGetters([
+				'fastPreview',
 				'clipboard',
 				'config',
 				'user',