[gnome-music] disclistboxwidget: Rework starring widget

[Marinus Schraal <mschraal src gnome org>]

commit 2455435ffe93d174a0fffb35fdbb1749e86a0f32
Author: Marinus Schraal <mschraal src gnome org>
Date:   Sun Nov 27 01:28:30 2016 +0100

    disclistboxwidget: Rework starring widget
    
    The widget was a stack to transition between the non-starred and starred
    icon state smoothly, this was not CSS themable.
    
    Instead, use a GtkImage and use the background-image property to set the
    actual image. This is a workaround since Gtk currently does not support
    CSS transitions between regular gtk images/icons, but using the
    background image instead is possible.

 data/TrackWidget.ui                     |    9 +-----
 data/application.css                    |   18 ++++++++++++
 gnomemusic/widgets/disclistboxwidget.py |   46 ++++++++++++++++---------------
 3 files changed, 43 insertions(+), 30 deletions(-)
---
diff --git a/data/TrackWidget.ui b/data/TrackWidget.ui
index 16e9ec8..a494963 100644
--- a/data/TrackWidget.ui
+++ b/data/TrackWidget.ui
@@ -121,18 +121,11 @@
             <property name="valign">center</property>
             <property name="visible_window">True</property>
             <child>
-              <object class="StarStack" id="starstack">
+              <object class="StarImage" id="starimage">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="valign">center</property>
                 <property name="margin_start">10</property>
-                <property name="transition_type">crossfade</property>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
               </object>
             </child>
           </object>
diff --git a/data/application.css b/data/application.css
index afd0850..090c98e 100644
--- a/data/application.css
+++ b/data/application.css
@@ -56,6 +56,24 @@ list, row {
     background-color: @theme_bg_color;
 }
 
+/* We use background-image as a workaround on the StarImage widget to
+   enable transitions between the non-starred and starred icons. */
+.star {
+    background-image: -gtk-icontheme('non-starred-symbolic');
+    color: shade(@theme_bg_color, 0.8);
+    transition: 100ms linear;
+}
+
+.star:hover {
+    color: shade(@theme_bg_color, 0.5);
+}
+
+.star:selected {
+    background-image: -gtk-icontheme('starred-symbolic');
+    color: @theme_selected_bg_color;
+    transition: 100ms linear;
+}
+
 .content-view { background-color: @theme_bg; }
 
 .music-entry-tag {
diff --git a/gnomemusic/widgets/disclistboxwidget.py b/gnomemusic/widgets/disclistboxwidget.py
index 517835e..f1f9df2 100644
--- a/gnomemusic/widgets/disclistboxwidget.py
+++ b/gnomemusic/widgets/disclistboxwidget.py
@@ -34,29 +34,20 @@ NOW_PLAYING_ICON_NAME = 'media-playback-start-symbolic'
 ERROR_ICON_NAME = 'dialog-error-symbolic'
 
 
-class StarStack(Gtk.Stack):
-    """Stackwidget for starring songs"""
-    __gtype_name__ = 'StarStack'
+class StarImage(Gtk.Image):
+    """GtkImage for starring songs"""
+    __gtype_name__ = 'StarImage'
 
     def __repr__(self):
-        return '<StarStack>'
+        return '<StarImage>'
 
     @log
     def __init__(self):
         super().__init__(self)
 
-        starred_icon = Gtk.Image.new_from_icon_name('starred-symbolic',
-                                                    Gtk.IconSize.SMALL_TOOLBAR)
-        non_starred_icon = Gtk.Image.new_from_icon_name(
-            'non-starred-symbolic',
-            Gtk.IconSize.SMALL_TOOLBAR)
-
         self._favorite = False
 
-        self.add_named(starred_icon, 'starred')
-        self.add_named(non_starred_icon, 'non-starred')
-        self.set_visible_child_name('non-starred')
-
+        self.get_style_context().add_class("star")
         self.show_all()
 
     @log
@@ -70,9 +61,9 @@ class StarStack(Gtk.Stack):
         self._favorite = favorite
 
         if self._favorite:
-            self.set_visible_child_name('starred')
+            self.set_state_flags(Gtk.StateFlags.SELECTED, False)
         else:
-            self.set_visible_child_name('non-starred')
+            self.unset_state_flags(Gtk.StateFlags.SELECTED)
 
     @log
     def get_favorite(self):
@@ -90,6 +81,14 @@ class StarStack(Gtk.Stack):
 
         self.set_favorite(self._favorite)
 
+    @log
+    def hover(self, widget, event, data):
+        self.set_state_flags(Gtk.StateFlags.PRELIGHT, False)
+
+    @log
+    def unhover(self, widget, event, data):
+        self.unset_state_flags(Gtk.StateFlags.PRELIGHT)
+
 
 class DiscSongsFlowBox(Gtk.FlowBox):
     """FlowBox containing the songs on one disc
@@ -351,25 +350,28 @@ class DiscBox(Gtk.Box):
         song_widget.can_be_played = True
         song_widget.connect('button-release-event', self._track_activated)
 
-        song_widget.star_stack = builder.get_object('starstack')
-        song_widget.star_stack.set_favorite(track.get_favourite())
-        song_widget.star_stack.set_visible(True)
+        song_widget.star_image = builder.get_object('starimage')
+        song_widget.star_image.set_favorite(track.get_favourite())
+        song_widget.star_image.set_visible(True)
 
         song_widget.starevent = builder.get_object('starevent')
         song_widget.starevent.connect('button-release-event',
                                       self._toggle_favorite,
                                       song_widget)
-
+        song_widget.starevent.connect('enter-notify-event',
+                                      song_widget.star_image.hover, None)
+        song_widget.starevent.connect('leave-notify-event',
+                                      song_widget.star_image.unhover, None)
         return song_widget
 
     @log
     def _toggle_favorite(self, widget, event, song_widget):
         if event.button == Gdk.BUTTON_PRIMARY:
-            song_widget.star_stack.toggle_favorite()
+            song_widget.star_image.toggle_favorite()
 
         # FIXME: ugleh. Should probably be triggered by a
         # signal.
-        favorite = song_widget.star_stack.get_favorite()
+        favorite = song_widget.star_image.get_favorite()
         grilo.set_favorite(self._model[song_widget.itr][5], favorite)
         return True