Improve music playlist rendering.

This change:
* bolds currently playing song in playlist;
* forces song names in playlist to one line, ellipsize after (...);
* adds jQuery tipsies to get the whole song name, along with the
  artist name, and the album the song is coming from.

No need to split this changeset into three different ones for the sake
of atomicity.

Two first elements were on the priorities / bug list available there:
   http://gitorious.org/owncloud/pages/Home

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index a6738058be3fe4f868b3ee1adbd5d678931fa86a..41ade44a66f15ae3488c948632e9755a5792eb3c 100644 (file)
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -22,11 +22,11 @@ div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
 #collection li.album,#collection li.song { margin-left:3em; }
 #leftcontent img.remove { display:none; float:right; cursor:pointer; }
 #leftcontent li:hover img.remove { display:inline; }
-#leftcontent li {white-space: normal; }
+#leftcontent li div.label { float: left; width: 200px; overflow: hidden; text-overflow: ellipsis; }
 #collection li button { float:right; }
 #collection li,#playlist li { list-style-type:none; }
 .template { display:none; }
-.collection_playing { background:#eee; }
+.collection_playing { background:#eee; font-weight: bold; }
 
 #collection li { padding-right:10px; }
 #searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }

diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js
index 57180b3be7b6323742105a896ad0e043f58e35fe..089065989aef2c3ba9f163ede2190a31d0357f7b 100644 (file)
--- a/apps/media/js/playlist.js
+++ b/apps/media/js/playlist.js
@@ -1,11 +1,23 @@
 PlayList.render=function(){
        $('#playlist').show();
+
+       /*
+        * We should not empty() PlayList.parent() but thorougly manage its
+        * elements instead because some code might be attached to those.
+        * JQuery tipsies are one of them. The following line make sure they
+        * are all removed before we delete the associated <li/>.
+        */
+       $(".tipsy").remove();
+
        PlayList.parent.empty();
        for(var i=0;i<PlayList.items.length;i++){
                var item=PlayList.items[i];
                var li=$('<li/>');
-               li.append(item.name);
-                li.attr('class', 'jp-playlist-' + i);
+               li.attr('class', 'jp-playlist-' + i);
+               li.attr('title', item.artist + ' - ' + item.name + '<br/>(' + item.album + ')');
+               var div = $('<div class="label">' + item.name + '</div>');
+               li.append(div);
+               $('.jp-playlist-' + i).tipsy({gravity:'w', fade:true, live:true, html:true});
                var img=$('<img class="remove svg action" src="'+OC.imagePath('core','actions/delete')+'"/>');
                img.click(function(event){
                        event.stopPropagation();