[gnome-software] Improve the tile style

[Richard Hughes <rhughes src gnome org>]

commit b19f8b4084b96908e5ca7bbab6120884f54e2a92
Author: Nikita Churaev <lamefun x0r gmail com>
Date:   Wed Mar 7 12:44:56 2018 +0300

    Improve the tile style
    
    Export the tile color as a defined color instead of hardcoding the exact style,
    and allow category tiles to be distinguished from other tiles by CSS.

 src/gs-category-tile.c  | 33 ++++++++++++++++++++++++----
 src/gs-category-tile.ui |  1 +
 src/gtk-style.css       | 57 ++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 77 insertions(+), 14 deletions(-)
---
diff --git a/src/gs-category-tile.c b/src/gs-category-tile.c
index 7d4c15ce..bcbabd2e 100644
--- a/src/gs-category-tile.c
+++ b/src/gs-category-tile.c
@@ -24,6 +24,9 @@
 #include "gs-category-tile.h"
 #include "gs-common.h"
 
+#define COLORFUL_TILE_CLASS "colorful"
+#define COLORFUL_TILE_PROVIDER_KEY "GnomeSoftware::colorful-tile-provider"
+
 struct _GsCategoryTile
 {
        GtkButton        parent_instance;
@@ -48,6 +51,10 @@ static void
 gs_category_tile_refresh (GsCategoryTile *tile)
 {
        GPtrArray *key_colors;
+       GtkStyleContext *context;
+
+       /* get the style context */
+       context = gtk_widget_get_style_context (GTK_WIDGET (tile));
 
        /* set labels */
        gtk_label_set_label (GTK_LABEL (tile->label),
@@ -60,12 +67,30 @@ gs_category_tile_refresh (GsCategoryTile *tile)
        key_colors = gs_category_get_key_colors (tile->cat);
        if (tile->colorful && key_colors->len > 0) {
                GdkRGBA *tmp = g_ptr_array_index (key_colors, 0);
+               g_autoptr(GtkCssProvider) provider = NULL;
                g_autofree gchar *css = NULL;
-               g_autofree gchar *color = gdk_rgba_to_string (tmp);;
-               css = g_strdup_printf ("border-bottom: 3px solid %s", color);
-               gs_utils_widget_set_css (GTK_WIDGET (tile), css);
+               g_autofree gchar *color = gdk_rgba_to_string (tmp);
+
+               css = g_strdup_printf ("@define-color gs_tile_color %s;", color);
+
+               provider = gtk_css_provider_new ();
+               gtk_css_provider_load_from_data (provider, css, -1, NULL);
+
+               gtk_style_context_add_class (context, COLORFUL_TILE_CLASS);
+               gtk_style_context_add_provider (context, GTK_STYLE_PROVIDER (provider),
+                                               GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+               g_object_set_data_full (G_OBJECT (tile),
+                                       COLORFUL_TILE_PROVIDER_KEY,
+                                       g_object_ref (provider),
+                                       g_object_unref);
        } else {
-               gs_utils_widget_set_css (GTK_WIDGET (tile), NULL);
+               GtkStyleProvider *provider = g_object_get_data (G_OBJECT (tile),
+                                                               COLORFUL_TILE_PROVIDER_KEY);
+               if (provider) {
+                       gtk_style_context_remove_class (context, COLORFUL_TILE_CLASS);
+                       gtk_style_context_remove_provider (context, provider);
+               }
        }
 }
 
diff --git a/src/gs-category-tile.ui b/src/gs-category-tile.ui
index 8cf9d58c..2a9ccee4 100644
--- a/src/gs-category-tile.ui
+++ b/src/gs-category-tile.ui
@@ -6,6 +6,7 @@
     <style>
       <class name="view"/>
       <class name="tile"/>
+      <class name="category-tile"/>
     </style>
     <child>
       <object class="GtkBox" id="box">
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 0dab2ee2..7e42b9f3 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -181,12 +181,37 @@
        padding: 6px;
 }
 
+@define-color gs_tile_bg_color mix(@theme_base_color,@theme_bg_color,0.3);
+@define-color gs_tile_borders mix(@gs_tile_bg_color,@theme_fg_color,0.3);
+@define-color gs_tile_borders_alpha alpha(@theme_fg_color,0.3);
+
 .view.tile {
-       padding: 0;
-       box-shadow: inset 0 1px @theme_base_color, 0 1px 1px alpha(black,0.4);
-       border: 1px solid mix(@theme_base_color,@theme_fg_color,0.3);
-       background-image: none;
-       background-color: mix(@theme_base_color,@theme_bg_color,0.3);
+       padding: 1px;
+       border: none;
+       box-shadow: inset 0 2px 0 @theme_base_color,
+                   inset 0 -2px 0 mix(@gs_tile_bg_color,@gs_tile_borders,0.5),
+                   inset 0 0 0 1px @gs_tile_borders,
+                   inset 0 -3px 0 -2px shade(@gs_tile_borders,0.75);
+       background: @gs_tile_bg_color;
+}
+
+.view.category-tile {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.view.tile.colorful:not(:backdrop) {
+    background-image: linear-gradient(to top,
+                                      shade(@gs_tile_color,0.9),
+                                      shade(@gs_tile_color,0.9) 2px,
+                                      @gs_tile_color 2px,
+                                      @gs_tile_color 4px,
+                                      @gs_tile_bg_color 4px,
+                                      @gs_tile_bg_color);
+       box-shadow: inset 0 2px 0 @theme_base_color,
+                   inset 0 -2px 0 transparent,
+                   inset 0 0 0 1px @gs_tile_borders_alpha,
+                   inset 0 -3px 0 -2px alpha(shade(@gs_tile_color,0.6),0.5);
 }
 
 .app-list {
@@ -197,15 +222,27 @@
        background-color: @theme_base_color;
 }
 
-.view.tile:active {
-       border-color: @theme_selected_bg_color;
-       box-shadow: none;
+/* Making some shadows transparent instead of replacing multiple shadows with
+   one shadow prevents some horrendous transition animations, which happen even
+   with backdrop transition disabled. */
+
+.view.tile:active,
+.view.tile.colorful:active {
+       background: @gs_tile_bg_color;
+       box-shadow: inset 0 2px 0 transparent,
+                inset 0 -2px 0 transparent,
+                inset 0 0 0 1px @theme_selected_bg_color,
+                inset 0 -3px 0 -2px transparent;
        color: @theme_selected_bg_color;
 }
 
 .view.tile:backdrop {
-       box-shadow: none;
-       border-color: @unfocused_borders;
+    box-shadow: inset 0 2px 0 transparent,
+                inset 0 -2px 0 transparent,
+                inset 0 0 0 1px @unfocused_borders,
+                inset 0 -3px 0 -2px transparent;
+    /* Tile transitions are choppy for me for some reason. */
+    transition: none;
 }
 
 /* The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c */