diff --git a/changes/changelog.d/725.enhancement b/changes/changelog.d/725.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..4c30ba4274f8212be0954614d7de5021cbee43e6 --- /dev/null +++ b/changes/changelog.d/725.enhancement @@ -0,0 +1 @@ +Merged artist/album buttons with title text on artist and album pages (#725) diff --git a/front/src/App.vue b/front/src/App.vue index e214f2fb4d639c504288329a2249cd085bf6544e..1cc6a2d3cadaa313a7876016a5f33674a7d4f2e7 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -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', diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue index ce6f0abff8af7fc7c1220ac2cced4329c8197002..55190a3d35a68bbe6237f971a05537a8eca558ab 100644 --- a/front/src/components/library/Album.vue +++ b/front/src/components/library/Album.vue @@ -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: { diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue index 0d0e845650007bac8b143cf00d25c12d7faf4eef..66b17d04b1cba7e378a607565736942a634d530e 100644 --- a/front/src/components/library/Track.vue +++ b/front/src/components/library/Track.vue @@ -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 ""