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

Fix playlist header button spacing 

Previously there was no spacing between the "Play all" and "Edit"
button in the playlist view. This fixes the issue by putting all
header buttons into their own "ui buttons" div similar to the
ArtistBase.vue component.
This commit is contained in:
Erik Duxstad 2021-02-20 16:45:18 -05:00
parent b91c48a6ce
commit 22ca6e0175
2 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/changelog.d/1271.enhancement Normal file
View File

@ -0,0 +1 @@
Add spacing after "Play all" button in playlist view (!1271)

65
front/src/views/playlists/Detail.vue
View File

@ -15,40 +15,46 @@
:translate-n="playlist.tracks_count" :translate-n="playlist.tracks_count"
:translate-params="{count: playlist.tracks_count, username: playlist.user.username}" :translate-params="{count: playlist.tracks_count, username: playlist.user.username}"
translate-context="Content/Playlist/Header.Subtitle"> translate-context="Content/Playlist/Header.Subtitle">
Playlist containing %{ count } track, by %{ username } Playlist containing %{ count } track, by %{ username }
</translate><br> </translate><br>
<duration :seconds="playlist.duration" /> <duration :seconds="playlist.duration" />
</div> </div>
</div> </div>
</h2> </h2>
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<play-button class="vibrant" :is-playable="playlist.is_playable" :tracks="tracks"><translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate></play-button> <div class="header-buttons">
<button <div class="ui buttons">
class="ui icon labeled button" <play-button class="vibrant" :is-playable="playlist.is_playable" :tracks="tracks"><translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate></play-button>
v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" </div>
@click="edit = !edit"> <div class="ui buttons">
<i class="pencil icon"></i> <button
<template v-if="edit"><translate translate-context="Content/Playlist/Button.Label/Verb">Stop Editing</translate></template> class="ui icon labeled button"
<template v-else><translate translate-context="Content/*/Button.Label/Verb">Edit</translate></template> v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
</button> @click="edit = !edit">
<button <i class="pencil icon"></i>
class="ui icon labeled button" <template v-if="edit"><translate translate-context="Content/Playlist/Button.Label/Verb">Stop Editing</translate></template>
v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" <template v-else><translate translate-context="Content/*/Button.Label/Verb">Edit</translate></template>
@click="showEmbedModal = !showEmbedModal"> </button>
<i class="code icon"></i> </div>
<translate translate-context="Content/*/Button.Label/Verb">Embed</translate> <div class="ui buttons">
</button> <button
class="ui icon labeled button"
<dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="ui labeled danger icon button" :action="deletePlaylist"> v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
<i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate> @click="showEmbedModal = !showEmbedModal">
<p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title/Call to action" :translate-params="{playlist: playlist.name}"> <i class="code icon"></i>
Do you want to delete the playlist "%{ playlist }"? <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
</p> </button>
<p slot="modal-content"><translate translate-context="Popup/Playlist/Paragraph">This will completely delete this playlist and cannot be undone.</translate></p> <dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="ui labeled danger icon button" :action="deletePlaylist">
<div slot="modal-confirm"><translate translate-context="Popup/Playlist/Button.Label/Verb">Delete playlist</translate></div> <i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
</dangerous-button> <p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title/Call to action" :translate-params="{playlist: playlist.name}">
</div> Do you want to delete the playlist "%{ playlist }"?
<modal v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" :show.sync="showEmbedModal"> </p>
<p slot="modal-content"><translate translate-context="Popup/Playlist/Paragraph">This will completely delete this playlist and cannot be undone.</translate></p>
<div slot="modal-confirm"><translate translate-context="Popup/Playlist/Button.Label/Verb">Delete playlist</translate></div>
</dangerous-button>
</div>
</div>
<modal v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" :show.sync="showEmbedModal">
<h4 class="header"> <h4 class="header">
<translate translate-context="Popup/Album/Title/Verb">Embed this playlist on your website</translate> <translate translate-context="Popup/Album/Title/Verb">Embed this playlist on your website</translate>
</h4> </h4>
@ -62,7 +68,8 @@
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</button> </button>
</div> </div>
</modal> </modal>
</div>
</section> </section>
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<template v-if="edit"> <template v-if="edit">