fix(front): Trackdetail page top buttons

This commit is contained in:
ArneBo 2025-01-17 09:54:12 +01:00
parent d599b13ba5
commit 37c86f66bc
2 changed files with 14 additions and 8 deletions

View File

@ -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>

View File

@ -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>