[FIX] Improve chrome & opera experience

* [FIX] Improve chrome & opera experience * [FIX] svg style * [FEATURE] keyboard shortcuts
poupotte · Apr 7, 2016 · 81b20f5 · 81b20f5
1 parent 396c834
commit 81b20f5
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 66 deletions.
diff --git a/app/styles/app.styl b/app/styles/app.styl
@@ -23,6 +23,9 @@ div[role='application']
     width: 100%
     display: flex
 
+path
+    fill: inherit
+
 :focus
     outline:none
 ::-moz-focus-inner

diff --git a/app/styles/header.styl b/app/styles/header.styl
@@ -53,10 +53,7 @@ div[role='contentinfo']
                 left: 9px
                 width: 20px
                 top: 6px
-
-                path
-                    fill: $svg
-                    stroke: 2px
+                fill: $svg
 
         button:active
             padding-top: 1px
diff --git a/app/styles/notification.styl b/app/styles/notification.styl
@@ -25,9 +25,7 @@ div[role='toolbar']
             padding-left: 14px
             width: 40px
             height: 40px
-
-            path
-                fill: $white
+            fill: $white
 
     .notify
         animation-timing-function: ease;

diff --git a/app/styles/player.styl b/app/styles/player.styl
@@ -30,8 +30,8 @@
             box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1)
             padding: 0px
             background-color: white
-
-            path
+            svg
+                padding-left: 7px
                 fill: $blue
 
         svg
@@ -40,9 +40,7 @@
             padding-top: 7px
             padding-bottom: 7px
             padding-left: 28px
-
-            path
-                fill: $svg
+            fill: $svg
 
     .timeline
         margin-left: 32px
@@ -113,20 +111,12 @@
             height: 20px
             margin-top: 26px
             margin-right: 10px
+            fill: $text
             display: inline-block
 
-            path
-                fill: $text
-
         .active
-            path
-                fill: $svg-red
-
-        #repeat-one-sm
-            path
+            svg
                 fill: $svg-red
 
         #broadcast
             margin-left: 100px
-            path
-                fill: $svg-red
diff --git a/app/styles/playlists.styl b/app/styles/playlists.styl
@@ -22,9 +22,7 @@ div[role='toolbar']
                 position: relative
                 left: 16px
                 top: 4px
-
-                path
-                    fill: $text
+                fill: $text
 
         .input
             border: solid 1px $blue
@@ -43,9 +41,7 @@ div[role='toolbar']
                 width: 16px
                 top: 8px
                 left: 15px
-
-                path
-                    fill: $blue
+                fill: $blue
 
             input[type='text']
                 color: #788195

diff --git a/app/styles/popup-menu.styl b/app/styles/popup-menu.styl
@@ -13,27 +13,34 @@
         .small
             width: 14px
             height: 14px
+            top: 11px
             opacity: 0.3
             position: absolute
             right: 14px
             svg
-                path
-                    fill: $svg
+                fill: $svg
         ul
             li
                 font-size: 16px
                 padding: 0px 20px
                 height: 36px
+                line-height: 2.3
                 box-shadow: none
                 color: $text-dark
                 align-items: center
 
+                a
+                    width: 100%
+                    height: 100%
+                    text-decoration: none
+                    display: block
+                    color: $text-dark
+
                 svg
                     height: 20px
                     width: 20px
                     padding-right: 14px
-                    path
-                        fill: $svg
+                    fill: $svg
 
             li:hover
                 background-color: $background-dark;

diff --git a/app/styles/toolbar.styl b/app/styles/toolbar.styl
@@ -33,9 +33,7 @@ div[role='toolbar']
                 height: 20px
                 width: 20px
                 top: 6px
-
-                path
-                    fill: $white
+                fill: $white
 
             p
                 position: relative
@@ -86,9 +84,7 @@ div[role='toolbar']
                 width: 20px
                 top: 8px
                 left: 15px
-
-                path
-                    fill: $grey
+                fill: $grey
 
             input[type='text']
                 color: #788195
@@ -100,11 +96,10 @@ div[role='toolbar']
 
         .input-focused
             border: solid 1px $blue
-            font-family: 'Source Sans Pro'
+            font-style: normal
 
             svg
-                path
-                    fill: $blue
+                fill: $blue
 
 @keyframes notify {
     0%   {opacity: 0; visibility: visible}

diff --git a/app/styles/track-actions.styl b/app/styles/track-actions.styl
@@ -7,25 +7,22 @@
         top: 0px
 
         .active
-            path
+            svg
                 fill: $svg-red
 
         button:hover:not(.active)
+            svg
+                fill: $text-dark
             .help
                 visibility: visibile
-            path
-                fill: $text-dark
 
         button
             height: 100%
             width: 22px
             svg
                 height: 20px
                 width: 20px
-                path
-                    fill: $svg
-                    -webkit-transition: fill 0.2s; /* Safari */
-                    transition: fill 0.2s;
+                fill: $svg
 
     .all
         #delete-from-upnext

diff --git a/app/styles/tracks.styl b/app/styles/tracks.styl
@@ -23,8 +23,7 @@
             display: none
             width: 18px
             height: 18px
-            path
-                fill: $red
+            fill: $red
 
     .song-column-cell
         flex-grow: 1

diff --git a/app/views/player.js b/app/views/player.js
@@ -45,25 +45,31 @@ const Player = Mn.LayoutView.extend({
                 }
         });
         $(document).keyup((e) => {
-             e.preventDefault();
-            switch (e.key) {
-                case ' ':
+            e.preventDefault();
+            let audio = this.ui.player.get(0);
+            let volume;
+            switch (e.which) {
+                case 32: // 'Space'
                     this.toggle();
                     break;
-                case 'ArrowRight':
+                case 39: // ArrowRight
                     this.next();
                     break;
-                case 'ArrowLeft':
+                case 37: // ArrowLeft
                     this.prev();
                     break;
-                case 'ArrowUp':
-                    // increaseVol
+                case 38: // ArrowUp
+                    volume = audio.volume + 0.1 > 1 ? 1 : audio.volume + 0.1;
+                    audio.volume = volume;
+                    application.appState.set('currentVolume', volume);
                     break;
-                case 'ArrowDown':
-                    // decreaseVol
+                case 40: // ArrowDown
+                    volume = audio.volume - 0.1 < 0 ? 0 : audio.volume - 0.1;
+                    audio.volume = volume;
+                    application.appState.set('currentVolume', volume);
                     break;
-                case 'm':
-                    // mute
+                case 77: // m
+                    this.toggleVolume();
                     break;
             }
         });
@@ -178,15 +184,15 @@ const Player = Mn.LayoutView.extend({
     toggleShuffle() {
         let shuffle = application.appState.get('shuffle');
         application.appState.set('shuffle', !shuffle);
-        $('#shuffle-sm').toggleClass('active', !shuffle);
+        this.ui.shuffle.toggleClass('active', !shuffle);
     },
 
     toggleRepeat() {
         let repeat = application.appState.get('repeat');
         switch (repeat) {
             case 'false':
                 application.appState.set('repeat', 'track');
-                $('#repeat-sm').toggleClass('active', true);
+                this.ui.repeat.toggleClass('active', true);
                 this.ui.repeat.find('use').attr(
                     'xlink:href',
                     require('../assets/icons/repeat-one-sm.svg')
@@ -201,7 +207,7 @@ const Player = Mn.LayoutView.extend({
                 break;
             case 'playlist':
                 application.appState.set('repeat', 'false');
-                $('#repeat-sm').toggleClass('active', false);
+                this.ui.repeat.toggleClass('active', false);
                 break;
         }
     },

diff --git a/app/views/templates/player.jst b/app/views/templates/player.jst
@@ -4,8 +4,8 @@
         <% if (false) { %>
             <img class="album" src="album"></img>
         <% } else { %>
-            <button>
-                <svg class="album">
+            <button class="album">
+                <svg>
                     <use xlink:href="<%= require('../../assets/icons/music-lg.svg') %>"/>
                 </svg>
             </button>