Fixes #87 adds tooltips to track attributes

rwieruch · Feb 11, 2018 · 90dd25f · 90dd25f
1 parent 085bcc5
commit 90dd25f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/src/components/InfoList/index.js b/src/components/InfoList/index.js
@@ -12,7 +12,7 @@ function InfoItem({ infoItem }) {
   );
 
   return (
-    <div className={infoItemClass}>
+    <div className={infoItemClass} title={infoItem.title}>
       <i className={infoItem.className} /> {infoItem.count}
     </div>
   );

diff --git a/src/components/Track/preview.js b/src/components/Track/preview.js
@@ -5,6 +5,7 @@ import Permalink from '../../components/Permalink';
 import InfoList from '../../components/InfoList';
 import Actions from '../../components/HoverActions';
 import { isSameTrackAndPlaying, isSameTrack } from '../../services/player';
+import { COMMENTS, LIKES, PLAYBACK } from "../../constants/trackAttributes";
 
 function TrackPreview({
   activity,
@@ -34,15 +35,18 @@ function TrackPreview({
   const information = [
     {
       className: 'fa fa-play',
-      count: playback_count
+      count: playback_count,
+      title: PLAYBACK
     },
     {
       className: 'fa fa-heart',
-      count: favoritings_count
+      count: favoritings_count,
+      title: LIKES
     },
     {
       className: 'fa fa-comment',
-      count: comment_count
+      count: comment_count,
+      title: COMMENTS
     }
   ];
 

diff --git a/src/components/Track/stream.js b/src/components/Track/stream.js
@@ -12,6 +12,7 @@ import InfoList from '../../components/InfoList';
 import { durationFormat, fromNow } from '../../services/track';
 import { getPluralizedWithCount } from '../../services/pluralize';
 import { isSameTrackAndPlaying, isSameTrack } from '../../services/player';
+import * as attributes from "../../constants/trackAttributes";
 
 function Duration({ duration, isActive }) {
   const durationClass = classNames({
@@ -75,25 +76,30 @@ function TrackStream({
     {
       className: 'fa fa-play',
       count: playback_count,
-      activeSort: activeSortType === sortTypes.SORT_PLAYS
+      activeSort: activeSortType === sortTypes.SORT_PLAYS,
+      title: attributes.PLAYBACK
     },
     {
       className: 'fa fa-heart',
       count: likes_count,
-      activeSort: activeSortType === sortTypes.SORT_FAVORITES
+      activeSort: activeSortType === sortTypes.SORT_FAVORITES,
+      title: attributes.LIKES
     },
     {
       className: 'fa fa-retweet',
       count: reposts_count,
-      activeSort: activeSortType === sortTypes.SORT_REPOSTS
+      activeSort: activeSortType === sortTypes.SORT_REPOSTS,
+      title: attributes.REPOST
     },
     {
       className: 'fa fa-comment',
-      count: comment_count
+      count: comment_count,
+      title: attributes.COMMENTS
     },
     {
       className: 'fa fa-download',
-      count: download_count
+      count: download_count,
+      title: attributes.DOWNLOADS
     }
   ];
 

diff --git a/src/constants/trackAttributes.js b/src/constants/trackAttributes.js
@@ -0,0 +1,5 @@
+export const PLAYBACK = 'Playbacks';
+export const REPOST = 'Reposts';
+export const LIKES = 'Likes';
+export const COMMENTS = 'Comments';
+export const DOWNLOADS = 'Downloads';