Reorganized player buttons

Gemfile.lock

@@ -97,11 +97,11 @@ GEM
       thor (~> 0.14.6)
     rake (0.9.2)
     rdoc (3.9.4)
-    sass (3.1.7)
-    sprockets (2.0.0)
+    sass (3.1.8)
+    sprockets (2.0.1)
       hike (~> 1.2)
       rack (~> 1.0)
-      tilt (!= 1.3.0, ~> 1.1)
+      tilt (~> 1.1, != 1.3.0)
     therubyracer (0.9.4)
       libv8 (~> 3.3.10)
     thor (0.14.6)
@@ -109,7 +109,7 @@ GEM
     treetop (1.4.10)
       polyglot
       polyglot (>= 0.3.1)
-    tzinfo (0.3.29)
+    tzinfo (0.3.30)
     uglifier (1.0.3)
       execjs (>= 0.3.0)
       multi_json (>= 1.0.2)

app/assets/stylesheets/player.scss

@@ -1,19 +1,6 @@
+@import "opacity";
+
 .player {
-  .buttons {
-    text-align: center;
-    height: 36px;
-  }
-  .play {
-    border-radius: 21px !important;
-    padding: 11px 11px 11px 15px !important;
-    margin-top: -10px !important;
-  }
-  .pause {
-    font-weight: bold;
-    border-radius: 21px !important;
-    padding: 11px 16px 11px 16px !important;
-    display: none;
-  }
   .now-playing {
     text-align: center;
   }
@@ -34,21 +21,58 @@
       }
     }
   }
+  .buttons {
+    clear: both;
+    height: 50px;
     .secondary-buttons {
-    margin: 10px 0;
+      float: left;
+      width: 20px;
+      margin: -10px 0 0 20px;
       text-align: center;
       a {
-      font-size: 11px;
-      color: #cacaca;
-      font-weight: bold;
-      text-decoration: none;
+        display: block;
+        margin: -5px 0 0 0;
+        @include opacity(0.3);
         cursor: pointer;
-      
+        &.do_empty {
+          margin-top: -2px;
+        }
         &:hover {
-        color: #b0b0b0;
+          @include opacity(0.6);
         }
         &.on {
-        color: #606060;
+          @include opacity(0.9);
+        }
+      }
+    }
+    .primary-buttons {
+      float: left;
+      width: 200px;
+      margin: 10px 0 0 0;
+      text-align: center;
+      height: 36px;
+      .play {
+        border-radius: 21px !important;
+        padding: 11px 11px 11px 15px !important;
+        margin-top: -10px !important;
+      }
+      .pause {
+        font-weight: bold;
+        border-radius: 21px !important;
+        padding: 11px 16px 11px 16px !important;
+        display: none;
+      }
+    }
+    .quality-buttons {
+      float: left;
+      width: 20px;
+      a {
+        display: block;
+        @include opacity(0.4);
+        cursor: pointer;
+        &:hover {
+          @include opacity(0.8);
+        }
       }
     }
   }

app/views/layouts/application.html.haml

@@ -57,14 +57,20 @@
               .loaded
                 .played
             .buttons
+              .secondary-buttons
+                %a.shuffle{ :title => I18n.t('player.shuffle') }= image_tag "icns/shuffle.png"
+                %a.repeat{ :title => I18n.t('player.repeat') }= image_tag "icns/repeat.png"
+                %a.do_empty{ :title => I18n.t('player.do_empty') }= image_tag "icns/empty.png"
+              .primary-buttons
                 %a.btn.small-round.prev «
                 %a.btn.large.play ►
                 %a.btn.large.pause II
                 %a.btn.small-round.next »
-            .secondary-buttons
-              %a.shuffle= (I18n.t 'player.shuffle').upcase
-              %a.repeat= (I18n.t 'player.repeat').upcase
-              %a.do_empty= (I18n.t 'player.do_empty').upcase
+              .quality-buttons
+                %a.q-good{ :title => I18n.t('player.thumbs_up') }= image_tag "icns/thumbs-up.png"
+                %a.q-bad{ :title => I18n.t('player.thumbs_down') }= image_tag "icns/thumbs-down.png"
+              
+              
 
           %ul.playlist
     

config/locales/en.yml

@@ -50,3 +50,5 @@ en:
     repeat: "Repeat"
     shuffle: "Shuffle"
     do_empty: "Empty"
+    thumbs_up: "This is exactly the song I was looking for and the quality of sound is good"
+    thumbs_down: "This is not the song I was looking for or the quality of sound is bad"

config/locales/ru.yml

@@ -50,3 +50,5 @@ ru:
     repeat: "Повторять"
     shuffle: "Перемешать"
     do_empty: "Очистить"
+    thumbs_up: "Это та самая песня и качество звука хорошее"
+    thumbs_down: "Это не та песня или качество звука плохое"