[gnome-software] Make the UI match the new details page mockup

[Richard Hughes <rhughes src gnome org>]

commit 2d9dc93e7542b57ca2b0cd4c6f4473f3a53a878e
Author: Richard Hughes <richard hughsie com>
Date:   Thu Jan 28 15:02:46 2016 +0000

    Make the UI match the new details page mockup

 src/gs-shell-details.c  |   42 ++++++++++++++++++++++++++----------------
 src/gs-shell-details.ui |   24 ++++++++++++++++++------
 src/gtk-style.css       |   14 ++++++++++++++
 3 files changed, 58 insertions(+), 22 deletions(-)
---
diff --git a/src/gs-shell-details.c b/src/gs-shell-details.c
index de6c926..1f4a116 100644
--- a/src/gs-shell-details.c
+++ b/src/gs-shell-details.c
@@ -577,8 +577,10 @@ gs_shell_details_refresh_all (GsShellDetails *self)
        GPtrArray *history;
        GdkPixbuf *pixbuf = NULL;
        GList *addons;
+       GtkStyleContext *sc;
        GtkWidget *widget;
        const gchar *tmp;
+       gboolean ret;
        gchar **menu_path;
        guint64 kudos;
        guint64 updated;
@@ -736,32 +738,40 @@ gs_shell_details_refresh_all (GsShellDetails *self)
 
        /* set MyLanguage kudo */
        kudos = gs_app_get_kudos (self->app);
-       gs_shell_details_set_sensitive (self->image_details_kudo_translated,
-                                       kudos & GS_APP_KUDO_MY_LANGUAGE);
-       gs_shell_details_set_sensitive (self->label_details_kudo_translated,
-                                       kudos & GS_APP_KUDO_MY_LANGUAGE);
+       ret = (kudos & GS_APP_KUDO_MY_LANGUAGE) > 0;
+       gs_shell_details_set_sensitive (self->image_details_kudo_translated, ret);
+       gs_shell_details_set_sensitive (self->label_details_kudo_translated, ret);
+       sc = gtk_widget_get_style_context (self->image_details_kudo_translated);
+       ret ? gtk_style_context_add_class (sc, "kudo-pill-active") :
+             gtk_style_context_remove_class (sc, "kudo-pill-active");
 
        /* set RecentRelease kudo */
-       gs_shell_details_set_sensitive (self->image_details_kudo_updated,
-                                       kudos & GS_APP_KUDO_RECENT_RELEASE);
-       gs_shell_details_set_sensitive (self->label_details_kudo_updated,
-                                       kudos & GS_APP_KUDO_RECENT_RELEASE);
+       ret = (kudos & GS_APP_KUDO_RECENT_RELEASE) > 0;
+       gs_shell_details_set_sensitive (self->image_details_kudo_updated, ret);
+       gs_shell_details_set_sensitive (self->label_details_kudo_updated, ret);
+       sc = gtk_widget_get_style_context (self->image_details_kudo_updated);
+       ret ? gtk_style_context_add_class (sc, "kudo-pill-active") :
+             gtk_style_context_remove_class (sc, "kudo-pill-active");
 
        /* set UserDocs kudo */
-       gs_shell_details_set_sensitive (self->image_details_kudo_docs,
-                                       kudos & GS_APP_KUDO_INSTALLS_USER_DOCS);
-       gs_shell_details_set_sensitive (self->label_details_kudo_docs,
-                                       kudos & GS_APP_KUDO_INSTALLS_USER_DOCS);
+       ret = (kudos & GS_APP_KUDO_INSTALLS_USER_DOCS) > 0;
+       gs_shell_details_set_sensitive (self->image_details_kudo_docs, ret);
+       gs_shell_details_set_sensitive (self->label_details_kudo_docs, ret);
+       sc = gtk_widget_get_style_context (self->image_details_kudo_docs);
+       ret ? gtk_style_context_add_class (sc, "kudo-pill-active") :
+             gtk_style_context_remove_class (sc, "kudo-pill-active");
 
        /* any of the various integration kudos */
        user_integration_bf = GS_APP_KUDO_SEARCH_PROVIDER |
                              GS_APP_KUDO_USES_NOTIFICATIONS |
                              GS_APP_KUDO_USES_APP_MENU |
                              GS_APP_KUDO_HIGH_CONTRAST;
-       gs_shell_details_set_sensitive (self->image_details_kudo_integration,
-                                       kudos & user_integration_bf);
-       gs_shell_details_set_sensitive (self->label_details_kudo_integration,
-                                       kudos & user_integration_bf);
+       ret = (kudos & user_integration_bf) > 0;
+       gs_shell_details_set_sensitive (self->image_details_kudo_integration, ret);
+       gs_shell_details_set_sensitive (self->label_details_kudo_integration, ret);
+       sc = gtk_widget_get_style_context (self->image_details_kudo_integration);
+       ret ? gtk_style_context_add_class (sc, "kudo-pill-active") :
+             gtk_style_context_remove_class (sc, "kudo-pill-active");
 
        /* don't show a missing rating on a local file */
        if (gs_app_get_state (self->app) == AS_APP_STATE_AVAILABLE_LOCAL &&
diff --git a/src/gs-shell-details.ui b/src/gs-shell-details.ui
index 51a7dcc..73a63ee 100644
--- a/src/gs-shell-details.ui
+++ b/src/gs-shell-details.ui
@@ -639,9 +639,12 @@
                               <object class="GtkImage" id="image_details_kudo_translated">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="pixel_size">32</property>
+                                <property name="pixel_size">16</property>
                                 <property name="icon_name">preferences-desktop-locale-symbolic</property>
                                 <property name="icon_size">6</property>
+                                <style>
+                                  <class name="kudo-pill"/>
+                                </style>
                               </object>
                               <packing>
                                 <property name="left_attach">0</property>
@@ -652,8 +655,11 @@
                               <object class="GtkImage" id="image_details_kudo_docs">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="pixel_size">32</property>
-                                <property name="icon_name">accessories-dictionary-symbolic</property>
+                                <property name="pixel_size">16</property>
+                                <property name="icon_name">system-help-symbolic</property>
+                                <style>
+                                  <class name="kudo-pill"/>
+                                </style>
                               </object>
                               <packing>
                                 <property name="left_attach">0</property>
@@ -664,9 +670,12 @@
                               <object class="GtkImage" id="image_details_kudo_updated">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="pixel_size">32</property>
+                                <property name="pixel_size">16</property>
                                 <property name="icon_name">software-update-available-symbolic</property>
                                 <property name="icon_size">6</property>
+                                <style>
+                                  <class name="kudo-pill"/>
+                                </style>
                               </object>
                               <packing>
                                 <property name="left_attach">0</property>
@@ -677,9 +686,12 @@
                               <object class="GtkImage" id="image_details_kudo_integration">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="pixel_size">32</property>
-                                <property name="icon_name">system-run-symbolic</property>
+                                <property name="pixel_size">16</property>
+                                <property name="icon_name">emblem-system-symbolic</property>
                                 <property name="icon_size">0</property>
+                                <style>
+                                  <class name="kudo-pill"/>
+                                </style>
                               </object>
                               <packing>
                                 <property name="left_attach">0</property>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index a7aca4b..898fb1b 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -25,6 +25,20 @@
        border-radius: 1px;
 }
 
+.kudo-pill {
+       color: @theme_selected_fg_color;
+       background-color: shade(@theme_bg_color, 0.4);
+       width: 32px;
+       height: 32px;
+       border-radius: 16px;
+       padding: 8px;
+}
+
+.kudo-pill-active {
+       background-image: none;
+       background-color: shade(@theme_selected_bg_color, 1.1);
+}
+
 .screenshot-image, .screenshot-image-thumb {
        background-image: none;
        background-color: shade(@theme_bg_color, 0.9);