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

feat(front): add fw-buttons to playlist modal

This commit is contained in:
Ciarán Ainsworth 2023-11-12 21:40:08 +01:00
parent abe2bbbb3e
commit d686b6ced8
No known key found for this signature in database
2 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/components/playlists/Form.vue
View File

@ -6,6 +6,8 @@ import { ref, computed, onMounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
import { FwButton } from '@funkwhale/ui'
import axios from 'axios' import axios from 'axios'
import $ from 'jquery' import $ from 'jquery'
@ -173,8 +175,10 @@ const submit = async () => {
</div> </div>
<div class="field"> <div class="field">
<span id="updatePlaylistLabel" /> <span id="updatePlaylistLabel" />
<button <fw-button
:class="['ui', 'fluid', {'loading': isLoading}, 'button']" class="right floated"
color="primary"
:is-loading="isLoading"
type="submit" type="submit"
> >
<template v-if="playlist"> <template v-if="playlist">
@ -183,7 +187,7 @@ const submit = async () => {
<template v-else> <template v-else>
{{ $t('components.playlists.Form.button.create') }} {{ $t('components.playlists.Form.button.create') }}
</template> </template>
</button> </fw-button>
</div> </div>
</div> </div>
</form> </form>

44
front/src/components/playlists/PlaylistModal.vue
View File

@ -11,6 +11,8 @@ import { useStore } from '~/store'
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { FwButton } from '@funkwhale/ui'
const logger = useLogger() const logger = useLogger()
const store = useStore() const store = useStore()
@ -113,18 +115,19 @@ store.dispatch('playlists/fetchOwn')
<strong>{{ duplicateTrackAddInfo.playlist_name }}</strong> <strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
</i18n-t> </i18n-t>
</p> </p>
<button <fw-button
class="ui small basic cancel button" color="secondary"
outline
@click="showDuplicateTrackAddConfirmation = false" @click="showDuplicateTrackAddConfirmation = false"
> >
{{ $t('components.playlists.PlaylistModal.button.cancel') }} {{ $t('components.playlists.PlaylistModal.button.cancel') }}
</button> </fw-button>
<button <fw-button
class="ui small success button" primary
@click="addToPlaylist(lastSelectedPlaylist, true)" @click="addToPlaylist(lastSelectedPlaylist, true)"
> >
{{ $t('components.playlists.PlaylistModal.button.addDuplicate') }} {{ $t('components.playlists.PlaylistModal.button.addDuplicate') }}
</button> </fw-button>
</div> </div>
<div <div
v-if="errors.length > 0" v-if="errors.length > 0"
@ -184,13 +187,11 @@ store.dispatch('playlists/fetchOwn')
:key="key" :key="key"
> >
<td> <td>
<router-link <fw-button
class="ui icon basic small button" color="secondary"
:to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}" icon="bi-pencil"
> @click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}})"
<i class="ui pencil icon" /> />
<span class="visually-hidden">{{ $t('components.playlists.PlaylistModal.button.edit') }}</span>
</router-link>
</td> </td>
<td> <td>
<router-link <router-link
@ -203,15 +204,16 @@ store.dispatch('playlists/fetchOwn')
<td><human-date :date="playlist.modification_date" /></td> <td><human-date :date="playlist.modification_date" /></td>
<td>{{ playlist.tracks_count }}</td> <td>{{ playlist.tracks_count }}</td>
<td> <td>
<button <fw-button
v-if="track" v-if="track"
class="ui success icon basic small right floated button" class="right floated"
color="primary"
icon="bi-plus"
:title="labels.addToPlaylist" :title="labels.addToPlaylist"
@click.prevent="addToPlaylist(playlist.id, false)" @click.prevent="addToPlaylist(playlist.id, false)"
> >
<i class="plus icon" />
{{ $t('components.playlists.PlaylistModal.button.addTrack') }} {{ $t('components.playlists.PlaylistModal.button.addTrack') }}
</button> </fw-button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -235,9 +237,13 @@ store.dispatch('playlists/fetchOwn')
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <fw-button
color="secondary"
outline
@click="$store.state.playlists.showModal = false"
>
{{ $t('components.playlists.PlaylistModal.button.cancel') }} {{ $t('components.playlists.PlaylistModal.button.cancel') }}
</button> </fw-button>
</div> </div>
</semantic-modal> </semantic-modal>
</template> </template>