perf(TorrentCard): Only process drag on handle (#1253)

This commit is contained in:
Rémi Marseault 2023-11-05 18:00:42 +01:00 committed by GitHub
parent 15761d0f5d
commit 681e59f7c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 4 deletions

View file

@ -6,15 +6,14 @@ defineEmits<{ update: [value: void] }>()
<template> <template>
<tr class="table-row"> <tr class="table-row">
<td><v-icon icon="mdi-drag-vertical" /></td> <td><v-icon icon="mdi-drag-vertical" class="dnd-handle" /></td>
<td><v-btn density="compact" :icon="property.active ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline'" variant="flat" @click="$emit('update')" /></td> <td><v-btn density="compact" :icon="property.active ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline'" variant="flat" @click="$emit('update')" /></td>
<td>{{ $t(`torrent.properties.${property.name}`) }}</td> <td>{{ $t(`torrent.properties.${property.name}`) }}</td>
</tr> </tr>
</template> </template>
<style scoped> <style scoped>
tr.table-row { td .dnd-handle {
cursor: move; cursor: move;
margin-bottom: 12px !important;
} }
</style> </style>

View file

@ -32,7 +32,7 @@ function toggleActive(isBusy: boolean, property: TorrentProperty) {
<v-list-subheader>{{ $t('settings.vuetorrent.torrentCard.busyTorrentTip') }}</v-list-subheader> <v-list-subheader>{{ $t('settings.vuetorrent.torrentCard.busyTorrentTip') }}</v-list-subheader>
<v-table> <v-table>
<draggable v-model="busyTorrentProperties" item-key="name" tag="tbody"> <draggable v-model="busyTorrentProperties" item-key="name" tag="tbody" handle=".dnd-handle">
<template v-slot:item="{ element }"> <template v-slot:item="{ element }">
<DashboardItem :property="element" @update="toggleActive(true, element)" /> <DashboardItem :property="element" @update="toggleActive(true, element)" />
</template> </template>