MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(front): bootstrap icon for track favourite

This commit is contained in:
ArneBo 2025-01-16 17:24:32 +01:00
parent 908ad0c335
commit d599b13ba5
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/components/favorites/TrackFavoriteIcon.vue
View File

@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
import { computed } from 'vue' import { computed } from 'vue'
import Button from '~/components/ui/Button.vue'
interface Props { interface Props {
track?: QueueTrack | Track track?: QueueTrack | Track
button?: boolean button?: boolean
@ -29,19 +31,19 @@ const title = computed(() => isFavorite.value
</script> </script>
<template> <template>
<button <Button
v-if="button" v-if="button"
icon="bi-heart-fill"
:class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']"
@click.stop="store.dispatch('favorites/toggle', track.id)" @click.stop="store.dispatch('favorites/toggle', track.id)"
> >
<i class="heart icon" />
<span v-if="isFavorite"> <span v-if="isFavorite">
{{ t('components.favorites.TrackFavoriteIcon.label.inFavorites') }} {{ t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
</span> </span>
<span v-else> <span v-else>
{{ t('components.favorites.TrackFavoriteIcon.button.add') }} {{ t('components.favorites.TrackFavoriteIcon.button.add') }}
</span> </span>
</button> </Button>
<button <button
v-else v-else
: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']"
@ -49,6 +51,6 @@ const title = computed(() => isFavorite.value
:title="title" :title="title"
@click.stop="store.dispatch('favorites/toggle', track.id)" @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> </button>
</template> </template>