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-params="{count: playlist.tracks_count, username: playlist.user.username}"
translate-context="Content/Playlist/Header.Subtitle">
Playlist containing %{ count } track, by %{ username }
Playlist containing %{ count } track, by %{ username }
</translate><br>
<duration :seconds="playlist.duration" />
</div>
</div>
</h2>
<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>
<button
class="ui icon labeled button"
v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
@click="edit = !edit">
<i class="pencil icon"></i>
<template v-if="edit"><translate translate-context="Content/Playlist/Button.Label/Verb">Stop Editing</translate></template>
<template v-else><translate translate-context="Content/*/Button.Label/Verb">Edit</translate></template>
</button>
<button
class="ui icon labeled button"
v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
@click="showEmbedModal = !showEmbedModal">
<i class="code icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
</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">
<i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
<p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title/Call to action" :translate-params="{playlist: playlist.name}">
Do you want to delete the playlist "%{ playlist }"?
</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>
<modal v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" :show.sync="showEmbedModal">
<div class="header-buttons">
<div class="ui buttons">
<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>
<div class="ui buttons">
<button
class="ui icon labeled button"
v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
@click="edit = !edit">
<i class="pencil icon"></i>
<template v-if="edit"><translate translate-context="Content/Playlist/Button.Label/Verb">Stop Editing</translate></template>
<template v-else><translate translate-context="Content/*/Button.Label/Verb">Edit</translate></template>
</button>
</div>
<div class="ui buttons">
<button
class="ui icon labeled button"
v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
@click="showEmbedModal = !showEmbedModal">
<i class="code icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
</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">
<i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
<p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title/Call to action" :translate-params="{playlist: playlist.name}">
Do you want to delete the playlist "%{ playlist }"?
</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">
<translate translate-context="Popup/Album/Title/Verb">Embed this playlist on your website</translate>
</h4>
@ -62,7 +68,8 @@
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</button>
</div>
</modal>
</modal>
</div>
</section>
<section class="ui vertical stripe segment">
<template v-if="edit">