[gnome-software/wip/jrocha/category-redesign: 55/55] Add the header filter to the category view when viewing the Add-Ons

[Joaquim Manuel Pereira Rocha <jrocha src gnome org>]

commit 5fcad3901d87de266216ac118fd3336aaef7424e
Author: Joaquim Rocha <jrocha endlessm com>
Date:   Sun Aug 13 17:55:03 2017 +0100

    Add the header filter to the category view when viewing the Add-Ons
    
    The Add-Ons category uses a different widget to filter its
    subcategories: instead of a menu button, it uses a header with a few
    buttons that is similar to a GtkNotebook (in fact, the intention of the
    designer was to use a GtkNotebook but that is not how the category view
    is implemented).

 src/gs-category-page.c  |   35 +++++++++++++++++++++++++++++------
 src/gs-category-page.ui |   15 +++++++++++++++
 src/gtk-style.css       |   21 +++++++++++++++++++++
 3 files changed, 65 insertions(+), 6 deletions(-)
---
diff --git a/src/gs-category-page.c b/src/gs-category-page.c
index 0c3a94e..cb5a667 100644
--- a/src/gs-category-page.c
+++ b/src/gs-category-page.c
@@ -61,6 +61,7 @@ struct _GsCategoryPage
        GtkWidget       *sort_rating_button;
        GtkWidget       *sort_name_button;
        GtkWidget       *featured_grid;
+       GtkWidget       *header_filter_box;
 };
 
 G_DEFINE_TYPE (GsCategoryPage, gs_category_page, GS_TYPE_PAGE)
@@ -366,9 +367,15 @@ filter_button_activated (GtkWidget *button,  gpointer data)
        gs_category_page_populate_filtered (self, category);
 }
 
+static gboolean
+gs_category_page_should_use_header_filter (GsCategory *category)
+{
+       return g_strcmp0 (gs_category_get_id (category), "addons") == 0;
+}
+
 static void
-gs_category_page_create_filter_list (GsCategoryPage *self,
-                                     GsCategory *category)
+gs_category_page_create_filter (GsCategoryPage *self,
+                               GsCategory *category)
 {
        GtkWidget *button;
        GsCategory *s;
@@ -376,6 +383,7 @@ gs_category_page_create_filter_list (GsCategoryPage *self,
        GPtrArray *children;
        GtkWidget *first_subcat = NULL;
        gboolean featured_category_found = FALSE;
+       gboolean use_header_filter = gs_category_page_should_use_header_filter (category);
 
        gs_container_remove_all (GTK_CONTAINER (self->category_detail_box));
        gs_container_remove_all (GTK_CONTAINER (self->popover_filter_box));
@@ -394,12 +402,22 @@ gs_category_page_create_filter_list (GsCategoryPage *self,
                                 gs_category_get_id (s));
                        continue;
                }
-               button = gtk_model_button_new ();
+
+               /* create the right button type depending on where it will be used */
+               if (use_header_filter) {
+                       button = gtk_radio_button_new_from_widget (GTK_RADIO_BUTTON (button));
+                       g_object_set (button, "xalign", 0.5, "label", gs_category_get_name (s),
+                                     "draw-indicator", FALSE, "relief", GTK_RELIEF_NONE, NULL);
+                       gtk_container_add (GTK_CONTAINER (self->header_filter_box), button);
+               } else {
+                       button = gtk_model_button_new ();
+                       g_object_set (button, "xalign", 0.0, "text", gs_category_get_name (s), NULL);
+                       gtk_container_add (GTK_CONTAINER (self->popover_filter_box), button);
+               }
+
                g_object_set_data_full (G_OBJECT (button), "category", g_object_ref (s), g_object_unref);
-               g_object_set (button, "xalign", 0.0, "text", gs_category_get_name (s), NULL);
                gtk_widget_show (button);
                g_signal_connect (button, "clicked", G_CALLBACK (filter_button_activated), self);
-               gtk_container_add (GTK_CONTAINER (self->popover_filter_box), button);
 
                /* make sure the first subcategory gets selected */
                if (first_subcat == NULL)
@@ -408,6 +426,10 @@ gs_category_page_create_filter_list (GsCategoryPage *self,
        if (first_subcat != NULL)
                filter_button_activated (first_subcat, self);
 
+       /* show only the adequate filter */
+       gtk_widget_set_visible (self->subcats_filter_button, !use_header_filter);
+       gtk_widget_set_visible (self->header_filter_box, use_header_filter);
+
        /* set up the placeholders as having the featured category is a good
         * indicator that there will be featured apps */
        if (featured_category_found) {
@@ -430,7 +452,7 @@ gs_category_page_set_category (GsCategoryPage *self, GsCategory *category)
        self->category = g_object_ref (category);
 
        /* find apps in this group */
-       gs_category_page_create_filter_list (self, category);
+       gs_category_page_create_filter (self, category);
 }
 
 GsCategory *
@@ -527,6 +549,7 @@ gs_category_page_class_init (GsCategoryPageClass *klass)
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, sort_rating_button);
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, sort_name_button);
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, featured_grid);
+       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, header_filter_box);
 }
 
 GsCategoryPage *
diff --git a/src/gs-category-page.ui b/src/gs-category-page.ui
index 9c1c07d..cdab52e 100644
--- a/src/gs-category-page.ui
+++ b/src/gs-category-page.ui
@@ -74,6 +74,21 @@
                             <property name="spacing">9</property>
                             <property name="valign">start</property>
                             <child>
+                              <object class="GtkBox" id="header_filter_box">
+                                <property name="visible">True</property>
+                                <property name="orientation">horizontal</property>
+                                <property name="homogeneous">True</property>
+                                <style>
+                                  <class name="category_page_header_filter_box"/>
+                                </style>
+                              </object>
+                              <packing>
+                                <property name="expand">False</property>
+                                <property name="fill">False</property>
+                                <property name="pack-type">start</property>
+                              </packing>
+                            </child>
+                            <child>
                               <object class="GtkGrid" id="featured_grid">
                                 <property name="visible">False</property>
                                 <property name="can_focus">False</property>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index cc3565d..e0d4cc7 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -451,3 +451,24 @@ flowboxchild {
        border: 1px solid shade(@theme_selected_bg_color, 0.8);
        color: @theme_selected_fg_color;
 }
+
+.category_page_header_filter_box .radio, .category_page_header_filter_box .radio:hover {
+       background-color: transparent; background-image: none;
+       box-shadow: none;
+       border: none;
+       border-radius: 0;
+       border-bottom: 4px solid transparent;
+}
+
+.category_page_header_filter_box .radio:hover {
+       border-bottom-color: @theme_selected_bg_color;
+}
+
+.category_page_header_filter_box .radio:checked {
+       border-bottom-color: @theme_selected_bg_color;
+}
+
+.category_page_header_filter_box {
+       background-color: #cfcfcd;
+       border-bottom: 1px solid darker(#cfcfcd);
+}