fix(files): open menu on right click position

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

Author: skjnldsv

apps/files/src/components/FileEntry.vue

@@ -353,6 +353,15 @@ export default defineComponent({
 				return this.actionsMenuStore.opened === this.uniqueId
 			},
 			set(opened) {
+				// Only reset when opening a new menu
+				if (opened) {
+					// Reset any right click position override on close
+					// Wait for css animation to be done
+					const root = this.$root.$el as HTMLElement
+					root.style.removeProperty('--mouse-pos-x')
+					root.style.removeProperty('--mouse-pos-y')
+				}
+
 				this.actionsMenuStore.opened = opened ? this.uniqueId : null
 			},
 		},
@@ -390,6 +399,13 @@ export default defineComponent({
 				return
 			}
 
+			const root = this.$root.$el 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')
+
 			// If the clicked row is in the selection, open global menu
 			const isMoreThanOneSelected = this.selectedFiles.length > 1
 			this.actionsMenuStore.opened = this.isSelected && isMoreThanOneSelected ? 'global' : this.uniqueId

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -327,8 +327,24 @@ export default Vue.extend({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+// Allow right click to define the position of the menu
+// only if defined
+.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;
+	}
+	// Hide arrow if floating
+	.v-popper__arrow-container {
+		display: none;
+	}
+}
+</style>
 
+<style lang="scss" scoped>
 :deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
 	.button-vue__text {
 		color: var(--color-primary-element);