track list: make entire row clickable

This commit is contained in:
Thomas Amland 2020-12-19 12:41:33 +01:00
parent af044fb544
commit 6bf5d6cdd3

View File

@ -30,10 +30,11 @@
:class="{'active': item.id === playingTrackId}" :class="{'active': item.id === playingTrackId}"
:draggable="true" :draggable="true"
@dragstart="dragstart(item.id, $event)" @dragstart="dragstart(item.id, $event)"
@click="play(index)"
> >
<td class="pl-0 pr-0 text-center text-muted" <td class="pl-0 pr-0 text-center text-muted"
style="min-width: 20px; max-width: 20px;" style="min-width: 20px; max-width: 20px;"
@click="play(index)"> >
<template v-if="item.id === playingTrackId"> <template v-if="item.id === playingTrackId">
<Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" /> <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" />
</template> </template>
@ -42,7 +43,7 @@
<Icon class="track-number-hover" icon="play-fill" /> <Icon class="track-number-hover" icon="play-fill" />
</template> </template>
</td> </td>
<td @click="play(index)"> <td>
{{ item.title }} {{ item.title }}
<div class="d-lg-none text-muted"> <div class="d-lg-none text-muted">
<small>{{ item.artist }}</small> <small>{{ item.artist }}</small>
@ -50,7 +51,7 @@
</td> </td>
<td v-if="!noArtist" class="d-none d-lg-table-cell"> <td v-if="!noArtist" class="d-none d-lg-table-cell">
<template v-if="item.artistId"> <template v-if="item.artistId">
<router-link :to="{name: 'artist', params: {id: item.artistId}}"> <router-link :to="{name: 'artist', params: {id: item.artistId}}" @click.native.stop>
{{ item.artist }} {{ item.artist }}
</router-link> </router-link>
</template> </template>
@ -59,7 +60,7 @@
</template> </template>
</td> </td>
<td v-if="!noAlbum" class="d-none d-md-table-cell"> <td v-if="!noAlbum" class="d-none d-md-table-cell">
<router-link :to="{name: 'album', params: {id: item.albumId}}"> <router-link :to="{name: 'album', params: {id: item.albumId}}" @click.native.stop>
{{ item.album }} {{ item.album }}
</router-link> </router-link>
</td> </td>