upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-20 00:12:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 38

fix(files): Right click menu positioning

Browse source 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2024-03-12 12:10:16 -07:00
parent 26bbb8c0e4
commit 742e5b6329
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/files/src/components/FileEntry/FileEntryActions.vue
View file

@ -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 {

9
apps/files/src/components/FileEntryMixin.ts
View file

@ -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