New icons for 'PLAY' and 'PLAY_ALL' action.

README.rst

@@ -87,6 +87,8 @@ v2.3.0 (UNRELEASED)
   (Addresses: `#184 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/184>`_).
 - Optimized rendering of large lists of tracks to make UI more responsive.
 - Added 'Folder' FontAwesome icon on the Browse pane for browsing the filesystem.
+- New icons for 'PLAY' and 'PLAY_ALL' actions. In general, icons with an empty background will perform an action only
+  on the selected track, while icons with a filled background will apply the action to all tracks in the list.
 
 **Fixes**
 

mopidy_musicbox_webclient/static/css/webclient.css

@@ -300,6 +300,11 @@
     line-height: 100%;
 }
 
+.moreBtn i {
+    color: #ddd;
+    text-size: initial;
+}
+
 .backnav {
     background-color: #ccc !important;
 }
@@ -395,11 +400,11 @@
 }
 
 .ui-icon-playAll:after {
-    content: '\f050';
+    content: '\f144';
 }
 
 .ui-icon-play:after {
-    content: '\f04b';
+    content: '\f01d';
 }
 
 .ui-icon-playNext:after {

mopidy_musicbox_webclient/static/index.html

@@ -115,12 +115,12 @@
 <div data-role="popup" data-transition="none" data-theme="b" id="popupTracks">
     <div data-role="collapsible-set">
         <ul data-role="listview" data-icon="false" id="popupTracksLv">
-            <li data-icon="playAll" data-iconshadow="false">
-                <a href="#" onclick="return controls.playTracks(PLAY_ALL, mopidy);">Play All</a>
-            </li>
             <li data-icon="play">
                 <a href="#" onclick="return controls.playTracks(PLAY_NOW, mopidy);">Play <span class="popupTrackName"></span></a>
             </li>
+            <li data-icon="playAll" data-iconshadow="false">
+                <a href="#" onclick="return controls.playTracks(PLAY_ALL, mopidy);">Play All</a>
+            </li>
             <li data-icon="playNext" class="addqueue">
                 <a href="#" onclick="return controls.playTracks(PLAY_NEXT, mopidy);">Play Track Next</a>
             </li>

mopidy_musicbox_webclient/static/js/controls.js

@@ -117,9 +117,9 @@
 
             switch (parseInt(action)) {
                 case PLAY_ALL:
-                    return 'fa fa-fast-forward'
+                    return 'fa fa-play-circle'
                 case PLAY_NOW:
-                    return 'fa fa-play'
+                    return 'fa fa-play-circle-o'
                 case PLAY_NEXT:
                     return 'fa fa-level-down'
                 case ADD_THIS_BOTTOM:

mopidy_musicbox_webclient/static/js/functionsvars.js

@@ -216,7 +216,7 @@ function renderSongLi (previousTrack, track, nextTrack, uri, tlid, target, curre
     html +=
         '<li class="song albumli" id="' + getjQueryID(target, track.uri) + '" tlid="' + tlid + '">' +
         '<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + track.uri + tlidParameter + '\');">' +
-        '<i class="fa fa-ellipsis-v"></i></a>' +
+        '<i class="fa fa-play-circle"></i></a>' +
         '<a href="#" onclick="' + onClick + '"><h1><i class="' + getMediaClass(track.uri) + '"></i> ' + track.name + '</h1>'
 
     if (listLength === 1 || (!hasSameAlbum(previousTrack, track) && !hasSameAlbum(track, nextTrack))) {

mopidy_musicbox_webclient/static/mb.appcache

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2016-04-27:v1
+# 2016-05-05:v1
 
 NETWORK:
 *

tests/js/test_controls.js

@@ -217,8 +217,8 @@ describe('controls', function () {
 
     describe('#getIconForAction()', function () {
         it('should return correct FontAwesome class for each tracklist action', function () {
-            assert.equal(controls.getIconForAction(PLAY_ALL), 'fa fa-fast-forward')
+            assert.equal(controls.getIconForAction(PLAY_ALL), 'fa fa-play-circle')
-            assert.equal(controls.getIconForAction(PLAY_NOW), 'fa fa-play')
+            assert.equal(controls.getIconForAction(PLAY_NOW), 'fa fa-play-circle-o')
             assert.equal(controls.getIconForAction(PLAY_NEXT), 'fa fa-level-down')
             assert.equal(controls.getIconForAction(ADD_THIS_BOTTOM), 'fa fa-plus-square-o')
             assert.equal(controls.getIconForAction(ADD_ALL_BOTTOM), 'fa fa-plus-square')
@@ -229,11 +229,11 @@ describe('controls', function () {
         })
 
         it('should handle action identifier strings in addition to integers', function () {
-            assert.equal(controls.getIconForAction('0'), 'fa fa-play')
+            assert.equal(controls.getIconForAction('0'), 'fa fa-play-circle-o')
         })
 
         it('should use default tracklist action if no parameter is provided', function () {
-            assert.equal(controls.getIconForAction(), 'fa fa-fast-forward')
+            assert.equal(controls.getIconForAction(), 'fa fa-play-circle')
         })
     })