Verified Commit eefb500f authored by Eliot Berriot's avatar Eliot Berriot 💬

Fix #725: Merged artist/album buttons with title text on artist and album pages

parent a82fb45c
Merged artist/album buttons with title text on artist and album pages (#725)
......@@ -93,6 +93,18 @@ export default {
handler: this.incrementNotificationCountInSidebar
})
},
mounted () {
let self = this
// slight hack to allow use to have internal links in <translate> tags
// while preserving router behaviour
document.documentElement.addEventListener('click', function (event) {
if (!event.target.matches('a.internal')) return;
self.$router.push(event.target.getAttribute('href'))
event.preventDefault();
}, false);
},
destroyed () {
this.$store.commit('ui/removeWebsocketEventHandler', {
eventName: 'inbox.item_added',
......
......@@ -12,11 +12,6 @@
{{ album.title }}
<div v-html="subtitle"></div>
</div>
<div class="ui buttons">
<router-link class="ui button" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
<translate :translate-context="'Content/*/Button.Label/Name'">Artist page</translate>
</router-link>
</div>
</h2>
<div class="ui hidden divider"></div>
<play-button class="orange" :tracks="album.tracks">
......@@ -181,8 +176,9 @@ export default {
)
},
subtitle () {
let msg = this.$npgettext('Content/Album/Header.Title', 'Album containing %{ count } track, by %{ artist }', 'Album containing %{ count } tracks, by %{ artist }', this.album.tracks.length)
return this.$gettextInterpolate(msg, {count: this.album.tracks.length, artist: this.album.artist.name})
let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.album.artist.id }})
let msg = this.$npgettext('Content/Album/Header.Title', 'Album containing %{ count } track, by <a class="internal" href="%{ artistUrl }">%{ artist }</a>', 'Album containing %{ count } tracks, by <a class="internal" href="%{ artistUrl }">%{ artist }</a>', this.album.tracks.length)
return this.$gettextInterpolate(msg, {count: this.album.tracks.length, artist: this.album.artist.name, artistUrl: route.location.path})
}
},
watch: {
......
......@@ -15,24 +15,9 @@
<div class="content">
{{ track.title }}
<div class="sub header">
<translate :translate-context="'Content/Track/Paragraph'"
:translate-params="{album: track.album.title, artist: track.artist.name}"
>From album %{ album } by %{ artist }</translate>
</div>
<br>
<div class="ui basic buttons">
<router-link
class="ui button"
:to="{name: 'library.albums.detail', params: {id: track.album.id }}"
>
<translate :translate-context="'Content/Track/Button.Label'">Album page</translate>
</router-link>
<router-link
class="ui button"
:to="{name: 'library.artists.detail', params: {id: track.artist.id }}"
>
<translate :translate-context="'Content/Track/Button.Label'">Artist page</translate>
</router-link>
<div :translate-context="'Content/Track/Paragraph'"
v-translate="{album: track.album.title, artist: track.artist.name, albumUrl: albumUrl, artistUrl: artistUrl}"
>From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a></div>
</div>
</div>
</h2>
......@@ -299,6 +284,14 @@ export default {
cover() {
return null
},
albumUrl () {
let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }})
return route.location.path
},
artistUrl () {
let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.track.artist.id }})
return route.location.path
},
headerStyle() {
if (!this.cover) {
return ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment