[gnome-software: 3/4] gs-category-tile: Support a smaller, quieter iconless mode

[Milan Crha <mcrha src gnome org>]

commit 64cefceeee4faf3612bb2e1595afd4418f922012
Author: Philip Withnall <pwithnall endlessos org>
Date:   Fri Aug 20 17:33:13 2021 +0100

    gs-category-tile: Support a smaller, quieter iconless mode
    
    The icon isn’t present for less important categories (such as addons).
    Hide the icon, left-align the label and add some CSS to make the
    category tiles less loud if no icon is provided.
    
    See the design here: https://gitlab.gnome.org/GNOME/gnome-software/-/merge_requests/940#note_1252805
    
    Signed-off-by: Philip Withnall <pwithnall endlessos org>
    
    Helps: #1384

 src/gs-category-tile.c | 20 +++++++++++++++++++-
 src/gtk-style.css      | 20 +++++++++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)
---
diff --git a/src/gs-category-tile.c b/src/gs-category-tile.c
index 4a21fcadc..fef3bc433 100644
--- a/src/gs-category-tile.c
+++ b/src/gs-category-tile.c
@@ -32,6 +32,7 @@ struct _GsCategoryTile
        GsCategory      *category;  /* (owned) (not nullable) */
        GtkWidget       *label;
        GtkWidget       *image;
+       GtkBox          *box;
 };
 
 G_DEFINE_TYPE (GsCategoryTile, gs_category_tile, GTK_TYPE_BUTTON)
@@ -92,12 +93,28 @@ gs_category_tile_get_category (GsCategoryTile *tile)
 static void
 gs_category_tile_refresh (GsCategoryTile *tile)
 {
+       GtkStyleContext *context;
+       const gchar *icon_name = gs_category_get_icon_name (tile->category);
+
        /* set labels */
        gtk_label_set_label (GTK_LABEL (tile->label),
                             gs_category_get_name (tile->category));
+
        gtk_image_set_from_icon_name (GTK_IMAGE (tile->image),
-                                     gs_category_get_icon_name (tile->category),
+                                     icon_name,
                                      GTK_ICON_SIZE_DND);
+       gtk_widget_set_visible (tile->image, icon_name != NULL);
+
+       /* Update the icon class. */
+       context = gtk_widget_get_style_context (GTK_WIDGET (tile));
+       if (icon_name != NULL)
+               gtk_style_context_remove_class (context, "category-tile-iconless");
+       else
+               gtk_style_context_add_class (context, "category-tile-iconless");
+
+       /* The label should be left-aligned for iconless categories and centred otherwise. */
+       gtk_widget_set_halign (GTK_WIDGET (tile->box),
+                              (icon_name != NULL) ? GTK_ALIGN_CENTER : GTK_ALIGN_START);
 }
 
 /**
@@ -184,6 +201,7 @@ gs_category_tile_class_init (GsCategoryTileClass *klass)
 
        gtk_widget_class_bind_template_child (widget_class, GsCategoryTile, label);
        gtk_widget_class_bind_template_child (widget_class, GsCategoryTile, image);
+       gtk_widget_class_bind_template_child (widget_class, GsCategoryTile, box);
 }
 
 /**
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 2e618d2e4..3e5a0d474 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -153,7 +153,7 @@ summary-tile {
 /* This mimicks the style of list and row from Adwaita, and of list.content from
  * Libhandy. */
 
-.view.tile {
+.view.tile, .category-tile.category-tile-iconless {
   background-color: @theme_base_color;
   border-radius: 8px;
   border: solid 1px alpha(@borders, 0.7);
@@ -162,19 +162,19 @@ summary-tile {
   transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.view.tile:hover {
+.view.tile:hover, .category-tile.category-tile-iconless:hover {
   background-color: mix(@theme_fg_color, @theme_base_color, 0.95);
 }
 
-.view.tile:backdrop:hover {
+.view.tile:backdrop:hover, .category-tile.category-tile-iconless:backdrop:hover {
   background-color: transparent;
 }
 
-.view.tile:active {
+.view.tile:active, .category-tile.category-tile-iconless:active {
   box-shadow: inset 0 2px 2px -2px mix(black, transparent, 0.8);
 }
 
-.view.tile:hover:active {
+.view.tile:hover:active, .category-tile.category-tile-iconless:hover:active {
   background-color: mix(@theme_fg_color, @theme_base_color, 0.9);
 }
 
@@ -191,14 +191,20 @@ summary-tile {
        transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-clamp.medium .category-tile {
+clamp.medium .category-tile:not(.category-tile-iconless) {
        font-size: large;
 }
 
-clamp.large .category-tile {
+clamp.large .category-tile:not(.category-tile-iconless) {
        font-size: larger;
 }
 
+.category-tile.category-tile-iconless {
+       font-weight: normal;
+       padding: 10px 15px;
+       background-image: none;
+}
+
 /* Disable highlight on hover as it doesn’t make these icons look good */
 .category-tile:hover { -gtk-icon-effect: none }