feat(front): add widget buttons

This commit is contained in:
Ciarán Ainsworth 2023-11-12 17:21:37 +01:00
parent faa0d39998
commit 1cca30a775
No known key found for this signature in database
4 changed files with 28 additions and 16 deletions

View File

@ -6,6 +6,8 @@ import { useStore } from '~/store'
import axios from 'axios' import axios from 'axios'
import { FwButton } from '@funkwhale/ui'
import AlbumCard from '~/components/audio/album/Card.vue' import AlbumCard from '~/components/audio/album/Card.vue'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
@ -107,13 +109,14 @@ watch(
</slot> </slot>
<template v-if="nextPage"> <template v-if="nextPage">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<button <fw-button
v-if="nextPage" v-if="nextPage"
:class="['ui', 'basic', 'button']" outline
color="secondary"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ $t('components.audio.album.Widget.button.more') }} {{ $t('components.audio.album.Widget.button.more') }}
</button> </fw-button>
</template> </template>
</div> </div>
</template> </template>

View File

@ -8,6 +8,8 @@ import axios from 'axios'
import ArtistCard from '~/components/audio/artist/Card.vue' import ArtistCard from '~/components/audio/artist/Card.vue'
import { FwButton } from '@funkwhale/ui'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
interface Props { interface Props {
@ -103,13 +105,14 @@ watch(
</slot> </slot>
<template v-if="nextPage"> <template v-if="nextPage">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<button <fw-button
v-if="nextPage" v-if="nextPage"
:class="['ui', 'basic', 'button']" outline
color="secondary"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ $t('components.audio.artist.Widget.button.more') }} {{ $t('components.audio.artist.Widget.button.more') }}
</button> </fw-button>
</template> </template>
</div> </div>
</template> </template>

View File

@ -11,6 +11,8 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
import PlayButton from '~/components/audio/PlayButton.vue' import PlayButton from '~/components/audio/PlayButton.vue'
import TagsList from '~/components/tags/List.vue' import TagsList from '~/components/tags/List.vue'
import { FwButton } from '@funkwhale/ui'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
interface Events { interface Events {
@ -211,12 +213,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
</div> </div>
<template v-if="nextPage"> <template v-if="nextPage">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<button <fw-button
:class="['ui', 'basic', 'button']" outline
color="secondary"
@click="fetchData(nextPage as string)" @click="fetchData(nextPage as string)"
> >
{{ $t('components.audio.track.Widget.button.more') }} {{ $t('components.audio.track.Widget.button.more') }}
</button> </fw-button>
</template> </template>
</div> </div>
</template> </template>

View File

@ -8,6 +8,8 @@ import axios from 'axios'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
import { FwButton } from '@funkwhale/ui'
import PlaylistCard from '~/components/playlists/Card.vue' import PlaylistCard from '~/components/playlists/Card.vue'
interface Props { interface Props {
@ -80,24 +82,25 @@ watch(
<i class="list icon" /> <i class="list icon" />
{{ $t('components.playlists.Widget.placeholder.noPlaylists') }} {{ $t('components.playlists.Widget.placeholder.noPlaylists') }}
</div> </div>
<button <fw-button
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
class="ui success icon labeled button" color="primary"
icon="bi-list-task"
@click="$store.commit('playlists/chooseTrack', null)" @click="$store.commit('playlists/chooseTrack', null)"
> >
<i class="list icon" />
{{ $t('components.playlists.Widget.button.create') }} {{ $t('components.playlists.Widget.button.create') }}
</button> </fw-button>
</div> </div>
<template v-if="nextPage"> <template v-if="nextPage">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<button <fw-button
v-if="nextPage" v-if="nextPage"
:class="['ui', 'basic', 'button']" outline
color="secondary"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ $t('components.playlists.Widget.button.more') }} {{ $t('components.playlists.Widget.button.more') }}
</button> </fw-button>
</template> </template>
</div> </div>
</template> </template>