fix(front): bootstrap icon for track favourite
This commit is contained in:
parent
908ad0c335
commit
d599b13ba5
|
@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
|
|||
import { useStore } from '~/store'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
interface Props {
|
||||
track?: QueueTrack | Track
|
||||
button?: boolean
|
||||
|
@ -29,19 +31,19 @@ const title = computed(() => isFavorite.value
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
<Button
|
||||
v-if="button"
|
||||
icon="bi-heart-fill"
|
||||
:class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']"
|
||||
@click.stop="store.dispatch('favorites/toggle', track.id)"
|
||||
>
|
||||
<i class="heart icon" />
|
||||
<span v-if="isFavorite">
|
||||
{{ t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ t('components.favorites.TrackFavoriteIcon.button.add') }}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
<button
|
||||
v-else
|
||||
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
|
||||
|
@ -49,6 +51,6 @@ const title = computed(() => isFavorite.value
|
|||
:title="title"
|
||||
@click.stop="store.dispatch('favorites/toggle', track.id)"
|
||||
>
|
||||
<i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']" />
|
||||
<i :class="['bi', 'bi-heart-fill', {'pink': isFavorite}, 'basic', 'icon']" />
|
||||
</button>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue