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): open menu on right click position

Browse source 
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ 2023-12-27 16:26:13 +01:00 committed by John Molakvoæ
parent 89ee85938e
commit dd0fb2e76b
2 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/files/src/components/FileEntry.vue
View file

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

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

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