diff options
| author | Christopher Ng <chrng8@gmail.com> | 2024-03-12 12:10:16 -0700 |
|---|---|---|
| committer | Christopher Ng <chrng8@gmail.com> | 2024-03-12 14:59:46 -0700 |
| commit | 742e5b6329fac3bdbe1d6f246d7a9c09765fed1d (patch) | |
| tree | 4cc8d9e8192fa5bee15d667310ee8e353d87ab8a /apps | |
| parent | 26bbb8c0e4c2a0c9718368d2e316fbb9eadb52fc (diff) | |
| download | nextcloud-server-742e5b6329fac3bdbe1d6f246d7a9c09765fed1d.tar.gz nextcloud-server-742e5b6329fac3bdbe1d6f246d7a9c09765fed1d.zip | |
fix(files): Right click menu positioning
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files/src/components/FileEntry/FileEntryActions.vue | 5 | ||||
| -rw-r--r-- | apps/files/src/components/FileEntryMixin.ts | 9 |
2 files changed, 8 insertions, 6 deletions
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue index 87ffef1fa3a..ff28369049b 100644 --- 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 index 5a20eb1ecc1..5834b058f12 100644 --- 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 |