fix(files): Right click menu positioning

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Mar 12, 2024 · 742e5b6 · 742e5b6
1 parent 26bbb8c
commit 742e5b6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -352,12 +352,13 @@ export default Vue.extend({
 <style lang="scss">
 // Allow right click to define the position of the menu
 // only if defined
-[style*="mouse-pos-x"] .v-popper__popper {
+main.app-content[style*="mouse-pos-x"] .v-popper__popper {
 	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
 
 	// If the menu is too close to the bottom, we move it up
 	&[data-popper-placement="top"] {
-		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh), 0px) !important;
+		// 34px added to align with the top of the cursor
+		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh + 34px), 0px) !important;
 	}
 	// Hide arrow if floating
 	.v-popper__arrow-container {

diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
@@ -162,7 +162,7 @@ export default defineComponent({
 				if (opened) {
 					// Reset any right click position override on close
 					// Wait for css animation to be done
-					const root = this.$root.$el as HTMLElement
+					const root = this.$el?.closest('main.app-content') as HTMLElement
 					root.style.removeProperty('--mouse-pos-x')
 					root.style.removeProperty('--mouse-pos-y')
 				}
@@ -210,12 +210,13 @@ export default defineComponent({
 			// The grid mode is compact enough to not care about
 			// the actions menu mouse position
 			if (!this.gridMode) {
-				const root = this.$root.$el as HTMLElement
+				// Actions menu is contained within the app content
+				const root = this.$el?.closest('main.app-content') as HTMLElement
 				const contentRect = root.getBoundingClientRect()
 				// Using Math.min/max to prevent the menu from going out of the AppContent
 				// 200 = max width of the menu
-				root.style.setProperty('--mouse-pos-x', Math.max(contentRect.left, Math.min(event.clientX, event.clientX - 200)) + 'px')
-				root.style.setProperty('--mouse-pos-y', Math.max(contentRect.top, event.clientY - contentRect.top) + 'px')
+				root.style.setProperty('--mouse-pos-x', Math.max(0, event.clientX - contentRect.left - 200) + 'px')
+				root.style.setProperty('--mouse-pos-y', Math.max(0, event.clientY - contentRect.top) + 'px')
 			}
 
 			// If the clicked row is in the selection, open global menu