[gnome-software/wip/jrocha/category-redesign: 1/9] Replace the category view side filter by a dropdown



commit 9944bf5000763be3a858425ba2f2a2bc4f450ea2
Author: Joaquim Rocha <jrocha endlessm com>
Date:   Wed Aug 9 23:35:12 2017 +0100

    Replace the category view side filter by a dropdown
    
    This is part of the new design for the category views where the
    subcategories are selected from a dropdown popover instead of a side
    list. The featured apps are also shown in a different way that will
    be implemented at a later stage but because of that we no longer allow
    to filter the Featured apps.

 src/gs-category-page.c  |   72 ++++++++++----------------------
 src/gs-category-page.ui |  104 +++++++++++++++++++++++++++++++++++------------
 2 files changed, 101 insertions(+), 75 deletions(-)
---
diff --git a/src/gs-category-page.c b/src/gs-category-page.c
index dccadc6..1311860 100644
--- a/src/gs-category-page.c
+++ b/src/gs-category-page.c
@@ -42,9 +42,10 @@ struct _GsCategoryPage
        GtkWidget       *infobar_category_shell_extensions;
        GtkWidget       *button_category_shell_extensions;
        GtkWidget       *category_detail_box;
-       GtkWidget       *listbox_filter;
        GtkWidget       *scrolledwindow_category;
-       GtkWidget       *scrolledwindow_filter;
+       GtkWidget       *subcats_filter_button_label;
+       GtkWidget       *subcats_filter_button;
+       GtkWidget       *popover_filter_box;
 };
 
 G_DEFINE_TYPE (GsCategoryPage, gs_category_page, GS_TYPE_PAGE)
@@ -168,15 +169,15 @@ gs_category_page_populate_filtered (GsCategoryPage *self, GsCategory *subcategor
 }
 
 static void
-filter_selected (GtkListBox *filters, GtkListBoxRow *row, gpointer data)
+filter_button_activated (GtkWidget *button,  gpointer data)
 {
        GsCategoryPage *self = GS_CATEGORY_PAGE (data);
        GsCategory *category;
 
-       if (row == NULL)
-               return;
+       category = g_object_get_data (G_OBJECT (button), "category");
 
-       category = g_object_get_data (G_OBJECT (gtk_bin_get_child (GTK_BIN (row))), "category");
+       gtk_label_set_text (GTK_LABEL (self->subcats_filter_button_label),
+                           gs_category_get_name (category));
        gs_category_page_populate_filtered (self, category);
 }
 
@@ -184,37 +185,40 @@ static void
 gs_category_page_create_filter_list (GsCategoryPage *self,
                                      GsCategory *category)
 {
-       GtkWidget *row;
+       GtkWidget *button;
        GsCategory *s;
        guint i;
        GPtrArray *children;
        GtkWidget *first_subcat = NULL;
 
        gs_container_remove_all (GTK_CONTAINER (self->category_detail_box));
-       gs_container_remove_all (GTK_CONTAINER (self->listbox_filter));
+       gs_container_remove_all (GTK_CONTAINER (self->popover_filter_box));
 
        children = gs_category_get_children (category);
        for (i = 0; i < children->len; i++) {
                s = GS_CATEGORY (g_ptr_array_index (children, i));
+               /* don't include the featured subcategory (those will appear as banners) */
+               if (g_strcmp0 (gs_category_get_id (s), "featured") == 0)
+                       continue;
                if (gs_category_get_size (s) < 1) {
                        g_debug ("not showing %s/%s as no apps",
                                 gs_category_get_id (category),
                                 gs_category_get_id (s));
                        continue;
                }
-               row = gtk_label_new (gs_category_get_name (s));
-               g_object_set_data_full (G_OBJECT (row), "category", g_object_ref (s), g_object_unref);
-               g_object_set (row, "xalign", 0.0, "margin", 10, NULL);
-               gtk_widget_show (row);
-               gtk_list_box_insert (GTK_LIST_BOX (self->listbox_filter), row, -1);
+               button = gtk_model_button_new ();
+               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)
-                       first_subcat = row;
+                       first_subcat = button;
        }
        if (first_subcat != NULL)
-               gtk_list_box_select_row (GTK_LIST_BOX (self->listbox_filter),
-                                        GTK_LIST_BOX_ROW (gtk_widget_get_parent (first_subcat)));
+               filter_button_activated (button, self);
 }
 
 void
@@ -262,32 +266,6 @@ gs_category_page_dispose (GObject *object)
        G_OBJECT_CLASS (gs_category_page_parent_class)->dispose (object);
 }
 
-static gboolean
-key_event (GtkWidget *listbox, GdkEvent *event, GsCategoryPage *self)
-{
-       guint keyval;
-       gboolean handled;
-
-       if (!gdk_event_get_keyval (event, &keyval))
-               return FALSE;
-
-       if (keyval == GDK_KEY_Page_Up ||
-           keyval == GDK_KEY_KP_Page_Up)
-               g_signal_emit_by_name (self->scrolledwindow_category, "scroll-child",
-                                      GTK_SCROLL_PAGE_UP, FALSE, &handled);
-       else if (keyval == GDK_KEY_Page_Down ||
-                keyval == GDK_KEY_KP_Page_Down)
-               g_signal_emit_by_name (self->scrolledwindow_category, "scroll-child",
-                                      GTK_SCROLL_PAGE_DOWN, FALSE, &handled);
-       else if (keyval == GDK_KEY_Tab ||
-                keyval == GDK_KEY_KP_Tab)
-               gtk_widget_child_focus (self->category_detail_box, GTK_DIR_TAB_FORWARD);
-       else
-               return FALSE;
-
-       return TRUE;
-}
-
 static void
 button_shell_extensions_cb (GtkButton *button, GsCategoryPage *self)
 {
@@ -315,14 +293,9 @@ gs_category_page_setup (GsPage *page,
        self->builder = g_object_ref (builder);
        self->shell = shell;
 
-       g_signal_connect (self->listbox_filter, "row-selected", G_CALLBACK (filter_selected), self);
-
        adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (self->scrolledwindow_category));
        gtk_container_set_focus_vadjustment (GTK_CONTAINER (self->category_detail_box), adj);
 
-       g_signal_connect (self->listbox_filter, "key-press-event",
-                         G_CALLBACK (key_event), self);
-
        g_signal_connect (self->button_category_shell_extensions, "clicked",
                          G_CALLBACK (button_shell_extensions_cb), self);
        return TRUE;
@@ -345,9 +318,10 @@ 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, 
infobar_category_shell_extensions);
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, button_category_shell_extensions);
-       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, listbox_filter);
        gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, scrolledwindow_category);
-       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, scrolledwindow_filter);
+       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, subcats_filter_button_label);
+       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, subcats_filter_button);
+       gtk_widget_class_bind_template_child (widget_class, GsCategoryPage, popover_filter_box);
 }
 
 GsCategoryPage *
diff --git a/src/gs-category-page.ui b/src/gs-category-page.ui
index 318a12e..a45177f 100644
--- a/src/gs-category-page.ui
+++ b/src/gs-category-page.ui
@@ -1,37 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.10"/>
+  <object class="GtkPopover" id="categories_popover">
+    <property name="position">bottom</property>
+    <child>
+      <object class="GtkBox" id="popover_filter_box">
+        <property name="visible">True</property>
+        <property name="margin">10</property>
+        <property name="orientation">vertical</property>
+      </object>
+    </child>
+  </object>
   <template class="GsCategoryPage" parent="GsPage">
     <child>
       <object class="GtkBox" id="box_category">
         <property name="visible">True</property>
         <child>
-          <object class="GtkScrolledWindow" id="scrolledwindow_filter">
-            <property name="width-request">220</property>
-            <property name="visible">True</property>
-            <property name="margin-top">0</property>
-            <property name="margin-bottom">0</property>
-            <property name="margin-start">0</property>
-            <property name="margin-end">12</property>
-            <property name="can_focus">True</property>
-            <property name="hscrollbar_policy">never</property>
-            <property name="vscrollbar_policy">automatic</property>
-            <property name="shadow_type">in</property>
-            <property name="valign">fill</property>
-            <style>
-              <class name="category-sidebar"/>
-            </style>
-            <child>
-              <object class="GtkListBox" id="listbox_filter">
-                <property name="visible">True</property>
-                <property name="margin-top">4</property>
-                <property name="selection_mode">browse</property>
-                <property name="halign">fill</property>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
           <object class="GtkBox" id="box_category_results">
             <property name="visible">True</property>
             <property name="orientation">vertical</property>
@@ -126,6 +110,66 @@
                             </child>
 
                             <child>
+                              <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="orientation">horizontal</property>
+                                <property name="margin_start">24</property>
+                                <property name="margin_end">24</property>
+                                <property name="margin_top">24</property>
+
+                                <child>
+                                  <object class="GtkMenuButton" id="subcats_filter_button">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">True</property>
+                                    <property name="receives_default">True</property>
+                                    <property name="relief">normal</property>
+                                    <property name="popover">categories_popover</property>
+                                    <child internal-child="accessible">
+                                      <object class="AtkObject">
+                                        <property name="accessible-name" translatable="yes">Subcategories 
filter menu</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkBox" id="grid1">
+                                        <property name="visible">True</property>
+                                        <property name="can_focus">False</property>
+                                        <property name="valign">center</property>
+                                        <property name="spacing">6</property>
+                                        <property name="orientation">horizontal</property>
+                                        <child>
+                                          <object class="GtkLabel" id="subcats_filter_button_label">
+                                            <property name="visible">True</property>
+                                            <property name="can_focus">False</property>
+                                            <property name="xalign">0.0</property>
+                                          </object>
+                                          <packing>
+                                            <property name="expand">True</property>
+                                            <property name="fill">False</property>
+                                          </packing>
+                                        </child>
+                                        <child>
+                                          <object class="GtkArrow" id="arrow1">
+                                            <property name="visible">True</property>
+                                            <property name="can_focus">False</property>
+                                            <property name="arrow_type">down</property>
+                                          </object>
+                                          <packing>
+                                            <property name="expand">False</property>
+                                            <property name="fill">False</property>
+                                          </packing>
+                                        </child>
+                                      </object>
+                                    </child>
+                                    <style>
+                                      <class name="text-button"/>
+                                    </style>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+
+                            <child>
                               <object class="GtkFlowBox" id="category_detail_box">
                                 <property name="margin_start">24</property>
                                 <property name="margin_end">24</property>
@@ -158,4 +202,12 @@
       </object>
     </child>
   </template>
+  <object class="GtkSizeGroup">
+    <property name="ignore-hidden">False</property>
+    <property name="mode">horizontal</property>
+    <widgets>
+      <widget name="subcats_filter_button_label"/>
+      <widget name="popover_filter_box"/>
+    </widgets>
+  </object>
 </interface>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]