[gnome-music/wip/jfelder/playback-status-v3: 10/10] playertoolbar: Add playback button

[Jean Felder <jfelder src gnome org>]

commit 1da6e8c915e5b203d2ca7a2c02ef3d24af72c311
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            | 133 +++++++++++++++++++++---------------
 gnomemusic/widgets/playertoolbar.py |   1 +
 3 files changed, 85 insertions(+), 55 deletions(-)
---
diff --git a/data/org.gnome.Music.css b/data/org.gnome.Music.css
index f5ea3b7b..cec1bc36 100644
--- a/data/org.gnome.Music.css
+++ b/data/org.gnome.Music.css
@@ -94,3 +94,9 @@ box#ArtistAlbumsWidget .artist-label {
 .tooltip-title {
   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 da2e9166..06be5dad 100644
--- a/data/ui/PlayerToolbar.ui
+++ b/data/ui/PlayerToolbar.ui
@@ -68,6 +68,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>
@@ -86,6 +87,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>
@@ -104,6 +106,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>
@@ -127,70 +130,90 @@
         <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="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>
+            <style>
+              <class name="flat"/>
+             <class name="now-playing"/>
+            </style>
             <child>
-              <object class="GtkLabel" id="_artist_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-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="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>
     </child>
diff --git a/gnomemusic/widgets/playertoolbar.py b/gnomemusic/widgets/playertoolbar.py
index a4a2c0b9..88bef809 100644
--- a/gnomemusic/widgets/playertoolbar.py
+++ b/gnomemusic/widgets/playertoolbar.py
@@ -53,6 +53,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()