perf(Torrent Card): Highlight torrent card when TRC menu is showed (#966)

src/components/Torrent/TorrentRightClickMenu.vue

@@ -366,7 +366,7 @@ export default {
     hashes() {
       if (this.multiple) return this.selected_torrents
 
-      return [this.torrent.hash]
+      return [this.hash]
     },
     multiple() {
       return this.selected_torrents.length > 1
@@ -394,10 +394,10 @@ export default {
       await qbit.pauseTorrents(this.hashes)
     },
     location() {
-      this.createModal('ChangeLocationModal', { hashes: this.multiple ? this.selected_torrents : [this.torrent.hash] })
+      this.createModal('ChangeLocationModal', { hashes: this.multiple ? this.selected_torrents : [this.hash] })
     },
     rename() {
-      this.createModal('RenameTorrentModal', { hash: this.torrent.hash })
+      this.createModal('RenameTorrentModal', { hash: this.hash })
     },
     async reannounce() {
       await qbit.reannounceTorrents(this.hashes)
@@ -411,16 +411,16 @@ export default {
       await qbit.recheckTorrents(this.hashes)
     },
     showInfo() {
-      this.$router.push({ name: 'torrentDetail', params: { hash: this.torrent.hash } })
+      this.$router.push({ name: 'torrentDetail', params: { hash: this.hash } })
     },
     async setPriority(priority) {
       await qbit.setTorrentPriority(this.hashes, priority)
     },
     setLimit(mode) {
-      this.createModal('SpeedLimitModal', { hash: this.torrent.hash, mode })
+      this.createModal('SpeedLimitModal', { hash: this.hash, mode })
     },
     setShareLimit() {
-      this.createModal('ShareLimitModal', { hash: this.torrent.hash })
+      this.createModal('ShareLimitModal', { hash: this.hash })
     },
     async forceResume() {
       await qbit.forceStartTorrents(this.hashes)

src/mixins/TorrentSelect.ts

@@ -1,20 +1,27 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { defineComponent } from 'vue'
+import { mapGetters, mapState } from 'vuex'
 
-@Component
+export default defineComponent({
-export default class TorrentSelect extends Vue {
+  name: 'TorrentSelect',
-  isAlreadySelected(hash: string) {
+  computed: {
-    return this.$store.getters.containsTorrent(hash)
+    ...mapState(['selectMode']),
-  }
+    ...mapGetters(['containsTorrent'])
-  selectTorrent(hash: string) {
+  },
-    if (!this.$store.state.selectMode) this.$store.state.selectMode = true
+  methods: {
-    if (this.isAlreadySelected(hash)) {
+    isAlreadySelected(hash: string) {
-      this.$store.commit('SET_SELECTED', { type: 'remove', hash })
+      return this.containsTorrent(hash)
-    } else {
+    },
-      this.$store.commit('SET_SELECTED', { type: 'add', hash })
+    selectTorrent(hash: string) {
+      if (!this.selectMode) this.selectMode = true
+      if (this.isAlreadySelected(hash)) {
+        this.$store.commit('SET_SELECTED', {type: 'remove', hash})
+      } else {
+        this.$store.commit('SET_SELECTED', {type: 'add', hash})
+      }
+    },
+    selectUntil(hash: string, index: number) {
+      if (!this.selectMode) return
+      this.$store.commit('SET_SELECTED', {type: 'until', hash, index})
     }
   }
-  selectUntil(hash: string, index: number) {
+})
-    if (!this.$store.state.selectMode) return
-    this.$store.commit('SET_SELECTED', { type: 'until', hash, index })
-  }
-}

src/views/Dashboard.vue

@@ -110,7 +110,7 @@
           :key="torrent.hash"
           class="pa-0"
           :class="isMobile ? 'mb-1' : 'mb-2'"
-          @mousedown="trcMenu.show = false"
+          @mousedown="hideTorrentRightClickMenu"
           @touchstart="strTouchStart($event, { torrent })"
           @touchmove="strTouchMove($event)"
           @touchend="strTouchEnd($event)"
@@ -135,7 +135,7 @@
         <v-pagination v-if="pageCount > 1 && !hasSearchFilter" v-model="pageNumber" :length="pageCount" :total-visible="7" @input="toTop" />
       </div>
     </div>
-    <v-menu v-model="trcMenu.show" transition="slide-y-transition" :position-x="trcMenu.X" :position-y="trcMenu.Y" absolute>
+    <v-menu v-model="trcMenu.show" transition="slide-y-transition" :position-x="trcMenu.X" :position-y="trcMenu.Y" absolute @input="hideTorrentRightClickMenu">
       <TorrentRightClickMenu v-if="data" :hash="data.torrent.hash" :touchmode="tmCalc.TouchMode" :x="trcMenu.X" />
     </v-menu>
   </div>
@@ -355,7 +355,7 @@ export default {
   methods: {
     strTouchStart(e, data) {
       this.trcMoveTick = 0
-      this.trcMenu.show = false
+      this.hideTorrentRightClickMenu(e)
       clearTimeout(this.tmCalc.TouchTimer)
       if (e.touches.length === 1) {
         // one finger only
@@ -377,7 +377,7 @@ export default {
       if (this.trcMenu.show === true && e.touches.length > 1) {
         e.preventDefault()
       } else if (this.trcMoveTick > 1 && e.touches.length === 1) {
-        if (this.tmCalc.LastFinger === 1) this.trcMenu.show = false
+        if (this.tmCalc.LastFinger === 1) this.hideTorrentRightClickMenu(e)
         clearTimeout(this.tmCalc.TouchTimer)
       }
     },
@@ -389,6 +389,11 @@ export default {
       if (this.trcMenu.show) return false
       this.data = data
       if (e.preventDefault) e.preventDefault()
+
+      if (!this.selectMode) {
+        this.$store.commit('SET_SELECTED', {type: 'add', hash: data.torrent.hash})
+      }
+
       this.tmCalc.TouchMode = touchmode
       this.trcMenu.X = e.clientX + (touchmode ? 12 : 6)
       this.trcMenu.Y = e.clientY + (touchmode ? 12 : 6)
@@ -396,6 +401,15 @@ export default {
         this.trcMenu.show = true
       })
     },
+    hideTorrentRightClickMenu(e) {
+      if (!this.selectMode) {
+        this.resetSelected()
+      }
+
+      this.$nextTick(() => {
+        this.trcMenu.show = false
+      })
+    },
     detectDragEnter() {
       if (this.selected_torrents.length === 0 && this.$store.state.modals.length < 1) {
         this.createModal('AddModal', { openSuddenly: true })
@@ -423,9 +437,6 @@ export default {
       }
       this.$store.state.selectMode = true
     },
-    addModal(name) {
-      this.createModal(name)
-    },
     selectAllTorrents() {
       if (this.allTorrentsSelected) {
         return (this.$store.state.selected_torrents = [])