[gnome-music/wip/jfelder/playback-status-v4: 9/9] playertoolbar: Add playback button

[Jean Felder <jfelder src gnome org>]

commit 4b6cfb46e07e9ebc58facf8360e7bd19d2f7636d
Author: Jean Felder <jfelder src gnome org>
Date:   Mon Sep 10 08:17:55 2018 +0200

    playertoolbar: Add playback button
    
    Add a button to display PlaybackPopover from PlayerToolbar.
    
    Closes: #14

 data/org.gnome.Music.css            |   6 ++
 data/ui/PlayerToolbar.ui            | 126 ++++++++++++++++++++++--------------
 gnomemusic/widgets/playertoolbar.py |  13 +++-
 3 files changed, 96 insertions(+), 49 deletions(-)
---
diff --git a/data/org.gnome.Music.css b/data/org.gnome.Music.css
index 00e2ec7a..12a54ea3 100644
--- a/data/org.gnome.Music.css
+++ b/data/org.gnome.Music.css
@@ -185,3 +185,9 @@ padding: 0px;
 .lastfm-status-label {
     font-weight: bold;
 }
+
+/* now_playing_button */
+.now-playing {
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
diff --git a/data/ui/PlayerToolbar.ui b/data/ui/PlayerToolbar.ui
index 142a74fc..9bda7d55 100644
--- a/data/ui/PlayerToolbar.ui
+++ b/data/ui/PlayerToolbar.ui
@@ -67,6 +67,7 @@
             <property name="image">previous_image</property>
             <property name="always_show_image">True</property>
             <property name="tooltip_text" translatable="yes">Previous</property>
+           <property name="valign">center</property>
             <signal name="clicked" handler="_on_prev_button_clicked" swapped="no"/>
           </object>
           <packing>
@@ -83,6 +84,7 @@
             <property name="image">_play_image</property>
             <property name="always_show_image">True</property>
             <property name="tooltip_text" translatable="yes">Play</property>
+           <property name="valign">center</property>
             <signal name="clicked" handler="_on_play_button_clicked" swapped="no"/>
           </object>
           <packing>
@@ -99,6 +101,7 @@
             <property name="image">next_image</property>
             <property name="always_show_image">True</property>
             <property name="tooltip_text" translatable="yes">Next</property>
+           <property name="valign">center</property>
             <signal name="clicked" handler="_on_next_button_clicked" swapped="no"/>
           </object>
           <packing>
@@ -120,62 +123,91 @@
         <property name="spacing">8</property>
         <signal name="query-tooltip" handler="_on_tooltip_query"/>
         <child>
-          <object class="CoverStack" id="_cover_stack">
+          <object class="GtkToggleButton" id="_nowplaying_button">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-          </object>
-          <packing>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkBox" id="nowplaying_labels">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
             <property name="halign">center</property>
             <property name="valign">center</property>
-            <property name="orientation">vertical</property>
-            <property name="homogeneous">True</property>
+            <signal name="toggled" handler="_on_nowplaying_button_toggled" swapped="no"/>
+            <style>
+              <class name="flat"/>
+             <class name="now-playing"/>
+            </style>
             <child>
-              <object class="GtkLabel" id="_title_label">
+              <object class="GtkBox" id="nowplaying">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">start</property>
-                <property name="valign">start</property>
-                <property name="xalign">0</property>
-                <property name="ellipsize">middle</property>
-                <property name="width_chars">8</property>
-                <property name="max_width_chars">42</property>
-                <style>
-                  <class name="player-title-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="_artist_label">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
-                <property name="valign">start</property>
-                <property name="xalign">0</property>
-                <property name="ellipsize">middle</property>
-                <property name="width_chars">8</property>
-                <property name="max_width_chars">42</property>
-                <style>
-                  <class name="player-artist-label"/>
-                </style>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="spacing">8</property>
+                <child>
+                  <object class="CoverStack" id="_cover_stack">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkBox" id="nowplaying_labels">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="orientation">vertical</property>
+                    <property name="homogeneous">True</property>
+                    <child>
+                      <object class="GtkLabel" id="_title_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">start</property>
+                        <property name="valign">start</property>
+                        <property name="xalign">0</property>
+                        <property name="ellipsize">middle</property>
+                        <property name="width_chars">8</property>
+                        <property name="max_width_chars">42</property>
+                        <style>
+                          <class name="player-title-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">False</property>
+                        <property name="position">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="_artist_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">start</property>
+                        <property name="valign">start</property>
+                        <property name="xalign">0</property>
+                        <property name="ellipsize">middle</property>
+                        <property name="width_chars">8</property>
+                        <property name="max_width_chars">42</property>
+                        <style>
+                          <class name="player-artist-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">False</property>
+                        <property name="position">1</property>
+                      </packing>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">False</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
               </object>
-              <packing>
-                <property name="position">1</property>
-              </packing>
             </child>
           </object>
-          <packing>
-            <property name="position">1</property>
-          </packing>
         </child>
       </object>
     </child>
diff --git a/gnomemusic/widgets/playertoolbar.py b/gnomemusic/widgets/playertoolbar.py
index 0e0fe3e6..945ed4b8 100644
--- a/gnomemusic/widgets/playertoolbar.py
+++ b/gnomemusic/widgets/playertoolbar.py
@@ -48,6 +48,7 @@ class PlayerToolbar(Gtk.ActionBar):
     _cover_stack = Gtk.Template.Child()
     _duration_label = Gtk.Template.Child()
     _next_button = Gtk.Template.Child()
+    _nowplaying_button = Gtk.Template.Child()
     _pause_image = Gtk.Template.Child()
     _play_button = Gtk.Template.Child()
     _play_image = Gtk.Template.Child()
@@ -100,8 +101,11 @@ class PlayerToolbar(Gtk.ActionBar):
         self._progress_scale.props.player = self._player
 
         # FIXME
-        self._playback_popover = PlaybackPopover(
-            self._player._app, self._nowplaying_button)
+        self._playback_popover = PlaybackPopover(self._player._app)
+        self._playback_popover.props.relative_to = self._nowplaying_button
+        self._playback_popover.bind_property(
+            "visible", self._nowplaying_button, "active",
+            GObject.BindingFlags.SYNC_CREATE)
 
         self._player.connect('song-changed', self._update_view)
         self._player.connect(
@@ -127,6 +131,11 @@ class PlayerToolbar(Gtk.ActionBar):
     def _on_next_button_clicked(self, button):
         self._player.next()
 
+    @Gtk.Template.Callback()
+    def _on_nowplaying_button_toggled(self, button):
+        if self._nowplaying_button.props.active:
+            self._playback_popover.popup()
+
     def _on_repeat_mode_changed(self, klass, param):
         self._sync_repeat_image()
         self._sync_prev_next()