[gnome-music] implementation of mockup design for shuffle/repeat menu

[Vadim Rutkovsky <vrutkovsky src gnome org>]

commit 8c8d9afa2746e206aa47e1fbc2cddf76d38ace06
Author: Eslam Mostafa <cseslam gmail com>
Date:   Wed Jun 5 18:28:51 2013 +0200

    implementation of mockup design for shuffle/repeat menu
    
    https://bugzilla.gnome.org/show_bug.cgi?id=699848

 data/PlayerToolbar.ui |   58 ++++++++++++++++++++++++++++++++++++++++--------
 src/player.js         |   53 ++++++++++++++++++++++++++++++++++++--------
 2 files changed, 91 insertions(+), 20 deletions(-)
---
diff --git a/data/PlayerToolbar.ui b/data/PlayerToolbar.ui
index b2e5361..15d99eb 100644
--- a/data/PlayerToolbar.ui
+++ b/data/PlayerToolbar.ui
@@ -286,7 +286,7 @@
                         <property name="has_focus">False</property>
                         <property name="is_focus">False</property>
                         <property name="receives_default">True</property>
-                        <property name="popup">replayMenu</property>
+                        <property name="popup">repeatMenu</property>
                         <child>
                           <object class="GtkBox" id="replayBox">
                             <property name="visible">True</property>
@@ -300,7 +300,7 @@
                                 <property name="can_focus">False</property>
                                 <property name="has_focus">False</property>
                                 <property name="is_focus">False</property>
-                                <property name="icon_name">media-playlist-repeat-symbolic</property>
+                                <property name="icon_name">media-playlist-consecutive-symbolic</property>
                                 <property name="icon_size">1</property>
                               </object>
                               <packing>
@@ -374,16 +374,54 @@
     <property name="icon_name">media-skip-backward-symbolic</property>
     <property name="icon-size">1</property>
   </object>
-  <object class="GtkMenu" id="replayMenu">
+  <object class="GtkRadioMenuItem" id="radiomenuitem1">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
+    <property name="draw_as_radio">True</property>
   </object>
-  <object class="GtkListStore" id="replay_button_model">
-    <columns>
-      <!-- column-name icon -->
-      <column type="GdkPixbuf"/>
-      <!-- column-name text -->
-      <column type="gchararray"/>
-    </columns>
+  <object class="GtkMenu" id="repeatMenu">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <child>
+      <object class="GtkRadioMenuItem" id="shuffle">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Shuffle</property>
+        <property name="use_underline">True</property>
+        <property name="draw_as_radio">True</property>
+        <property name="group">radiomenuitem1</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkRadioMenuItem" id="repeatAll">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Repeat All</property>
+        <property name="use_underline">True</property>
+        <property name="draw_as_radio">True</property>
+        <property name="group">radiomenuitem1</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkRadioMenuItem" id="repeatSong">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Repeat Song</property>
+        <property name="use_underline">True</property>
+        <property name="draw_as_radio">True</property>
+        <property name="group">radiomenuitem1</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkRadioMenuItem" id="repeatShuffleOff">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Shuffle/Repeat Off</property>
+        <property name="use_underline">True</property>
+        <property name="active">True</property>
+        <property name="draw_as_radio">True</property>
+        <property name="group">radiomenuitem1</property>
+      </object>
+    </child>
   </object>
 </interface>
diff --git a/src/player.js b/src/player.js
index c341e12..b10c6d2 100644
--- a/src/player.js
+++ b/src/player.js
@@ -41,7 +41,8 @@ const ART_SIZE = 34;
 const RepeatType = {
     NONE: 0,
     SONG: 1,
-    ALL:  2
+    ALL: 2,
+    SHUFFLE: 3,
 }
 
 const Player = new Lang.Class({
@@ -295,8 +296,13 @@ const Player = new Lang.Class({
         this.artistLabel = this._ui.get_object('artist');
         this.coverImg = this._ui.get_object('cover');
         this.duration = this._ui.get_object('duration');
-        this.replayBtn = this._ui.get_object('menuButton');
-        let replayMenu = this._ui.get_object('replayMenu');
+        this.repeatBtn = this._ui.get_object('menuButton');
+        let repeatMenu = this._ui.get_object('repeatMenu');
+        let shuffle = this._ui.get_object('shuffle');
+        let repeatAll = this._ui.get_object('repeatAll');
+        let repeatSong = this._ui.get_object('repeatSong');
+        let shuffleRepeatOff = this._ui.get_object('repeatShuffleOff');
+        this.repeatBtnImage = this._ui.get_object('playlistRepeat');
         if(Gtk.Settings.get_default().gtk_application_prefer_dark_theme)
             var color = new Gdk.Color({red:65535,green:65535,blue:65535});
         else
@@ -304,13 +310,20 @@ const Player = new Lang.Class({
         this._playImage.modify_fg(Gtk.StateType.ACTIVE,color);
         this._pauseImage.modify_fg(Gtk.StateType.ACTIVE,color);
 
-        let replaySong = Gtk.MenuItem.new_with_label("replay song");
-        let replayAll = Gtk.MenuItem.new_with_label("replay all");
-        let shuffle = Gtk.MenuItem.new_with_label("shuffle");
-        replayMenu.attach(replaySong, 0, 1, 0, 1);
-        replayMenu.attach(replayAll, 0, 1, 1, 2);
-        replayMenu.attach(shuffle, 0, 1, 2, 3);
-        replayMenu.show_all();
+        shuffle.connect('activate', Lang.bind(this, this._onShuffleActivated));
+        repeatAll.connect('activate', Lang.bind(this, this._onRepeatAllActivated));
+        repeatSong.connect('activate', Lang.bind(this, this._onRepeatSongActivated));
+        shuffleRepeatOff.connect('activate', Lang.bind(this, this._onShuffleRepeatOffActivated));
+
+        if (this.repeat == RepeatType.NONE) {
+            shuffleRepeatOff.activate();
+        } else if (this.repeat == RepeatType.SONG) {
+            repeatSong.activate();
+        } else if (this.repeat == RepeatType.ALL) {
+            repeatAll.activate();
+        } else if (this.repeat == RepeatType.SHUFFLE ) {
+            shuffle.activate();
+        }
 
         this.prevBtn.connect("clicked", Lang.bind(this, this._onPrevBtnClicked));
         this.playBtn.connect("clicked", Lang.bind(this, this._onPlayBtnClicked));
@@ -378,6 +391,26 @@ const Player = new Lang.Class({
         return true;
     },
 
+    _onShuffleActivated: function(data) {
+        this.repeatBtnImage.set_from_icon_name('media-playlist-shuffle-symbolic', 1);
+        this.repeat = RepeatType.SHUFFLE;
+    },
+
+    _onRepeatAllActivated: function(data) {
+        this.repeatBtnImage.set_from_icon_name('media-playlist-repeat-symbolic', 1);
+        this.repeat = RepeatType.ALL;
+    },
+
+    _onRepeatSongActivated: function(data) {
+        this.repeatBtnImage.set_from_icon_name('media-playlist-repeat-song-symbolic', 1);
+        this.repeat = RepeatType.SONG;
+    },
+
+    _onShuffleRepeatOffActivated: function(data) {
+        this.repeatBtnImage.set_from_icon_name('media-playlist-consecutive-symbolic', 1);
+        this.repeat = RepeatType.NONE;
+    },
+
     onProgressScaleChangeValue: function(scroll) {
         var seconds = scroll.get_value() / 60;
         if(seconds != this.duration) {