[gnome-software] Use a set of stars to show the different star ratings

[Joaquim Manuel Pereira Rocha <jrocha src gnome org>]

commit 52955193fc220ab14c0d71eb631aa02fc2500558
Author: Joaquim Rocha <jrocha endlessm com>
Date:   Fri Nov 25 16:11:56 2016 +0100

    Use a set of stars to show the different star ratings
    
    These changes replace how the review histogram shows the different
    ratings: instead of using one star image + a label indicating which
    score it refers to, it uses a different number of star images.
    
    This makes it easier to quickly read the review scores than the old
    style.

 src/gs-review-histogram.ui |  311 +++++++++++++++++++++++++++++---------------
 1 files changed, 203 insertions(+), 108 deletions(-)
---
diff --git a/src/gs-review-histogram.ui b/src/gs-review-histogram.ui
index 0e20c7d..57e888c 100644
--- a/src/gs-review-histogram.ui
+++ b/src/gs-review-histogram.ui
@@ -10,13 +10,64 @@
         <property name="row-spacing">6</property>
         <property name="column-spacing">6</property>
         <child>
-          <object class="GtkImage" id="star5">
+          <object class="GtkBox" id="histogram_star5_box">
             <property name="visible">True</property>
-            <property name="icon_name">starred-symbolic</property>
-            <property name="sensitive">False</property>
-            <style>
-              <class name="star-disabled"/>
-            </style>
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkImage" id="star5_1">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star5_2">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star5_3">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star5_4">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star5_5">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left-attach">0</property>
@@ -26,28 +77,16 @@
           </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="star_label5">
-            <property name="visible">True</property>
-            <property name="label">5</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">0</property>
-            <property name="width">1</property>
-            <property name="height">1</property>
-          </packing>
-        </child>
-        <child>
           <object class="GsReviewBar" id="bar5">
             <property name="visible">True</property>
-            <property name="margin-left">25</property>
+            <property name="margin-left">5</property>
             <property name="width-request">120</property>
             <style>
               <class name="reviewbar"/>
             </style>
           </object>
           <packing>
-            <property name="left-attach">2</property>
+            <property name="left-attach">1</property>
             <property name="top-attach">0</property>
             <property name="width">1</property>
             <property name="height">1</property>
@@ -60,20 +99,61 @@
             <property name="margin-left">5</property>
           </object>
           <packing>
-            <property name="left-attach">3</property>
+            <property name="left-attach">2</property>
             <property name="top-attach">0</property>
             <property name="width">1</property>
             <property name="height">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkImage" id="star4">
+          <object class="GtkBox" id="histogram_star4_box">
             <property name="visible">True</property>
-            <property name="icon_name">starred-symbolic</property>
-            <property name="sensitive">False</property>
-            <style>
-              <class name="star-disabled"/>
-            </style>
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkImage" id="star4_1">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star4_2">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star4_3">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star4_4">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left-attach">0</property>
@@ -83,27 +163,15 @@
           </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="star_label4">
-            <property name="visible">True</property>
-            <property name="label">4</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">1</property>
-            <property name="width">1</property>
-            <property name="height">1</property>
-          </packing>
-        </child>
-        <child>
           <object class="GsReviewBar" id="bar4">
             <property name="visible">True</property>
-            <property name="margin-left">25</property>
+            <property name="margin-left">5</property>
             <style>
               <class name="reviewbar"/>
             </style>
           </object>
           <packing>
-            <property name="left-attach">2</property>
+            <property name="left-attach">1</property>
             <property name="top-attach">1</property>
             <property name="width">1</property>
             <property name="height">1</property>
@@ -116,20 +184,51 @@
             <property name="margin-left">5</property>
           </object>
           <packing>
-            <property name="left-attach">3</property>
+            <property name="left-attach">2</property>
             <property name="top-attach">1</property>
             <property name="width">1</property>
             <property name="height">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkImage" id="star3">
+          <object class="GtkBox" id="histogram_star3_box">
             <property name="visible">True</property>
-            <property name="icon_name">starred-symbolic</property>
-            <property name="sensitive">False</property>
-            <style>
-              <class name="star-disabled"/>
-            </style>
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkImage" id="star3_1">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star3_2">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star3_3">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left-attach">0</property>
@@ -139,27 +238,15 @@
           </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="star_label3">
-            <property name="visible">True</property>
-            <property name="label">3</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">2</property>
-            <property name="width">1</property>
-            <property name="height">1</property>
-          </packing>
-        </child>
-        <child>
           <object class="GsReviewBar" id="bar3">
             <property name="visible">True</property>
-            <property name="margin-left">25</property>
+            <property name="margin-left">5</property>
             <style>
               <class name="reviewbar"/>
             </style>
           </object>
           <packing>
-            <property name="left-attach">2</property>
+            <property name="left-attach">1</property>
             <property name="top-attach">2</property>
             <property name="width">1</property>
             <property name="height">1</property>
@@ -172,20 +259,41 @@
             <property name="margin-left">5</property>
           </object>
           <packing>
-            <property name="left-attach">3</property>
+            <property name="left-attach">2</property>
             <property name="top-attach">2</property>
             <property name="width">1</property>
             <property name="height">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkImage" id="star2">
+          <object class="GtkBox" id="histogram_star2_box">
             <property name="visible">True</property>
-            <property name="icon_name">starred-symbolic</property>
-            <property name="sensitive">False</property>
-            <style>
-              <class name="star-disabled"/>
-            </style>
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkImage" id="star2_1">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="star2_2">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left-attach">0</property>
@@ -195,27 +303,15 @@
           </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="star_label2">
-            <property name="visible">True</property>
-            <property name="label">2</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">3</property>
-            <property name="width">1</property>
-            <property name="height">1</property>
-          </packing>
-        </child>
-        <child>
           <object class="GsReviewBar" id="bar2">
             <property name="visible">True</property>
-            <property name="margin-left">25</property>
+            <property name="margin-left">5</property>
             <style>
               <class name="reviewbar"/>
             </style>
           </object>
           <packing>
-            <property name="left-attach">2</property>
+            <property name="left-attach">1</property>
             <property name="top-attach">3</property>
             <property name="width">1</property>
             <property name="height">1</property>
@@ -228,20 +324,31 @@
             <property name="margin-left">5</property>
           </object>
           <packing>
-            <property name="left-attach">3</property>
+            <property name="left-attach">2</property>
             <property name="top-attach">3</property>
             <property name="width">1</property>
             <property name="height">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkImage" id="star1">
+          <object class="GtkBox" id="histogram_star1_box">
             <property name="visible">True</property>
-            <property name="icon_name">starred-symbolic</property>
-            <property name="sensitive">False</property>
-            <style>
-              <class name="star-disabled"/>
-            </style>
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkImage" id="star1_1">
+                <property name="visible">True</property>
+                <property name="icon_name">starred-symbolic</property>
+                <property name="sensitive">False</property>
+                <style>
+                  <class name="star-disabled"/>
+                </style>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left-attach">0</property>
@@ -251,27 +358,15 @@
           </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="star_label1">
-            <property name="visible">True</property>
-            <property name="label">1</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">4</property>
-            <property name="width">1</property>
-            <property name="height">1</property>
-          </packing>
-        </child>
-        <child>
           <object class="GsReviewBar" id="bar1">
             <property name="visible">True</property>
-            <property name="margin-left">25</property>
+            <property name="margin-left">5</property>
             <style>
               <class name="reviewbar"/>
             </style>
           </object>
           <packing>
-            <property name="left-attach">2</property>
+            <property name="left-attach">1</property>
             <property name="top-attach">4</property>
             <property name="width">1</property>
             <property name="height">1</property>
@@ -284,7 +379,7 @@
             <property name="margin-left">5</property>
           </object>
           <packing>
-            <property name="left-attach">3</property>
+            <property name="left-attach">2</property>
             <property name="top-attach">4</property>
             <property name="width">1</property>
             <property name="height">1</property>
@@ -294,7 +389,7 @@
           <object class="GtkLabel" id="label1">
             <property name="visible">True</property>
             <property name="label" translatable="yes">Total</property>
-            <property name="halign">start</property>
+            <property name="halign">end</property>
             <style>
               <class name="dim-label"/>
             </style>
@@ -302,7 +397,7 @@
           <packing>
             <property name="left-attach">0</property>
             <property name="top-attach">5</property>
-            <property name="width">3</property>
+            <property name="width">1</property>
             <property name="height">1</property>
           </packing>
         </child>
@@ -316,7 +411,7 @@
             </style>
           </object>
           <packing>
-            <property name="left-attach">3</property>
+            <property name="left-attach">2</property>
             <property name="top-attach">5</property>
             <property name="width">1</property>
             <property name="height">1</property>