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

Merge branch 'playlist-detail-spacing' into 'develop' 

Fix playlist header button spacing

See merge request funkwhale/funkwhale!1271
This commit is contained in:
Georg Krause 2021-02-21 22:00:14 +01:00
parent f0fc45ace2 22ca6e0175
commit b713d21a86
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">