[gnome-software] Use the selected background color for the sensitive star ratings

[Richard Hughes <rhughes src gnome org>]

commit eb89ddc8e47aac4e0a6d2f25d96210d99d6ea30f
Author: Richard Hughes <richard hughsie com>
Date:   Thu Feb 18 19:09:26 2016 +0000

    Use the selected background color for the sensitive star ratings
    
    In the details shell we use the 'insensitive' style which uses monochrome
    styling and in the review dialog (which is clickable and sensitive) we use
    larger colorful stars.
    
    We also no longer award 'half-stars' and round to the nearest whole star.
    
    Resolves: https://bugzilla.gnome.org/show_bug.cgi?id=762275

 src/gs-review-histogram.ui |   15 ++++++---
 src/gs-star-widget.c       |   78 +++++++++++++++++++------------------------
 src/gs-star-widget.ui      |   10 +++---
 src/gtk-style-hc.css       |   14 +++++++-
 src/gtk-style.css          |   16 ++++++++-
 5 files changed, 77 insertions(+), 56 deletions(-)
---
diff --git a/src/gs-review-histogram.ui b/src/gs-review-histogram.ui
index 673bfcd..0e20c7d 100644
--- a/src/gs-review-histogram.ui
+++ b/src/gs-review-histogram.ui
@@ -13,8 +13,9 @@
           <object class="GtkImage" id="star5">
             <property name="visible">True</property>
             <property name="icon_name">starred-symbolic</property>
+            <property name="sensitive">False</property>
             <style>
-              <class name="star"/>
+              <class name="star-disabled"/>
             </style>
           </object>
           <packing>
@@ -69,8 +70,9 @@
           <object class="GtkImage" id="star4">
             <property name="visible">True</property>
             <property name="icon_name">starred-symbolic</property>
+            <property name="sensitive">False</property>
             <style>
-              <class name="star"/>
+              <class name="star-disabled"/>
             </style>
           </object>
           <packing>
@@ -124,8 +126,9 @@
           <object class="GtkImage" id="star3">
             <property name="visible">True</property>
             <property name="icon_name">starred-symbolic</property>
+            <property name="sensitive">False</property>
             <style>
-              <class name="star"/>
+              <class name="star-disabled"/>
             </style>
           </object>
           <packing>
@@ -179,8 +182,9 @@
           <object class="GtkImage" id="star2">
             <property name="visible">True</property>
             <property name="icon_name">starred-symbolic</property>
+            <property name="sensitive">False</property>
             <style>
-              <class name="star"/>
+              <class name="star-disabled"/>
             </style>
           </object>
           <packing>
@@ -234,8 +238,9 @@
           <object class="GtkImage" id="star1">
             <property name="visible">True</property>
             <property name="icon_name">starred-symbolic</property>
+            <property name="sensitive">False</property>
             <style>
-              <class name="star"/>
+              <class name="star-disabled"/>
             </style>
           </object>
           <packing>
diff --git a/src/gs-star-widget.c b/src/gs-star-widget.c
index 1b4db71..f987b3c 100644
--- a/src/gs-star-widget.c
+++ b/src/gs-star-widget.c
@@ -66,26 +66,6 @@ gs_star_widget_get_rating (GsStarWidget *star)
 }
 
 /**
- * gs_star_widget_set_image_rating:
- **/
-static void
-gs_star_widget_set_image_rating (GtkImage *image,
-                                gint value, gint lower, gint higher)
-{
-       GtkStyleContext *context;
-       const gchar *icon_name = "semi-starred-symbolic";
-
-       if (value <= lower)
-               icon_name = "non-starred-symbolic";
-       if (value >= higher)
-               icon_name = "starred-symbolic";
-
-       context = gtk_widget_get_style_context (GTK_WIDGET (image));
-       gtk_style_context_add_class (context, "star");
-       gtk_image_set_from_icon_name (image, icon_name, GTK_ICON_SIZE_MENU);
-}
-
-/**
  * gs_star_widget_set_icon_size:
  **/
 void
@@ -101,41 +81,53 @@ gs_star_widget_set_icon_size (GsStarWidget *star, guint pixel_size)
        gtk_image_set_pixel_size (GTK_IMAGE (priv->image5), pixel_size);
 }
 
+static void
+gs_star_widget_style_class_enable (GtkWidget *widget, gboolean val)
+{
+       GtkStyleContext *context;
+       context = gtk_widget_get_style_context (widget);
+       if (val) {
+               gtk_style_context_add_class (context, "star-enabled");
+               gtk_style_context_remove_class (context, "star-disabled");
+       } else {
+               gtk_style_context_add_class (context, "star-disabled");
+               gtk_style_context_remove_class (context, "star-enabled");
+       }
+}
+
 /**
- * gs_star_widget_set_interactive:
+ * gs_star_widget_refresh:
  **/
-void
-gs_star_widget_set_interactive (GsStarWidget *star, gboolean interactive)
+static void
+gs_star_widget_refresh (GsStarWidget *star)
 {
        GsStarWidgetPrivate *priv;
-       g_return_if_fail (GS_IS_STAR_WIDGET (star));
        priv = gs_star_widget_get_instance_private (star);
-       priv->interactive = interactive;
+
+       gtk_widget_set_sensitive (priv->image1, priv->interactive);
+       gtk_widget_set_sensitive (priv->image2, priv->interactive);
+       gtk_widget_set_sensitive (priv->image3, priv->interactive);
+       gtk_widget_set_sensitive (priv->image4, priv->interactive);
+       gtk_widget_set_sensitive (priv->image5, priv->interactive);
+
+       gs_star_widget_style_class_enable (priv->image1, priv->rating > 0);
+       gs_star_widget_style_class_enable (priv->image2, priv->rating > 20);
+       gs_star_widget_style_class_enable (priv->image3, priv->rating > 40);
+       gs_star_widget_style_class_enable (priv->image4, priv->rating > 60);
+       gs_star_widget_style_class_enable (priv->image5, priv->rating > 80);
 }
 
 /**
- * gs_star_widget_refresh:
+ * gs_star_widget_set_interactive:
  **/
-static void
-gs_star_widget_refresh (GsStarWidget *star)
+void
+gs_star_widget_set_interactive (GsStarWidget *star, gboolean interactive)
 {
        GsStarWidgetPrivate *priv;
+       g_return_if_fail (GS_IS_STAR_WIDGET (star));
        priv = gs_star_widget_get_instance_private (star);
-       gs_star_widget_set_image_rating (GTK_IMAGE (priv->image1),
-                                        priv->rating,
-                                        0, rate_to_star[0]);
-       gs_star_widget_set_image_rating (GTK_IMAGE (priv->image2),
-                                        priv->rating,
-                                        rate_to_star[0], rate_to_star[1]);
-       gs_star_widget_set_image_rating (GTK_IMAGE (priv->image3),
-                                        priv->rating,
-                                        rate_to_star[1], rate_to_star[2]);
-       gs_star_widget_set_image_rating (GTK_IMAGE (priv->image4),
-                                        priv->rating,
-                                        rate_to_star[2], rate_to_star[3]);
-       gs_star_widget_set_image_rating (GTK_IMAGE (priv->image5),
-                                        priv->rating,
-                                        rate_to_star[3], rate_to_star[4]);
+       priv->interactive = interactive;
+       gs_star_widget_refresh (star);
 }
 
 /**
diff --git a/src/gs-star-widget.ui b/src/gs-star-widget.ui
index fb83e85..c3e0fa7 100644
--- a/src/gs-star-widget.ui
+++ b/src/gs-star-widget.ui
@@ -27,7 +27,7 @@
             <child>
               <object class="GtkImage" id="image1">
                 <property name="visible">True</property>
-                <property name="icon_name">non-starred-symbolic</property>
+                <property name="icon_name">starred-symbolic</property>
               </object>
             </child>
           </object>
@@ -51,7 +51,7 @@
             <child>
               <object class="GtkImage" id="image2">
                 <property name="visible">True</property>
-                <property name="icon_name">non-starred-symbolic</property>
+                <property name="icon_name">starred-symbolic</property>
               </object>
             </child>
           </object>
@@ -75,7 +75,7 @@
             <child>
               <object class="GtkImage" id="image3">
                 <property name="visible">True</property>
-                <property name="icon_name">non-starred-symbolic</property>
+                <property name="icon_name">starred-symbolic</property>
               </object>
             </child>
           </object>
@@ -99,7 +99,7 @@
             <child>
               <object class="GtkImage" id="image4">
                 <property name="visible">True</property>
-                <property name="icon_name">non-starred-symbolic</property>
+                <property name="icon_name">starred-symbolic</property>
               </object>
             </child>
           </object>
@@ -123,7 +123,7 @@
             <child>
               <object class="GtkImage" id="image5">
                 <property name="visible">True</property>
-                <property name="icon_name">non-starred-symbolic</property>
+                <property name="icon_name">starred-symbolic</property>
               </object>
             </child>
           </object>
diff --git a/src/gtk-style-hc.css b/src/gtk-style-hc.css
index 974c9ad..44f3876 100644
--- a/src/gtk-style-hc.css
+++ b/src/gtk-style-hc.css
@@ -162,9 +162,21 @@ button.star, .button.star {
        outline-offset: -1px;
 }
 
-.star {
+/* for the review dialog */
+.star-enabled {
        color: #000000;
 }
+.star-disabled {
+       color: #777777;
+}
+
+/* for the app details shell */
+.star-enabled:insensitive {
+       color: #000000;
+}
+.star-disabled:insensitive {
+       color: #777777;
+}
 
 .counter-label {
        text-shadow: none;
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 263e4ff..79b6224 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -198,8 +198,20 @@ button.star, .button.star {
        outline-offset: -1px;
 }
 
-.star {
-       color: #888a85;
+/* for the review dialog */
+.star-enabled {
+       color: @theme_selected_bg_color;
+}
+.star-disabled {
+       color: shade(@theme_bg_color, 0.8);
+}
+
+/* for the app details shell */
+.star-enabled:insensitive {
+       color: #555753;
+}
+.star-disabled:insensitive {
+       color: shade(@theme_bg_color, 0.8);
 }
 
 .counter-label {