Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix: Context menu placement
  • Loading branch information
m4ximuel committed Apr 22, 2021
1 parent 5807db5 commit ed08c91
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 51 deletions.
55 changes: 37 additions & 18 deletions src/components/Torrent/TorrentRightClickMenu.vue
Expand Up @@ -44,8 +44,9 @@
<v-menu
:open-on-hover="!touchmode"
top
transition="slide-x-transition"
offset-x
:transition="isRightside ? 'slide-x-reverse-transition' : 'slide-x-transition'"
:left="isRightside"
>
<template #activator="{ on }">
<v-list-item link v-on="on">
Expand Down Expand Up @@ -130,8 +131,9 @@
<v-menu
:open-on-hover="!touchmode"
top
transition="slide-x-transition"
offset-x
:transition="isRightside ? 'slide-x-reverse-transition' : 'slide-x-transition'"
:left="isRightside"
>
<template #activator="{ on }">
<v-list-item link v-on="on">
Expand Down Expand Up @@ -164,8 +166,9 @@
<v-menu
:open-on-hover="!touchmode"
top
transition="slide-x-transition"
offset-x
:transition="isRightside ? 'slide-x-reverse-transition' : 'slide-x-transition'"
:left="isRightside"
>
<template #activator="{ on }">
<v-list-item link v-on="on">
Expand Down Expand Up @@ -198,8 +201,9 @@
v-if="!multiple"
:open-on-hover="!touchmode"
top
transition="slide-x-transition"
offset-x
:transition="isRightside ? 'slide-x-reverse-transition' : 'slide-x-transition'"
:left="isRightside"
>
<template #activator="{ on }">
<v-list-item link v-on="on">
Expand Down Expand Up @@ -257,21 +261,25 @@ export default {
mixins: [General, TorrentSelect],
props: {
torrent: Object,
touchmode: Boolean
touchmode: Boolean,
x: Number
},
data() {
return {
isRightside: true,
priority_options: [
{ name: 'top', icon: mdiPriorityHigh, action: 'topPrio' },
{ name: 'increase', icon: mdiArrowUp, action: 'increasePrio' },
{ name: 'decrease', icon: mdiArrowDown, action: 'decreasePrio' },
{ name: 'bottom', icon: mdiPriorityLow, action: 'bottomPrio' }
],
mdiDelete, mdiPlay, mdiPause, mdiSelect, mdiFastForward,
mdiFolder, mdiRenameBox, mdiInformation,
mdiPlaylistCheck, mdiPriorityHigh, mdiBullhorn, mdiChevronRight,
mdiShape, mdiHeadCog, mdiCheckboxMarked, mdiCheckboxBlankOutline,
mdiSpeedometerSlow, mdiChevronUp, mdiChevronDown
}
},
data: () => ({
priority_options: [
{ name: 'top', icon: mdiPriorityHigh, action: 'topPrio' },
{ name: 'increase', icon: mdiArrowUp, action: 'increasePrio' },
{ name: 'decrease', icon: mdiArrowDown, action: 'decreasePrio' },
{ name: 'bottom', icon: mdiPriorityLow, action: 'bottomPrio' }
],
mdiDelete, mdiPlay, mdiPause, mdiSelect, mdiFastForward,
mdiFolder, mdiRenameBox, mdiInformation,
mdiPlaylistCheck, mdiPriorityHigh, mdiBullhorn, mdiChevronRight,
mdiShape, mdiHeadCog, mdiCheckboxMarked, mdiCheckboxBlankOutline,
mdiSpeedometerSlow, mdiChevronUp, mdiChevronDown
}),
computed: {
...mapGetters(['getCategories']),
...mapState(['selected_torrents']),
Expand All @@ -293,7 +301,18 @@ export default {
return this.selected_torrents.length > 1
}
},
watch: {
x() {
this.detectRightside()
}
},
mounted() {
this.detectRightside()
},
methods: {
detectRightside() {
this.isRightside = document.documentElement.clientWidth < this.x + 380
},
resume() {
qbit.resumeTorrents(this.hashes)
},
Expand Down
69 changes: 36 additions & 33 deletions src/views/Dashboard.vue
Expand Up @@ -150,7 +150,7 @@
:key="torrent.hash"
class="pa-0"
:class="isMobile ? 'mb-1' : 'mb-2'"
@mousedown="trcMenu = false"
@mousedown="trcMenu.show = false"
@touchstart="strTouchStart($event, { torrent })"
@touchmove="strTouchMove($event)"
@touchend="strTouchEnd($event)"
Expand Down Expand Up @@ -190,16 +190,17 @@
</div>
</div>
<v-menu
v-model="trcMenu"
v-model="trcMenu.show"
transition="slide-y-transition"
:position-x="trcMenuX"
:position-y="trcMenuY"
:position-x="trcMenu.X"
:position-y="trcMenu.Y"
absolute
>
<TorrentRightClickMenu
v-if="data"
:torrent="data.torrent"
:touchmode="trcTouchMode"
:touchmode="tmCalc.TouchMode"
:x="trcMenu.X"
/>
</v-menu>
</div>
Expand All @@ -222,13 +223,13 @@ export default {
data() {
return {
data: null,
trcMenu: false,
trcMenuX: 0,
trcMenuY: 0,
trcMenuTouchTimer: 0,
trcMenuLastFinger: 0,
trcMenuLastHash: '',
trcTouchMode: false,
trcMenu: {
show: false, X: 0, Y: 0
},
tmCalc: {
TouchMode: false, TouchTimer: 0, LastFinger: 0, LastHash: ''
},
trcMoveTick: 0,
input: '',
searchFilterEnabled: false,
Expand Down Expand Up @@ -294,6 +295,11 @@ export default {
mounted() {
document.addEventListener('keydown', this.handleKeyboardShortcut)
document.addEventListener('dragenter', this.detectDragEnter)
this.$store.state.selectMode = false
window.scrollTo(0, 0)
document.addEventListener('scroll', function () {
this.trcMenu.show = false
}.bind(this))
},
created() {
this.$store.dispatch('INIT_INTERVALS')
Expand All @@ -307,49 +313,46 @@ export default {
methods: {
strTouchStart(e, data) {
this.trcMoveTick = 0
this.trcMenu = false
clearTimeout(this.trcMenuTouchTimer)
this.trcMenu.show = false
clearTimeout(this.tmCalc.TouchTimer)
if (e.touches.length == 1) { // one finger only
this.trcMenuLastFinger = 1
this.trcMenuTouchTimer = setTimeout(() => this.showTorrentRightClickMenu(e.touches[0], data, true), 400)
this.tmCalc.LastFinger = 1
this.tmCalc.TouchTimer = setTimeout(() => this.showTorrentRightClickMenu(e.touches[0], data, true), 400)
}
if (e.touches.length == 2) { // two finger
this.trcMenuLastFinger = 2
if (this.trcMenuLastHash == data.torrent.hash) {
this.tmCalc.LastFinger = 2
if (this.tmCalc.LastHash == data.torrent.hash) {
e.preventDefault()
this.showTorrentRightClickMenu(e.touches[0], data, true)
}
}
this.trcMenuLastHash = data.torrent.hash
this.tmCalc.LastHash = data.torrent.hash
},
strTouchMove(e) {
this.trcMoveTick++
if (this.trcMenu == true && e.touches.length > 1) {
if (this.trcMenu.show == true && e.touches.length > 1) {
e.preventDefault()
} else if (this.trcMoveTick > 1 && e.touches.length == 1) {
if (this.trcMenuLastFinger == 1) this.trcMenu = false
clearTimeout(this.trcMenuTouchTimer)
if (this.tmCalc.LastFinger == 1) this.trcMenu.show = false
clearTimeout(this.tmCalc.TouchTimer)
}
},
strTouchEnd(e) {
clearTimeout(this.trcMenuTouchTimer)
if (this.trcMenu)
clearTimeout(this.tmCalc.TouchTimer)
if (this.trcMenu.show)
e.preventDefault()
},
showTorrentRightClickMenu(e, data, touchmode = false) {
if (this.trcMenu)
if (this.trcMenu.show)
return false
this.data = data
try {
if (e.preventDefault)
e.preventDefault()
} catch (e) {
console.log(e)
}
this.trcTouchMode = touchmode
this.trcMenuX = e.clientX + (touchmode ? 12 : 6)
this.trcMenuY = e.clientY + (touchmode ? 12 : 6)
this.tmCalc.TouchMode = touchmode
this.trcMenu.X = e.clientX + (touchmode ? 12 : 6)
this.trcMenu.Y = e.clientY + (touchmode ? 12 : 6)
this.$nextTick(() => {
this.trcMenu = true
this.trcMenu.show = true
})
},
Expand Down

0 comments on commit ed08c91

Please sign in to comment.