fix(front): Trackdetail page top buttons
This commit is contained in:
parent
d599b13ba5
commit
37c86f66bc
|
@ -44,13 +44,15 @@ const title = computed(() => isFavorite.value
|
||||||
{{ t('components.favorites.TrackFavoriteIcon.button.add') }}
|
{{ t('components.favorites.TrackFavoriteIcon.button.add') }}
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
<button
|
<Button
|
||||||
v-else
|
v-else
|
||||||
|
round
|
||||||
|
outline
|
||||||
|
icon="bi-heart-fill"
|
||||||
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
|
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
|
||||||
:aria-label="title"
|
:aria-label="title"
|
||||||
:title="title"
|
:title="title"
|
||||||
@click.stop="store.dispatch('favorites/toggle', track.id)"
|
@click.stop="store.dispatch('favorites/toggle', track.id)"
|
||||||
>
|
>
|
||||||
<i :class="['bi', 'bi-heart-fill', {'pink': isFavorite}, 'basic', 'icon']" />
|
</Button>
|
||||||
</button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { useStore } from '~/store'
|
import { useStore } from '~/store'
|
||||||
|
|
||||||
|
import Button from '~/components/ui/Button.vue'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
track?: Track | QueueTrack
|
track?: Track | QueueTrack
|
||||||
button?: boolean
|
button?: boolean
|
||||||
|
@ -27,21 +29,23 @@ const labels = computed(() => ({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button
|
<Button
|
||||||
v-if="button"
|
v-if="button"
|
||||||
:class="['ui', 'icon', 'labeled', 'button']"
|
:class="['ui', 'icon', 'labeled', 'button']"
|
||||||
@click.stop="store.commit('playlists/chooseTrack', track)"
|
@click.stop="store.commit('playlists/chooseTrack', track)"
|
||||||
>
|
>
|
||||||
<i class="list icon" />
|
<i class="list icon" />
|
||||||
{{ t('components.playlists.TrackPlaylistIcon.button.add') }}
|
{{ t('components.playlists.TrackPlaylistIcon.button.add') }}
|
||||||
</button>
|
</Button>
|
||||||
<button
|
<Button
|
||||||
v-else
|
v-else
|
||||||
|
round
|
||||||
|
outline
|
||||||
|
icon="bi-list"
|
||||||
:class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
|
:class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
|
||||||
:aria-label="labels.addToPlaylist"
|
:aria-label="labels.addToPlaylist"
|
||||||
:title="labels.addToPlaylist"
|
:title="labels.addToPlaylist"
|
||||||
@click.stop="store.commit('playlists/chooseTrack', track)"
|
@click.stop="store.commit('playlists/chooseTrack', track)"
|
||||||
>
|
>
|
||||||
<i :class="['list', 'basic', 'icon']" />
|
</Button>
|
||||||
</button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue