fix(files): open menu on right click position

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

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 3ed8b0a5d4b2dbdfe2e1d6c6ec33c69d1b5c5361..a6ca70d2800851646a5b7cad34c410ea7c2b11e4 100644 (file)
--- a/apps/files/src/components/FileEntry.vue
+++ b/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

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index d4693b7d8e64a4ae463b9da5e57c5d046767c313..1e453fec706162b6beaba3ff60643d979f9e152c 100644 (file)
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/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);