fix(files): Right click menu positioning

Signed-off-by: Christopher Ng <chrng8@gmail.com>
(cherry picked from commit 742e5b6329fac3bdbe1d6f246d7a9c09765fed1d)

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 86689cfe62bac5303a2830a918f26f731a7fb26d..5d35eae5a792fdfc57d50a8fee32753e1b53bb00 100644 (file)
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -350,12 +350,13 @@ export default Vue.extend({
 <style lang="scss">
 // Allow right click to define the position of the menu
 // only if defined
-.content[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
index 69638d33212e82c560fce1c0be6b6a1ce91701a0..a1e90121c92871dbc3b7831322bb8df8d23a603c 100644 (file)
--- 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')
                                }
@@ -207,12 +207,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