[WIP] Action Menu

poupotte · Mar 22, 2016 · b5489ea · b5489ea
1 parent b905aec
commit b5489ea
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 41 deletions.
diff --git a/app/styles/content.styl b/app/styles/content.styl
@@ -5,45 +5,47 @@ div[role='contentinfo']
     overflow: auto
     margin-bottom: 71px;
 
-    h3
-        font-size: 24px
-        line-height: 0.8
-        height: 31px
-        color: $text-dark
-        display: inline-block
-
-        em
+    div[role='complementary']
+
+        h3
+            font-size: 24px
+            line-height: 0.8
+            height: 31px
+            color: $text-dark
+            display: inline-block
+
+            em
+                color: $text-light
+
+        button
+            padding: 0px 12px
+            height: 32px
+            float: right
+            display: inline-block
+            cursor: pointer
+            font-family: 'Source Sans Pro'
+            font-weight: bold
             color: $text-light
+            background-color: $background-dark
+            border-radius: 2px
+            position: relative
+            padding-left: 32px
+            text-transform: uppercase
+            font-size: 16px
 
-    button
-        padding: 0px 12px
-        height: 32px
-        float: right
-        display: inline-block
-        cursor: pointer
-        font-family: 'Source Sans Pro'
-        font-weight: bold
-        color: $text-light
-        background-color: $background-dark
-        border-radius: 2px
-        position: relative
-        padding-left: 32px
-        text-transform: uppercase
-        font-size: 16px
-
-        svg
-            position: absolute
-            height: 20px
-            left: 9px
-            width: 20px
-            top: 6px
-
-            path
-                fill: #696d78
-                stroke: 2px
-
-    button:active
-        padding-top: 1px
+            svg
+                position: absolute
+                height: 20px
+                left: 9px
+                width: 20px
+                top: 6px
+
+                path
+                    fill: #696d78
+                    stroke: 2px
+
+        button:active
+            padding-top: 1px
 
     table
         width: 100%
@@ -84,6 +86,42 @@ div[role='contentinfo']
                 td
                     white-space: nowrap
                     overflow: hidden
+                    position: relative
+
+            .all
+                #delete-from-upnext
+                    display: none
+
+            .upNext
+                #add-to-upnext
+                    display: none
+
+            .actions
+                height: 41px
+                visibility: hidden
+                position: absolute
+                right: 18px
+                top: 0px
+                button
+                    height: 100%
+                    width: 22px
+                    svg
+                        height: 20px
+                        width: 20px
+                        path
+                            fill: #696d78
+
+                .help
+                    position: absolute
+                    visibility: hidden
+
+                button:hover
+                    .help
+                        visibility: visibile
+
+            tr:hover
+                .actions
+                    visibility: visible
 
             tr:hover
                 background-color: $background-dark
diff --git a/app/views/templates/track.jst b/app/views/templates/track.jst
@@ -1,5 +1,24 @@
 <td class="number"><%- number %></td>
 <td class="title"><%- title %></td>
 <td><%- artist %></td>
-<td><%- album %></td>
+<td><%- album %>
+    <div class="actions">
+        <button id="add-to-upnext">
+            <p class="help">Add To Up Next</p>
+            <svg>
+                <use xlink:href="<%= require('../../assets/icons/add-to-playlist-sm.svg') %>"/>
+            </svg>
+        </button>
+        <button id="delete-from-upnext">
+            <svg>
+                <use xlink:href="<%= require('../../assets/icons/cross-sm.svg') %>"/>
+            </svg>
+        </button>
+        <button id="menu">
+            <svg>
+                <use xlink:href="<%= require('../../assets/icons/more-sm.svg') %>"/>
+            </svg>
+        </button>
+    </div>
+</td>
 <td><%- duration %><td>
diff --git a/app/views/track.js b/app/views/track.js
@@ -11,7 +11,10 @@ const TrackView = Mn.ItemView.extend({
 
     events: {
         'click': 'play',
-        'click .delete': 'delete'
+        'click .delete': 'delete',
+        'click #menu': 'displayMenu',
+        'click #add-to-upnext':'addToUpNext',
+        'click "delete-from-upnext': 'deleteFromUpNext'
     },
 
     modelEvents: {
@@ -24,6 +27,23 @@ const TrackView = Mn.ItemView.extend({
         })
     },
 
+    onRender() {
+        let currentPlaylist = application.currentPlaylist;
+        let type = currentPlaylist ? currentPlaylist.get('tracks').type : 'all'
+        switch (type) { // Can be refactored ?
+            case 'upNext':
+                this.$('.actions').addClass('upNext');
+                break;
+            case 'all':
+                this.$('.actions').addClass('all');
+                break;
+            case 'playlist':
+                this.$('.actions').addClass('playlist');
+                break;
+        }
+        this.togglePlayingState();
+    },
+
     play(e) {
         application.appState.set('currentTrack', this.model);
     },
@@ -53,6 +73,4 @@ const TrackView = Mn.ItemView.extend({
 
 });
 
-TrackView.prototype.onRender = TrackView.prototype.togglePlayingState;
-
 export default TrackView;
diff --git a/app/views/tracks.js b/app/views/tracks.js
@@ -10,6 +10,7 @@ const TracksView = Mn.CompositeView.extend({
     childViewContainer: '#track-list',
 
     childView: TrackView
+
 });
 
 export default TracksView;