From f9edbd9d7a26d437854191110ae9e9137ab90902 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 20 Mar 2019 20:34:07 +0100
Subject: [PATCH] Fix #766: Added title on hover for truncated content

---
 changes/changelog.d/766.enhancement              |  1 +
 front/src/components/Sidebar.vue                 |  6 ++++--
 front/src/components/audio/album/Card.vue        |  4 ++--
 front/src/components/audio/artist/Card.vue       |  2 +-
 front/src/components/audio/track/Row.vue         | 10 +++++-----
 front/src/components/playlists/PlaylistModal.vue |  2 +-
 6 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 changes/changelog.d/766.enhancement

diff --git a/changes/changelog.d/766.enhancement b/changes/changelog.d/766.enhancement
new file mode 100644
index 000000000..7aca9fb1c
--- /dev/null
+++ b/changes/changelog.d/766.enhancement
@@ -0,0 +1 @@
+Added title on hover for truncated content (#766)
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 3a5bf2db8..8c44d6041 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -135,9 +135,11 @@
                   <img class="ui mini image" v-else src="../assets/audio/default-cover.png">
               </td>
               <td colspan="4">
-                  <button class="title reset ellipsis" :aria-label="labels.selectTrack">
+                  <button class="title reset ellipsis" :title="track.title" :aria-label="labels.selectTrack">
                     <strong>{{ track.title }}</strong><br />
-                    {{ track.artist.name }}
+                    <span>
+                      {{ track.artist.name }}
+                    </span>
                   </button>
               </td>
               <td>
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 8cc9dcf6c..258b0f9d1 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -10,7 +10,7 @@
         </div>
         <div class="meta">
           <span>
-            <router-link tag="span" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
+            <router-link :title="album.artist.name" tag="span" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
               <span v-translate="{artist: album.artist.name}" :translate-params="{artist: album.artist.name}">By %{ artist }</span>
             </router-link>
           </span><span class="time" v-if="album.release_date">– {{ album.release_date | year }}</span>
@@ -24,7 +24,7 @@
                 </td>
                 <td class="content-cell" colspan="5">
                   <track-favorite-icon :track="track"></track-favorite-icon>
-                  <router-link class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
+                  <router-link :title="track.title" class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
                     <template v-if="track.position">
                       {{ track.position }}.
                     </template>
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index 1876c42c0..d25592854 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -15,7 +15,7 @@
                   <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
                 </td>
                 <td colspan="4">
-                  <router-link class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">
+                  <router-link :title="album.title" class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">
                     <strong>{{ album.title }}</strong>
                   </router-link><br />
                   {{ album.tracks_count }} tracks
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index d3b7dc734..e391977f3 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -8,7 +8,7 @@
       <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
     </td>
     <td colspan="6">
-      <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
+      <router-link class="track" :title="track.title" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
         <template v-if="displayPosition && track.position">
           {{ track.position }}.
         </template>
@@ -16,21 +16,21 @@
       </router-link>
     </td>
     <td colspan="4">
-      <router-link v-if="track.artist.id === albumArtist.id" class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
+      <router-link v-if="track.artist.id === albumArtist.id" :title="track.artist.name" class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
         {{ track.artist.name }}
       </router-link>
       <template v-else>
-        <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: albumArtist.id }}">
+        <router-link class="artist discrete link" :title="albumArtist.name" :to="{name: 'library.artists.detail', params: {id: albumArtist.id }}">
           {{ albumArtist.name }}
         </router-link>
          /
-         <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
+         <router-link class="artist discrete link" :title="track.artist.name" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
           {{ track.artist.name }}
         </router-link>
       </template>
     </td>
     <td colspan="4">
-      <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
+      <router-link class="album discrete link" :title="track.album.title" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
         {{ track.album.title }}
       </router-link>
     </td>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 7c4dbbf38..7d44f0e19 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -42,7 +42,7 @@
                   class="ui icon basic small button"
                   :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"><i class="ui pencil icon"></i></router-link>
               </td>
-              <td>
+              <td :title="playlist.name">
                 <router-link :to="{name: 'library.playlists.detail', params: {id: playlist.id }}">{{ playlist.name }}</router-link></td>
               <td><human-date :date="playlist.modification_date"></human-date></td>
               <td>{{ playlist.tracks_count }}</td>