[gnome-software: 5/24] gs-category-page: Convert the featured apps grid to a GtkFlowBox

[Milan Crha <mcrha src gnome org>]

commit 790879397c282cd35fbfa5ad63024950be69fb74
Author: Philip Withnall <pwithnall endlessos org>
Date:   Wed Apr 21 16:22:55 2021 +0100

    gs-category-page: Convert the featured apps grid to a GtkFlowBox
    
    This allows many more featured apps to be listed, in multiple rows.
    Currently, that doesn’t work as the code limits the number of apps to 3.
    
    Signed-off-by: Philip Withnall <pwithnall endlessos org>

 src/gs-category-page.c  | 22 +++++++++++-----------
 src/gs-category-page.ui | 14 +++++++++++---
 2 files changed, 22 insertions(+), 14 deletions(-)
---
diff --git a/src/gs-category-page.c b/src/gs-category-page.c
index ea6cfbfb2..c1811481b 100644
--- a/src/gs-category-page.c
+++ b/src/gs-category-page.c
@@ -31,7 +31,7 @@ struct _GsCategoryPage
 
        GtkWidget       *category_detail_box;
        GtkWidget       *scrolledwindow_category;
-       GtkWidget       *featured_grid;
+       GtkWidget       *featured_flow_box;
 };
 
 G_DEFINE_TYPE (GsCategoryPage, gs_category_page, GS_TYPE_PAGE)
@@ -100,15 +100,15 @@ _max_results_sort_cb (GsApp *app1, GsApp *app2, gpointer user_data)
 static void
 gs_category_page_set_featured_placeholders (GsCategoryPage *self)
 {
-       gs_container_remove_all (GTK_CONTAINER (self->featured_grid));
+       gs_container_remove_all (GTK_CONTAINER (self->featured_flow_box));
        for (guint i = 0; i < 3; ++i) {
                GtkWidget *tile = gs_summary_tile_new (NULL);
                g_signal_connect (tile, "clicked",
                                  G_CALLBACK (app_tile_clicked), self);
-               gtk_grid_attach (GTK_GRID (self->featured_grid), tile, i, 0, 1, 1);
+               gtk_container_add (GTK_CONTAINER (self->featured_flow_box), tile);
                gtk_widget_set_can_focus (gtk_widget_get_parent (tile), FALSE);
        }
-       gtk_widget_show (self->featured_grid);
+       gtk_widget_show (self->featured_flow_box);
 }
 
 static void
@@ -123,8 +123,8 @@ gs_category_page_get_featured_apps_cb (GObject *source_object,
        g_autoptr(GError) error = NULL;
        g_autoptr(GsAppList) list = NULL;
 
-       gs_container_remove_all (GTK_CONTAINER (self->featured_grid));
-       gtk_widget_hide (self->featured_grid);
+       gs_container_remove_all (GTK_CONTAINER (self->featured_flow_box));
+       gtk_widget_hide (self->featured_flow_box);
 
        list = gs_plugin_loader_job_process_finish (plugin_loader,
                                                    res,
@@ -148,11 +148,11 @@ gs_category_page_get_featured_apps_cb (GObject *source_object,
                tile = gs_summary_tile_new (app);
                g_signal_connect (tile, "clicked",
                                  G_CALLBACK (app_tile_clicked), self);
-               gtk_grid_attach (GTK_GRID (self->featured_grid), tile, i, 0, 1, 1);
+               gtk_container_add (GTK_CONTAINER (self->featured_flow_box), tile);
                gtk_widget_set_can_focus (gtk_widget_get_parent (tile), FALSE);
        }
 
-       gtk_widget_show (self->featured_grid);
+       gtk_widget_show (self->featured_flow_box);
 }
 
 static void
@@ -273,8 +273,8 @@ gs_category_page_create_filter (GsCategoryPage *self,
                 * indicator that there will be featured apps */
                gs_category_page_set_featured_placeholders (self);
        } else {
-               gs_container_remove_all (GTK_CONTAINER (self->featured_grid));
-               gtk_widget_hide (self->featured_grid);
+               gs_container_remove_all (GTK_CONTAINER (self->featured_flow_box));
+               gtk_widget_hide (self->featured_flow_box);
        }
 }
 
@@ -385,7 +385,7 @@ gs_category_page_class_init (GsCategoryPageClass *klass)
 
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, category_detail_box);
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, scrolledwindow_category);
-       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, featured_grid);
+       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, featured_flow_box);
 }
 
 GsCategoryPage *
diff --git a/src/gs-category-page.ui b/src/gs-category-page.ui
index 67a395f61..3863b677a 100644
--- a/src/gs-category-page.ui
+++ b/src/gs-category-page.ui
@@ -25,14 +25,14 @@
                     <property name="valign">start</property>
                     <child>
                       <object class="GtkLabel" id="featured_heading">
-                        <property name="visible" bind-source="featured_grid" bind-property="visible" 
bind-flags="sync-create|bidirectional" />
+                        <property name="visible" bind-source="featured_flow_box" bind-property="visible" 
bind-flags="sync-create|bidirectional" />
                         <property name="xalign">0</property>
                         <property name="margin_start">24</property>
                         <property name="margin_top">24</property>
                         <property name="margin_end">24</property>
                         <property name="label" translatable="yes" comments="Heading for featured apps on a 
category page">Editor’s Picks</property>
                         <accessibility>
-                          <relation target="featured_grid" type="label-for"/>
+                          <relation target="featured_flow_box" type="label-for"/>
                         </accessibility>
                         <style>
                           <class name="index-title-alignment-software"/>
@@ -40,11 +40,19 @@
                       </object>
                     </child>
                     <child>
-                      <object class="GtkGrid" id="featured_grid">
+                      <object class="GtkFlowBox" id="featured_flow_box">
                         <property name="visible">False</property>
                         <property name="column_spacing">14</property>
                         <property name="margin_start">24</property>
                         <property name="margin_end">24</property>
+                        <property name="halign">fill</property>
+                        <property name="row_spacing">14</property>
+                        <property name="homogeneous">True</property>
+                        <property name="hexpand">True</property>
+                        <property name="vexpand">True</property>
+                        <property name="valign">start</property>
+                        <property name="min-children-per-line">2</property>
+                        <property name="selection-mode">none</property>
                       </object>
                     </child>