evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed out-of-the-window contextmenu positioning bug

Browse Source
This commit is contained in:
Roberto Tonino 2020-08-12 19:03:53 +02:00
parent 1e85ab3089
commit 606c4eee85
2 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

28
src/components/TheContextMenu.vue
View File

@ -5,6 +5,7 @@
v-for="option of sortedOptions" v-for="option of sortedOptions"
:key="option.label" :key="option.label"
v-show="option.show" v-show="option.show"
:class="{ 'menu-option--visible': option.show }"
@click.prevent="option.action" @click.prevent="option.action"
> >
<span class="menu-option__text">{{ option.label }}</span> <span class="menu-option__text">{{ option.label }}</span>
@ -182,6 +183,22 @@ export default {
positionMenu(newX, newY) { positionMenu(newX, newY) {
this.xPos = `${newX}px` this.xPos = `${newX}px`
this.yPos = `${newY}px` this.yPos = `${newY}px`
this.$nextTick().then(() => {
const { innerHeight, innerWidth } = window
const menuXOffest = newX + this.$refs.contextMenu.getBoundingClientRect().width
const menuYOffest = newY + this.$refs.contextMenu.getBoundingClientRect().height
if (menuXOffest > innerWidth) {
const difference = menuXOffest - innerWidth + 15
this.xPos = `${newX - difference}px`
}
if (menuYOffest > innerHeight) {
const difference = menuYOffest - innerHeight + 15
this.yPos = `${newY - difference}px`
}
})
}, },
showDeezerOptions() { showDeezerOptions() {
this.options.copyDeezerLink.show = true this.options.copyDeezerLink.show = true
@ -203,9 +220,10 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
min-width: 100px; min-width: 100px;
background: var(--foreground-inverted);
border-radius: 7px; border-radius: 7px;
background: var(--foreground-inverted);
box-shadow: 4px 10px 18px 0px hsla(0, 0%, 0%, 0.15); box-shadow: 4px 10px 18px 0px hsla(0, 0%, 0%, 0.15);
overflow: hidden;
z-index: 10000; z-index: 10000;
} }
@ -219,14 +237,6 @@ export default {
color: var(--foreground); color: var(--foreground);
cursor: pointer; cursor: pointer;
&:first-child {
border-radius: 7px 7px 0 0;
}
&:last-child {
border-radius: 0 0 7px 7px;
}
&:hover { &:hover {
background: var(--table-highlight); background: var(--table-highlight);
filter: brightness(150%); filter: brightness(150%);