From 55cb7fc25dc99f7e6aa917249f4577c3c30eecae Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 16 Jul 2019 14:04:19 +0200
Subject: [PATCH] See #432: display tags on artist, album and track pages
---
front/src/components/library/AlbumBase.vue | 5 ++-
front/src/components/library/ArtistBase.vue | 6 +++-
front/src/components/library/TrackBase.vue | 6 +++-
front/src/components/tags/List.vue | 39 +++++++++++++++++++++
4 files changed, 53 insertions(+), 3 deletions(-)
create mode 100644 front/src/components/tags/List.vue
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 016be2c3..083e5547 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -13,6 +13,7 @@
<div v-html="subtitle"></div>
</div>
</h2>
+ <tags-list v-if="object.tags && object.tags.length > 0" :tags="object.tags"></tags-list>
<div class="ui hidden divider"></div>
<div class="header-buttons">
@@ -103,6 +104,7 @@ import backend from "@/audio/backend"
import PlayButton from "@/components/audio/PlayButton"
import EmbedWizard from "@/components/audio/EmbedWizard"
import Modal from '@/components/semantic/Modal'
+import TagsList from "@/components/tags/List"
const FETCH_URL = "albums/"
@@ -123,7 +125,8 @@ export default {
components: {
PlayButton,
EmbedWizard,
- Modal
+ Modal,
+ TagsList,
},
data() {
return {
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 3c21f603..5472ee30 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -21,6 +21,7 @@
</div>
</div>
</h2>
+ <tags-list v-if="object.tags && object.tags.length > 0" :tags="object.tags"></tags-list>
<div class="ui hidden divider"></div>
<div class="header-buttons">
<div class="ui buttons">
@@ -123,17 +124,20 @@ import PlayButton from "@/components/audio/PlayButton"
import EmbedWizard from "@/components/audio/EmbedWizard"
import Modal from '@/components/semantic/Modal'
import RadioButton from "@/components/radios/Button"
+import TagsList from "@/components/tags/List"
const FETCH_URL = "albums/"
+
export default {
props: ["id"],
components: {
PlayButton,
EmbedWizard,
Modal,
- RadioButton
+ RadioButton,
+ TagsList,
},
data() {
return {
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 2f3cc51a..32942958 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -17,6 +17,8 @@
<div class="sub header" v-html="subtitle"></div>
</div>
</h2>
+ <tags-list v-if="track.tags && track.tags.length > 0" :tags="track.tags"></tags-list>
+ <div class="ui hidden divider"></div>
<div class="header-buttons">
<div class="ui buttons">
<play-button class="orange" :track="track">
@@ -121,6 +123,7 @@ import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon"
import Modal from '@/components/semantic/Modal'
import EmbedWizard from "@/components/audio/EmbedWizard"
+import TagsList from "@/components/tags/List"
const FETCH_URL = "tracks/"
@@ -131,7 +134,8 @@ export default {
TrackPlaylistIcon,
TrackFavoriteIcon,
Modal,
- EmbedWizard
+ EmbedWizard,
+ TagsList,
},
data() {
return {
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
new file mode 100644
index 00000000..9ffb0f1f
--- /dev/null
+++ b/front/src/components/tags/List.vue
@@ -0,0 +1,39 @@
+<template>
+ <div>
+ <router-link
+ :to="{name: 'library.tags.detail', params: {id: tag}}"
+ class="ui circular hashtag label"
+ v-for="tag in toDisplay"
+ :key="tag">
+ #{{ tag }}
+ </router-link>
+ <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted teal label" v-if="toDisplay.length < tags.length">
+ <translate translate-context="Content/*/Button/Label/Verb" :translate-params="{count: tags.length - toDisplay.length}" :translate-n="tags.length - toDisplay.length" translate-plural="Show %{ count } more tags">Show 1 more tag</translate>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ props: ['tags'],
+ data () {
+ return {
+ limit: 5,
+ honorLimit: true,
+ }
+ },
+ computed: {
+ toDisplay () {
+ if (!this.honorLimit) {
+ return this.tags
+ }
+ return (this.tags || []).slice(0, this.limit)
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.ui.circular.label {
+ padding-left: 1em !important;
+ padding-right: 1em !important;
+}
+</style>
--
GitLab