[gnome-software] Implement better featured graphics

[Matthias Clasen <matthiasc src gnome org>]

commit 4757b3a5dde884d2531492f336cf9d24e1ec5fa9
Author: Matthias Clasen <mclasen redhat com>
Date:   Fri Sep 6 22:00:55 2013 -0400

    Implement better featured graphics
    
    Instead of just a big image in a standard button, we show an
    image, title and subtitle with custom css that renders a gradient
    that makes it appear seamless. The stock button style is gone.

 src/gnome-software.ui   |   51 +++++++++++++++++++++++++++++++++++++++++----
 src/gs-shell-overview.c |   52 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 5 deletions(-)
---
diff --git a/src/gnome-software.ui b/src/gnome-software.ui
index e85f79f..bb511ac 100644
--- a/src/gnome-software.ui
+++ b/src/gnome-software.ui
@@ -317,15 +317,56 @@
                           <object class="GtkButton" id="featured_button">
                             <property name="visible">True</property>
                             <property name="receives_default">False</property>
-                            <property name="halign">center</property>
-                            <property name="relief">none</property>
+                            <property name="halign">fill</property>
                             <property name="margin_left">12</property>
                             <property name="margin_right">12</property>
+                            <style>
+                              <class name="featured-tile"/>
+                            </style>
                             <child>
-                              <object class="GtkImage" id="featured_image">
+                              <object class="GtkBox" id="featured_box">
                                 <property name="visible">True</property>
-                                <property name="can_focus">False</property>
-                                <property name="ypad">5</property>
+                                <property name="orientation">horizontal</property>
+                                <property name="hexpand">True</property>
+                                <child>
+                                  <object class="GtkImage" id="featured_image">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                            <style>
+                              <class name="featured-image"/>
+                            </style>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkBox" id="featured_title_box">
+                                    <property name="visible">True</property>
+                                    <property name="orientation">vertical</property>
+                                    <property name="margin">40</property>
+                                    <child>
+                                      <object class="GtkLabel" id="featured_title">
+                                        <property name="visible">True</property>
+                                        <property name="xalign">0</property>
+                                        <property name="halign">start</property>
+                                        <property name="valign">end</property>
+                                        <attributes>
+                                          <attribute name="scale" value="2.5"/>
+                                          <attribute name="weight" value="700"/>
+                                        </attributes>
+                                      </object>
+                                      <packing>
+                                        <property name="expand">True</property>
+                                      </packing>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel" id="featured_subtitle">
+                                        <property name="visible">True</property>
+                                        <property name="xalign">0</property>
+                                        <property name="halign">start</property>
+                                        <property name="valign">start</property>
+                                      </object>
+                                    </child>
+                                  </object>
+                                </child>
                               </object>
                             </child>
                           </object>
diff --git a/src/gs-shell-overview.c b/src/gs-shell-overview.c
index 25e0905..9ae9441 100644
--- a/src/gs-shell-overview.c
+++ b/src/gs-shell-overview.c
@@ -262,6 +262,10 @@ gs_shell_overview_get_featured_cb (GObject *source_object,
        GsPluginLoader *plugin_loader = GS_PLUGIN_LOADER (source_object);
        GtkImage *image;
        GtkWidget *button;
+       GtkWidget *widget;
+        const gchar *text;
+        gchar *css;
+        GtkCssProvider *provider;
 
        list = gs_plugin_loader_get_featured_finish (plugin_loader,
                                                     res,
@@ -277,11 +281,59 @@ gs_shell_overview_get_featured_cb (GObject *source_object,
        image = GTK_IMAGE (gtk_builder_get_object (priv->builder, "featured_image"));
        pixbuf = gs_app_get_featured_pixbuf (app);
        gtk_image_set_from_pixbuf (image, pixbuf);
+
+       widget = GTK_WIDGET (gtk_builder_get_object (priv->builder, "featured_title"));
+        text = gs_app_get_metadata_item (app, "featured-title");
+        gtk_label_set_label (GTK_LABEL (widget), text);
+
+       widget = GTK_WIDGET (gtk_builder_get_object (priv->builder, "featured_subtitle"));
+        text = gs_app_get_metadata_item (app, "featured-subtitle");
+        gtk_label_set_label (GTK_LABEL (widget), text);
+
        button = GTK_WIDGET (gtk_builder_get_object (priv->builder, "featured_button"));
        g_object_set_data_full (G_OBJECT (button), "app", app, g_object_unref);
        g_signal_connect (button, "clicked",
                          G_CALLBACK (app_tile_clicked), shell_overview);
 
+        css = g_strdup_printf (
+                ".button.featured-tile {\n"
+                "  padding: 0;\n"
+                "  border-radius: 0;\n"
+                "  border-width: 1px;\n"
+                "  border-image: none;\n"
+                "  border-color: %s;\n"
+                "  color: %s;\n"
+                "  -GtkWidget-focus-padding: 0;\n"
+                "  outline-color: alpha(%s, 0.75);\n"
+                "  outline-style: dashed;\n"
+                "  outline-offset: 2px;\n"
+                "  background-image: -gtk-gradient(linear,\n"
+                "                       0 0, 0 1,\n"
+                "                       color-stop(0,%s),\n"
+                "                       color-stop(1,%s));\n"
+                "}\n"
+                ".button.featured-tile:hover {\n"
+                "  background-image: -gtk-gradient(linear,\n"
+                "                       0 0, 0 1,\n"
+                "                       color-stop(0,alpha(%s,0.80)),\n"
+                "                       color-stop(1,alpha(%s,0.80)));\n"
+                "}\n",
+                gs_app_get_metadata_item (app, "featured-stroke-color"),
+                gs_app_get_metadata_item (app, "featured-text-color"),
+                gs_app_get_metadata_item (app, "featured-text-color"),
+                gs_app_get_metadata_item (app, "featured-gradient1-color"),
+                gs_app_get_metadata_item (app, "featured-gradient2-color"),
+                gs_app_get_metadata_item (app, "featured-gradient1-color"),
+                gs_app_get_metadata_item (app, "featured-gradient2-color"));
+
+        provider = gtk_css_provider_new ();
+        gtk_css_provider_load_from_data (provider, css, -1, NULL);
+        gtk_style_context_add_provider_for_screen (gtk_widget_get_screen (button),
+                                                   GTK_STYLE_PROVIDER (provider),
+                                                   GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+        g_free (css);
+
 out:
        g_list_free (list);