Right-click context menu doesnt close when opening another #41

This commit is contained in:
Daan 2020-09-14 20:38:56 +02:00
parent 2117a5c46b
commit faedfa7172
3 changed files with 78 additions and 81 deletions

View file

@ -1,58 +1,58 @@
{ {
"name": "vuetorrent", "name": "vuetorrent",
"version": "0.3.0", "version": "0.3.1",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"format": "pretty-quick" "format": "pretty-quick"
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.11.5", "@babel/polyfill": "^7.11.5",
"apexcharts": "^3.20.2", "apexcharts": "^3.20.2",
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"dayjs": "^1.8.35", "dayjs": "^1.8.35",
"fuse.js": "^6.4.1", "fuse.js": "^6.4.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"uuid": "^8.3.0", "uuid": "^8.3.0",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-apexcharts": "^1.6.0", "vue-apexcharts": "^1.6.0",
"vue-async-computed": "^3.9.0", "vue-async-computed": "^3.9.0",
"vue-context": "^5.2.0", "vue-context": "^5.2.0",
"vue-observe-visibility": "^0.4.6", "vue-observe-visibility": "^0.4.6",
"vue-router": "^3.3.4", "vue-router": "^3.3.4",
"vue-toastification": "^1.7.7", "vue-toastification": "^1.7.7",
"vue2-perfect-scrollbar": "^1.5.0", "vue2-perfect-scrollbar": "^1.5.0",
"vuetify": "^2.3.4", "vuetify": "^2.3.4",
"vuex": "^3.5.1", "vuex": "^3.5.1",
"vuex-persist": "^2.2.0" "vuex-persist": "^2.2.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0", "@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0", "@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-plugin-pwa": "^4.5.6", "@vue/cli-plugin-pwa": "^4.5.6",
"@vue/cli-service": "~4.3.0", "@vue/cli-service": "~4.3.0",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.4", "eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"fibers": "^5.0.0", "fibers": "^5.0.0",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prettier": "^2.1.1", "prettier": "^2.1.1",
"pretty-quick": "^2.0.2", "pretty-quick": "^2.0.2",
"sass": "^1.26.10", "sass": "^1.26.10",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "^2.0.7", "vue-cli-plugin-vuetify": "^2.0.7",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.12"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
"last 2 versions", "last 2 versions",
"not dead", "not dead",
"not ie <= 10" "not ie <= 10"
] ]
} }

View file

@ -10,7 +10,6 @@
<v-tooltip top> <v-tooltip top>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-layout <v-layout
@contextmenu.prevent="$refs.menu.open"
v-on="on" v-on="on"
row row
wrap wrap
@ -128,27 +127,16 @@
<span>{{ torrent.name }}</span> <span>{{ torrent.name }}</span>
</v-tooltip> </v-tooltip>
<v-divider></v-divider> <v-divider></v-divider>
<vue-context ref="menu">
<TorrentRightClickMenu :hash="torrent.hash" />
</vue-context>
</v-card> </v-card>
</template> </template>
<script> <script>
import { VueContext } from 'vue-context'
import 'vue-context/src/sass/vue-context.scss'
import TorrentRightClickMenu from '@/components/Torrent/TorrentRightClickMenu.vue'
import { General } from '@/mixins' import { General } from '@/mixins'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'Torrent', name: 'Torrent',
components: {
VueContext,
TorrentRightClickMenu
},
mixins: [General], mixins: [General],
props: { props: {
@ -244,13 +232,3 @@ export default {
} }
} }
</script> </script>
<style scoped lang="scss">
.v-context {
&,
& ul {
border-radius: 0.3rem;
padding: 0;
}
}
</style>

View file

@ -8,7 +8,6 @@
class="my-4 pt-5 pa-0" class="my-4 pt-5 pa-0"
@click.self="resetSelected" @click.self="resetSelected"
> >
<!-- justify-center here in layout to center!! -->
<v-flex xs12 sm6 md3 @click.self="resetSelected"> <v-flex xs12 sm6 md3 @click.self="resetSelected">
<v-text-field <v-text-field
flat flat
@ -24,11 +23,18 @@
<p class="grey--text">No active Torrents!</p> <p class="grey--text">No active Torrents!</p>
</div> </div>
<div v-else> <div v-else>
<div v-for="torrent in torrents" :key="torrent.hash"> <div
@contextmenu.prevent="$refs.menu.open($event, { torrent })"
v-for="torrent in torrents"
:key="torrent.hash"
>
<Torrent :torrent="torrent" /> <Torrent :torrent="torrent" />
</div> </div>
</div> </div>
</v-container> </v-container>
<vue-context ref="menu" v-slot="{ data }">
<TorrentRightClickMenu v-if="data" :hash="data.torrent.hash" />
</vue-context>
</div> </div>
</template> </template>
@ -36,10 +42,13 @@
import { mapState, mapGetters } from 'vuex' import { mapState, mapGetters } from 'vuex'
import Torrent from '@/components/Torrent' import Torrent from '@/components/Torrent'
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import { VueContext } from 'vue-context'
import 'vue-context/src/sass/vue-context.scss'
import TorrentRightClickMenu from '@/components/Torrent/TorrentRightClickMenu.vue'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { Torrent }, components: { Torrent, VueContext, TorrentRightClickMenu },
data() { data() {
return { return {
input: '' input: ''
@ -81,3 +90,13 @@ export default {
} }
} }
</script> </script>
<style scoped lang="scss">
.v-context {
&,
& ul {
border-radius: 0.3rem;
padding: 0;
}
}
</style>