Merge lp:~elementary-pantheon/switchboard/flowbox into lp:~elementary-pantheon/switchboard/switchboard

[Danielle Foré]

CategoryView.vala:
* Rewrite the icon views as FlowBoxes
* Update copyright header

Switchboard.vala:
* Code Style
* Update calls to icon views to FlowBoxes

Schemas:
* Update default window size to fit default plug icons

Widgets:
* Add CategoryFlowBox and CategoryIcon widgets

I've been staring at this code long enough to probably not realize if I'm doing dumb things. I have noticed two regressions, but I'm not sure what's causing them:

* Pressing down from search entry skips personal category
* [GLib] g_sequence_get: assertion '!is_end (iter)' failed

[lp:~elementary-pantheon/switchboard/flowbox]

655. By Danielle Foré on 2016-05-12

update default size to fit default plugs

656. By Danielle Foré on 2016-05-12

fix copyright dates in new widgets

[Adam Bieńkowski (donadigo)]

It works & looks great for me, besides those issues that are pointed out in the description.

review: Approve (testing)

[Zisu Andrei (matzipan)]

I personally don't like how it splits the distance equally between icons, it leads to a huge gap between them. Furthermore, it seems that even if there is enough space, the Wacom tablet icon in the Hardware flexbox is still saying on a separate line.

It seems if you have two rows of icons in "Personal", it only skips the first row, so it goes to the first icon in the second row. Maybe there's some overlap?

Below is the log of a gdb session where you can see the stacktrace of where that g_sequence_get assert failure is happening:

(gdb) bt
#0 0x00007ffff60063c0 in g_sequence_get (iter=0xc0c4c0)
    at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./glib/gsequence.c:1186
#1 0x0000000000411e48 in switchboard_category_has_child ()
#2 0x000000000040edd4 in switchboard_category_view_filter_plugs ()
#3 0x000000000040e793 in switchboard_category_view_add_plug ()
#4 0x000000000040e10b in __lambda11_ ()
#5 0x000000000040e15c in ___lambda11__gsource_func ()
#6 0x00007ffff5febfda in g_main_context_dispatch (context=0x666cb0)
    at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./glib/gmain.c:3154
#7 0x00007ffff5febfda in g_main_context_dispatch (context=context@entry=0x666cb0)
    at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./glib/gmain.c:3769
#8 0x00007ffff5fec380 in g_main_context_iterate (context=0x666cb0, block=block@entry=1, dispatch=dispatch@entry=1, self=<optimized out>) at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./glib/gmain.c:3840
#9 0x00007ffff5fec6a2 in g_main_loop_run (loop=0xc96f40)
    at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./glib/gmain.c:4034
#10 0x00007ffff6a9f6f5 in gtk_main () at /usr/lib/x86_64-linux-gnu/libgtk-3.so.0
#11 0x0000000000407640 in _switchboard_switchboard_app_command_line ()
#12 0x0000000000406a62 in switchboard_switchboard_app_real_command_line ()
#13 0x00007ffff1c42e40 in ffi_call_unix64 () at /usr/lib/x86_64-linux-gnu/libffi.so.6
#14 0x00007ffff1c428ab in ffi_call () at /usr/lib/x86_64-linux-gnu/libffi.so.6
#15 0x00007ffff62c3cf5 in g_cclosure_marshal_generic_va (closure=0x70b480, return_value=0x7fffffffd9d0, instance=0xa8e150, args_list=<optimized out>, marshal_data=0x4069e4 <switchboard_switchboard_app_real_command_line>, n_params=1, param_types=0x70b4f0) at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./gobject/gclosure.c:1604
#16 0x00007ffff62c31d4 in _g_closure_invoke_va (closure=closure@entry=0x70b480, return_value=return_value@entry=0x7fffffffd9d0, instance=instance@entry=0xa8e150, args=args@entry=0x7fffffffdaa0, n_params=<optimized out>, param_types=0x70b4f0) at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./gobject/gclosure.c:867
#17 0x00007ffff62dd4b8 in g_signal_emit_valist (instance=0xa8e150, signal_id=<optimized out>, detail=0, var_args=var_args@entry=0x7fffffffdaa0) at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./gobject/gsignal.c:3294
#18 0x00007ffff62de08f in g_signal_emit (instance=instance@entry=0xa8e150, signal_id=<optimized out>, detail=detail@entry=0) at /build/glib2.0-t9oPgV/glib2.0-2.48.0/./gobject/gsignal.c:3441
#19 0x00007ffff65b1a13 in g_application_call_command_line (application=0xa8e150 [SwitchboardSwitchboardApp], arguments=<optimized out>, options=<optimized out>, exit_status=0x7fffffffdcd4)
    at /build/glib2.0-t9oPgV/gl...

[Danielle Foré (danrabbit)]

Hm so it looks like it's throwing a fit over this line:
"foreach (unowned Gtk.Widget child in flowbox.get_children ())"

[Cassidy James Blaede (cassidyjames)]

Can confirm that this solves the HiDPI icon issues. Glorious, crispy icons. Under fairly normal window sizes, it appears to be working as I'd expect.

=== modified file 'schemas/org.pantheon.switchboard.gschema.xml'
--- schemas/org.pantheon.switchboard.gschema.xml	2015-03-31 02:42:20 +0000
+++ schemas/org.pantheon.switchboard.gschema.xml	2016-05-12 18:08:48 +0000
@@ -11,12 +11,12 @@
 			<description>The saved state of the window.</description>
 		</key>
 		<key name="window-width" type="i">
-			<default>920</default>
+			<default>950</default>
 			<summary>The saved width of the window.</summary>
 			<description>The saved width of the window. Must be greater than 700, or it will not take effect.</description>
 		</key>
 		<key name="window-height" type="i">
-			<default>640</default>
+			<default>670</default>
 			<summary>The saved height of the window.</summary>
 			<description>The saved height of the window. Must be greater than 400, or it will not take effect.</description>
 		</key>
 
=== modified file 'src/CMakeLists.txt'
--- src/CMakeLists.txt	2016-05-04 01:43:34 +0000
+++ src/CMakeLists.txt	2016-05-12 18:08:48 +0000
@@ -3,6 +3,8 @@
     CategoryView.vala
     PlugsSearch.vala
     NavigationButton.vala
+    Widgets/CategoryFlowBox.vala
+    Widgets/CategoryIcon.vala
 )
 
 vala_precompile (CLIENT_VALA_C ${CMAKE_PROJECT_NAME}
 
=== modified file 'src/CategoryView.vala'
--- src/CategoryView.vala	2016-05-04 01:43:34 +0000
+++ src/CategoryView.vala	2016-05-12 18:08:48 +0000
@@ -1,172 +1,54 @@
-/***
-BEGIN LICENSE
-Copyright (C) 2011-2012 Avi Romanoff <[e-mail]>
-This program is free software: you can redistribute it and/or modify it
-under the terms of the GNU Lesser General Public License version 2.1, as published
-by the Free Software Foundation.
-
-This program is distributed in the hope that it will be useful, but
-WITHOUT ANY WARRANTY; without even the implied warranties of
-MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR
-PURPOSE.  See the GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License along
-with this program.  If not, see <http://www.gnu.org/licenses/>.
-END LICENSE
-***/
+/*
+* Copyright (c) 2011-2016 elementary LLC (http://launchpad.net/switchboard)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+* Authored by: Avi Romanoff <[e-mail]>
+*/
 
 namespace Switchboard {
 
     public class CategoryView : Gtk.Grid {
-
-        public enum Columns {
-            ICON,
-            TEXT,
-            DESCRIPTION,
-            VISIBLE,
-            PLUG,
-            N_COLUMNS
-        }
-
-        const int ITEM_WIDTH = 96;
-
         public signal void plug_selected (Switchboard.Plug plug);
 
-        Gtk.IconTheme theme = Gtk.IconTheme.get_default ();
-        Gtk.Grid personal_grid;
-        Gtk.Grid hardware_grid;
-        Gtk.Grid network_grid;
-        Gtk.Grid system_grid;
-
-        public Gtk.IconView personal_iconview;
-        public Gtk.IconView hardware_iconview;
-        public Gtk.IconView network_iconview;
-        public Gtk.IconView system_iconview;
-        public Gee.ArrayList<SearchEntry?> plug_search_result;
+        public Gee.ArrayList <SearchEntry?> plug_search_result;
+        public Switchboard.Category personal_category;
+        public Switchboard.Category hardware_category;
+        public Switchboard.Category network_category;
+        public Switchboard.Category system_category;
 
         private string? plug_to_open = null;
-        private PlugsSearch plug_search;
-
-        public CategoryView (string? plug_to_open = null) {
-            this.plug_to_open = plug_to_open;
-            setup_category (Switchboard.Plug.Category.PERSONAL, 0);
-            setup_category (Switchboard.Plug.Category.HARDWARE, 1);
-            setup_category (Switchboard.Plug.Category.NETWORK, 2);
-            setup_category (Switchboard.Plug.Category.SYSTEM, 3);
+        public PlugsSearch plug_search;
+
+        public CategoryView (string? plug = null) {
+            orientation = Gtk.Orientation.VERTICAL;
+            plug_to_open = plug;
+
+            personal_category = new Switchboard.Category (Switchboard.Plug.Category.PERSONAL);
+            hardware_category = new Switchboard.Category (Switchboard.Plug.Category.HARDWARE);
+            network_category = new Switchboard.Category (Switchboard.Plug.Category.NETWORK);
+            system_category = new Switchboard.Category (Switchboard.Plug.Category.SYSTEM);
+
             plug_search = new PlugsSearch ();
             plug_search_result = new Gee.ArrayList<SearchEntry?> ();
-        }
-
-        private void setup_category (Switchboard.Plug.Category category, int i) {
-            var category_label = new Gtk.Label (get_category_name (category));
-            category_label.get_style_context ().add_class ("category-label");
-            category_label.halign = Gtk.Align.START;
-
-            var category_plugs = setup_icon_view ();
-            category_plugs.get_style_context ().remove_class (Gtk.STYLE_CLASS_VIEW);
-
-            var grid = new Gtk.Grid ();
-            grid.margin_start = 12;
-            grid.margin_end = 12;
-            grid.column_spacing = 6;
-
-            // Always add a Seperator
-            var h_separator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
-            h_separator.set_hexpand (true);
-            grid.attach (category_label, 0, 0, 1, 1);
-            grid.attach (h_separator, 1, 0, 1, 1);
-
-            grid.attach (category_plugs, 0, 1, 2, 1);
-            switch (category) {
-                case Switchboard.Plug.Category.PERSONAL:
-                    personal_iconview = category_plugs;
-                    personal_grid = grid;
-                    break;
-                case Switchboard.Plug.Category.HARDWARE:
-                    hardware_iconview = category_plugs;
-                    hardware_grid = grid;
-                    break;
-                case Switchboard.Plug.Category.NETWORK:
-                    network_iconview = category_plugs;
-                    network_grid = grid;
-                    break;
-                case Switchboard.Plug.Category.SYSTEM:
-                    system_iconview = category_plugs;
-                    system_grid = grid;
-                    break;
-            }
-
-            category_plugs.focus_out_event.connect ((e) => {
-                category_plugs.unselect_all ();
-
-                return false;
-            });
-
-            category_plugs.focus_in_event.connect ((e) => {
-                Gtk.TreePath path;
-
-                if (!category_plugs.get_cursor (out path, null)) {
-                    path = new Gtk.TreePath.from_indices (0, -1);
-                }
-                category_plugs.select_path (path);
-
-                return false;
-            });
-
-            category_plugs.keynav_failed.connect ((direction) => {
-                Gtk.IconView new_view = null;
-                Gtk.TreePath path = null;
-                Gtk.TreePath selected_path = null;
-                int smallest_distance = 1000;
-                Gtk.TreeIter iter;
-                int distance;
-
-                if (direction == Gtk.DirectionType.UP) {
-                    new_view = get_prev_icon_view (category);
-                    if (new_view != null && category_plugs.get_cursor (out path, null)) {
-                        var current_column = category_plugs.get_item_column (path);
-                        var model = new_view.get_model ();
-
-                        model.get_iter_first (out iter);
-                        do {
-                            path = model.get_path (iter);
-                            var next_column = new_view.get_item_column (path);
-                            distance = (next_column - current_column).abs ();
-                            if (distance <= smallest_distance) {
-                                selected_path = path;
-                                smallest_distance = distance;
-                            }
-                        } while (model.iter_next (ref iter));
-                    }
-                } else if (direction == Gtk.DirectionType.DOWN) {
-                    new_view = get_next_icon_view (category);
-                    if (new_view != null && category_plugs.get_cursor (out path, null)) {
-                        var current_column = category_plugs.get_item_column (path);
-                        var model = new_view.get_model ();
-
-                        model.get_iter_first (out iter);
-                        do {
-                            path = model.get_path (iter);
-                            var next_column = new_view.get_item_column (path);
-                            distance = (next_column - current_column).abs ();
-                            if (distance < smallest_distance) {
-                                selected_path = path;
-                                smallest_distance = distance;
-                            }
-                        } while (model.iter_next (ref iter));
-                    }
-                }
-
-                if (new_view != null) {
-                    new_view.set_cursor (selected_path, null, false);
-                    new_view.grab_focus ();
-                    return true;
-                }
-
-                return false;
-            });
-
-            attach (grid, 0, i, 1, 1);
+
+            add (personal_category);
+            add (hardware_category);
+            add (network_category);
+            add (system_category);
         }
 
         public async void load_default_plugs () {
@@ -188,32 +70,6 @@
             });
         }
 
-        private Gtk.IconView setup_icon_view () {
-            var store = new Gtk.ListStore (Columns.N_COLUMNS, typeof (Gdk.Pixbuf), typeof (string),
-                typeof(string), typeof(bool), typeof(Switchboard.Plug));
-            store.set_sort_column_id (1, Gtk.SortType.ASCENDING);
-            store.set_sort_column_id (1, Gtk.SortType.ASCENDING);
-
-            var filtered = new Gtk.TreeModelFilter (store, null);
-            filtered.set_visible_column (3);
-            filtered.refilter ();
-
-            var category_plugs = new Gtk.IconView.with_model (filtered);
-            category_plugs.set_item_width (ITEM_WIDTH);
-            category_plugs.set_text_column (Columns.TEXT);
-            category_plugs.set_pixbuf_column (Columns.ICON);
-            category_plugs.set_tooltip_column (Columns.DESCRIPTION);
-            category_plugs.set_hexpand (true);
-            category_plugs.set_selection_mode (Gtk.SelectionMode.SINGLE);
-            category_plugs.set_activate_on_single_click (true);
-
-            category_plugs.item_activated.connect (on_item_activated);
-            var cellrenderer = (Gtk.CellRendererText)category_plugs.get_cells ().nth_data (0);
-            cellrenderer.wrap_mode = Pango.WrapMode.WORD_CHAR;
-
-            return category_plugs;
-        }
-
         private void plug_visibility_changed (Switchboard.Plug plug) {
             if (plug.can_show == true) {
                 add_plug (plug);
@@ -221,45 +77,29 @@
         }
 
         public void add_plug (Switchboard.Plug plug) {
-            if (plug.can_show == false)
+            if (plug.can_show == false) {
                 return;
-            Gtk.TreeIter root;
-            Gtk.TreeModelFilter model_filter;
+            }
+
+            var icon = new Switchboard.CategoryIcon (plug);
 
             switch (plug.category) {
                 case Switchboard.Plug.Category.PERSONAL:
-                    model_filter = (Gtk.TreeModelFilter)personal_iconview.get_model ();
-                    personal_grid.show_all ();
+                    personal_category.add (icon);
                     break;
                 case Switchboard.Plug.Category.HARDWARE:
-                    model_filter = (Gtk.TreeModelFilter)hardware_iconview.get_model ();
-                    hardware_grid.show_all ();
+                    hardware_category.add (icon);
                     break;
                 case Switchboard.Plug.Category.NETWORK:
-                    model_filter = (Gtk.TreeModelFilter)network_iconview.get_model ();
-                    network_grid.show_all ();
+                    network_category.add (icon);
                     break;
                 case Switchboard.Plug.Category.SYSTEM:
-                    model_filter = (Gtk.TreeModelFilter)system_iconview.get_model ();
-                    system_grid.show_all ();
+                    system_category.add (icon);
                     break;
                 default:
                     return;
             }
 
-            var store = model_filter.child_model as Gtk.ListStore;
-            Gdk.Pixbuf icon_pixbuf = null;
-            try {
-                // FIXME: if we get no icon, we probably dont want that one…
-                icon_pixbuf = theme.load_icon (plug.icon, 32, Gtk.IconLookupFlags.GENERIC_FALLBACK);
-            } catch {
-                critical ("Unable to load plug %s's icon: %s", plug.display_name, plug.icon);
-                return;
-            }
-
-            store.append (out root);
-            store.set (root, Columns.ICON, icon_pixbuf, Columns.TEXT, plug.display_name,
-                Columns.DESCRIPTION, plug.description, Columns.VISIBLE, true, Columns.PLUG, plug);
             unowned SwitchboardApp app = (SwitchboardApp) GLib.Application.get_default ();
             app.search_box.sensitive = true;
             filter_plugs (app.search_box.get_text ());
@@ -274,63 +114,51 @@
             }
         }
 
-
-        // focus to first visible item
         public void grab_focus_first_icon_view () {
-                Gtk.TreePath first_path = null;
-
-                if (get_first_visible_path (personal_iconview, out first_path)) {
-                    personal_iconview.grab_focus ();
-                } else if (get_first_visible_path (hardware_iconview, out first_path)) {
-                    hardware_iconview.grab_focus ();
-                } else if (get_first_visible_path (network_iconview, out first_path)) {
-                    network_iconview.grab_focus ();
-                } else if (get_first_visible_path (system_iconview, out first_path)) {
-                    system_iconview.grab_focus ();
-                }
+            if (personal_category.has_child ()) {
+                personal_category.focus_first_child ();
+            } else if (hardware_category.has_child ()) {
+                hardware_category.focus_first_child ();
+            } else if (network_category.has_child ()) {
+                network_category.focus_first_child ();
+            } else if (system_category.has_child ()) {
+                system_category.focus_first_child ();
+            }
         }
 
-        // activate first visible item
         public void activate_first_item () {
-                Gtk.TreePath first_path = null;
-
-                if (get_first_visible_path (personal_iconview, out first_path)) {
-                    personal_iconview.item_activated (first_path);
-                } else if (get_first_visible_path (hardware_iconview, out first_path)){
-                    hardware_iconview.item_activated (first_path);
-                } else if (get_first_visible_path (network_iconview, out first_path)){
-                    network_iconview.item_activated (first_path);
-                } else if (get_first_visible_path (system_iconview, out first_path)){
-                    system_iconview.item_activated (first_path);
-                }
-        }
-
-        private bool get_first_visible_path (Gtk.IconView iv, out Gtk.TreePath path) {
-            Gtk.TreePath end;
-
-            return (iv.get_visible_range (out path, out end));
+            if (personal_category.has_child ()) {
+                personal_category.activate_first_child ();
+            } else if (hardware_category.has_child ()) {
+                hardware_category.activate_first_child ();
+            } else if (network_category.has_child ()) {
+                network_category.activate_first_child ();
+            } else if (system_category.has_child ()) {
+                system_category.activate_first_child ();
+            }
         }
 
         public void filter_plugs (string filter) {
-
             var any_found = false;
-            var model_filter = (Gtk.TreeModelFilter) personal_iconview.get_model ();
-            if (search_by_category (filter, model_filter, personal_grid)) {
-                any_found = true;
-            }
-
-            model_filter = (Gtk.TreeModelFilter) hardware_iconview.get_model ();
-            if (search_by_category (filter, model_filter, hardware_grid)) {
-                any_found = true;
-            }
-
-            model_filter = (Gtk.TreeModelFilter) network_iconview.get_model ();
-            if (search_by_category (filter, model_filter, network_grid)) {
-                any_found = true;
-            }
-
-            model_filter = (Gtk.TreeModelFilter) system_iconview.get_model ();
-            if (search_by_category (filter, model_filter, system_grid)) {
+
+            personal_category.filter ();
+            hardware_category.filter ();
+            network_category.filter ();
+            system_category.filter ();
+
+            if (personal_category.has_child ()) {
+                any_found = true;
+            }
+
+            if (hardware_category.has_child ()) {
+                any_found = true;
+            }
+
+            if (network_category.has_child ()) {
+                any_found = true;
+            }
+
+            if (system_category.has_child ()) {
                 any_found = true;
             }
 
@@ -342,78 +170,6 @@
             }
         }
 
-        private void deep_search (string filter) {
-            if (plug_search.ready) {
-                plug_search_result.clear ();
-                foreach (var tmp in plug_search.search_entries) {
-                    if (tmp.ui_elements.down ().contains (filter.down ())) {
-                        plug_search_result.add (tmp);
-                    }
-                }
-            }
-        }
-
-        private bool search_by_category (string filter, Gtk.TreeModelFilter model_filter, Gtk.Widget grid) {
-
-            deep_search (filter);
-            var store = model_filter.child_model as Gtk.ListStore;
-            int shown = 0;
-            store.foreach ((model, path, iter) => {
-                string title;
-
-                store.get (iter, Columns.TEXT, out title);
-                bool show_element = false;
-                foreach (var tmp in plug_search_result) {
-                    if (tmp.plug_name.down () in title.down ()) {
-                        store.set_value (iter, Columns.VISIBLE, true);
-                        shown++;
-                        show_element = true;
-                    }
-                }
-
-                if (filter.down () in title.down ()) {
-                    store.set_value (iter, Columns.VISIBLE, true);
-                    shown++;
-                } else if (!show_element) {
-                    store.set_value (iter, Columns.VISIBLE, false);
-                }
-
-                return false;
-            });
-
-            if (shown == 0) {
-                grid.hide ();
-                return false;
-            } else {
-                grid.show_all ();
-                return true;
-            }
-        }
-
-        public void recalculate_columns () {
-            int columns = personal_iconview.get_columns ();
-            columns = int.max (columns, hardware_iconview.get_columns ());
-            columns = int.max (columns, network_iconview.get_columns ());
-            columns = int.max (columns, system_iconview.get_columns ());
-            personal_iconview.set_columns (columns);
-            hardware_iconview.set_columns (columns);
-            network_iconview.set_columns (columns);
-            system_iconview.set_columns (columns);
-        }
-
-        private void on_item_activated (Gtk.IconView view, Gtk.TreePath path) {
-            GLib.Value plug;
-            Gtk.TreeIter selected_plug;
-            var store = view.get_model ();
-
-            store.get_iter (out selected_plug, path);
-            store.get_value (selected_plug, Columns.PLUG, out plug);
-
-            plug_selected ((Switchboard.Plug) plug.get_object ());
-
-            view.unselect_path (path);
-        }
-
         public static string? get_category_name (Switchboard.Plug.Category category) {
             switch (category) {
                 case Plug.Category.PERSONAL:
@@ -428,55 +184,5 @@
 
             return null;
         }
-
-        private Gtk.IconView? get_next_icon_view (Switchboard.Plug.Category category) {
-            if (category == Plug.Category.PERSONAL) {
-                if (hardware_iconview.is_visible ())
-                    return hardware_iconview;
-                else
-                    category = Plug.Category.HARDWARE;
-            }
-
-            if (category == Plug.Category.HARDWARE) {
-                if (network_iconview.is_visible ())
-                    return network_iconview;
-                else
-                    category = Plug.Category.NETWORK;
-            }
-
-            if (category == Plug.Category.NETWORK) {
-                if (system_iconview.is_visible ())
-                    return system_iconview;
-                else
-                    category = Plug.Category.SYSTEM;
-            }
-
-            return null;
-        }
-
-        private Gtk.IconView? get_prev_icon_view (Switchboard.Plug.Category category) {
-            if (category == Plug.Category.SYSTEM) {
-                if (network_iconview.is_visible ())
-                    return network_iconview;
-                else
-                    category = Plug.Category.NETWORK;
-            }
-
-            if (category == Plug.Category.NETWORK) {
-                if (hardware_iconview.is_visible ())
-                    return hardware_iconview;
-                else
-                    category = Plug.Category.HARDWARE;
-            }
-
-            if (category == Plug.Category.HARDWARE) {
-                if (personal_iconview.is_visible ())
-                    return personal_iconview;
-                else
-                    category = Plug.Category.SYSTEM;
-            }
-
-            return null;
-        }
     }
 }
 
=== modified file 'src/Switchboard.vala'
--- src/Switchboard.vala	2016-05-04 13:49:32 +0000
+++ src/Switchboard.vala	2016-05-12 18:08:48 +0000
@@ -39,7 +39,7 @@
         private Granite.Widgets.AlertView alert_view;
         private Gtk.ScrolledWindow category_scrolled;
         private Switchboard.NavigationButton navigation_button;
-        private Switchboard.CategoryView category_view;
+        public Switchboard.CategoryView category_view;
 
         private Gee.LinkedList <string> loaded_plugs;
         private string all_settings_label = _("All Settings");
@@ -310,9 +310,9 @@
             navigation_button.hide ();
 
             main_window.size_allocate.connect (() => {
-                if (opened_directly)
+                if (opened_directly) {
                     search_box.sensitive = false;
-                category_view.recalculate_columns ();
+                }
             });
 
             if (Switchboard.PlugsManager.get_default ().has_plugs () == false) {
@@ -504,31 +504,27 @@
             var category_item = new Dbusmenu.Menuitem ();
             category_item.property_set (Dbusmenu.MENUITEM_PROP_LABEL, CategoryView.get_category_name (category));
 
-            Gtk.TreeModelFilter model_filter;
+            var plugs = new Gee.ArrayList<Plug?> ();
             switch (category) {
                 case Switchboard.Plug.Category.PERSONAL:
-                    model_filter = (Gtk.TreeModelFilter)category_view.personal_iconview.get_model ();
+                    plugs = category_view.personal_category.get_plugs ();
                     break;
                 case Switchboard.Plug.Category.HARDWARE:
-                    model_filter = (Gtk.TreeModelFilter)category_view.hardware_iconview.get_model ();
+                    plugs = category_view.hardware_category.get_plugs ();
                     break;
                 case Switchboard.Plug.Category.NETWORK:
-                    model_filter = (Gtk.TreeModelFilter)category_view.network_iconview.get_model ();
+                    plugs = category_view.network_category.get_plugs ();
                     break;
                 case Switchboard.Plug.Category.SYSTEM:
-                    model_filter = (Gtk.TreeModelFilter)category_view.system_iconview.get_model ();
+                    plugs = category_view.system_category.get_plugs ();
                     break;
                 default:
                     return null;
             }
 
-            var category_store = model_filter.child_model as Gtk.ListStore;
             bool empty = true;
 
-            category_store.foreach ((model, path, iter) => {
-                Switchboard.Plug plug;
-                category_store.get (iter, CategoryView.Columns.PLUG, out plug);
-
+            foreach (var plug in plugs) {
                 var item = new Dbusmenu.Menuitem ();
                 item.property_set (Dbusmenu.MENUITEM_PROP_LABEL, plug.display_name);
 
@@ -541,9 +537,7 @@
                 // Add item to correct category
                 category_item.child_append (item);
                 empty = false;
-
-                return false;
-            });
+            }
 
             return (empty ? null : category_item);
         }
 
=== added directory 'src/Widgets'
=== added file 'src/Widgets/CategoryFlowBox.vala'
--- src/Widgets/CategoryFlowBox.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/CategoryFlowBox.vala	2016-05-12 18:08:48 +0000
@@ -0,0 +1,139 @@
+/*
+* Copyright (c) 2016 elementary LLC (http://launchpad.net/switchboard)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+*/
+
+namespace Switchboard {
+
+    public class Category : Gtk.Grid {
+
+        private Gtk.FlowBox flowbox;
+
+        public Category (Switchboard.Plug.Category category) {
+            var category_label = new Gtk.Label (Switchboard.CategoryView.get_category_name (category));
+            category_label.get_style_context ().add_class ("category-label");
+            category_label.halign = Gtk.Align.START;
+
+            var h_separator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
+            h_separator.set_hexpand (true);
+
+            flowbox = new Gtk.FlowBox ();
+            flowbox.activate_on_single_click = true;
+            flowbox.column_spacing = 12;
+            flowbox.row_spacing = 12;
+            flowbox.homogeneous = true;
+            flowbox.selection_mode = Gtk.SelectionMode.NONE;
+
+            margin_bottom = 12;
+            margin_start = 12;
+            margin_end = 12;
+
+            column_spacing = 3;
+            row_spacing = 6;
+
+            attach (category_label, 0, 0, 1, 1);
+            attach (h_separator, 1, 0, 1, 1);
+            attach (flowbox, 0, 1, 2, 1);
+
+            flowbox.child_activated.connect ((child) => {
+                Switchboard.SwitchboardApp.instance.load_plug (((CategoryIcon) child).plug);
+            });
+
+            flowbox.set_filter_func (plug_filter_func);
+            flowbox.set_sort_func (plug_sort_func);
+        }
+
+        public Gee.ArrayList get_plugs () {
+            var plugs = new Gee.ArrayList<Plug?> ();
+            foreach (unowned Gtk.Widget child in flowbox.get_children ()) {
+                plugs.add (((CategoryIcon) child).plug);
+            }
+            return plugs;
+        }
+
+        public new void add (Gtk.Widget widget) {
+            flowbox.add (widget);
+        }
+
+        public void activate_first_child () {
+            foreach (unowned Gtk.Widget child in flowbox.get_children ()) {
+                if (child.get_child_visible ()) {
+                    child.activate ();
+                    return;
+                }
+            }
+        }
+
+        public void filter () {
+            flowbox.invalidate_filter ();
+        }
+
+        public void focus_first_child () {
+            flowbox.get_child_at_index (0).grab_focus ();
+        }
+
+        public bool has_child () {
+            if (flowbox.get_child_at_index (0) != null) {
+               foreach (unowned Gtk.Widget child in flowbox.get_children ()) {
+                   if (child.get_child_visible ()) {
+                       show_all ();
+                       return true;
+                   }
+                }
+            }
+            hide ();
+            return false;
+        }
+
+        private bool plug_filter_func (Gtk.FlowBoxChild child) {
+            var filter = SwitchboardApp.instance.search_box.get_text ();
+            var plug_name = ((CategoryIcon) child).plug.display_name;
+            var plug_search = SwitchboardApp.instance.category_view.plug_search;
+            var plug_search_result = SwitchboardApp.instance.category_view.plug_search_result;
+
+            if (plug_search.ready) {
+                plug_search_result.clear ();
+
+                foreach (var tmp in plug_search.search_entries) {
+                    if (tmp.ui_elements.down ().contains (filter.down ())) {
+                        plug_search_result.add (tmp);
+                    }
+                }
+
+                foreach (var tmp in plug_search_result) {
+                    if (tmp.plug_name.down () in plug_name.down ()) {
+                        return true;
+                    }
+                }
+            }
+
+            if (filter.down () in plug_name.down ()) {
+                return true;
+            }
+            
+            return false;
+        }
+
+        private int plug_sort_func (Gtk.FlowBoxChild child_a, Gtk.FlowBoxChild child_b) {
+            var plug_name_a = ((CategoryIcon) child_a).plug.display_name;
+            var plug_name_b = ((CategoryIcon) child_b).plug.display_name;
+
+            return strcmp (plug_name_a, plug_name_b);
+        }
+    }
+}
 
=== added file 'src/Widgets/CategoryIcon.vala'
--- src/Widgets/CategoryIcon.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/CategoryIcon.vala	2016-05-12 18:08:48 +0000
@@ -0,0 +1,51 @@
+/*
+* Copyright (c) 2016 elementary LLC (http://launchpad.net/switchboard)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+*/
+
+namespace Switchboard {
+
+    public class CategoryIcon : Gtk.FlowBoxChild {
+
+        public Switchboard.Plug plug;
+
+        public CategoryIcon (Switchboard.Plug plug_item) {
+            plug = plug_item;
+            width_request = 144;
+
+            var icon = new Gtk.Image.from_icon_name (plug.icon, Gtk.IconSize.DND);
+            icon.tooltip_text = plug.description;
+
+            var plug_name = new Gtk.Label (plug.display_name);
+            plug_name.justify = Gtk.Justification.CENTER;
+            plug_name.max_width_chars = 18;
+            plug_name.wrap = true;
+            plug_name.wrap_mode = Pango.WrapMode.WORD_CHAR;
+            
+            var layout = new Gtk.Grid ();
+            layout.halign = Gtk.Align.CENTER;
+            layout.margin = 6;
+            layout.orientation = Gtk.Orientation.VERTICAL;
+
+            layout.add (icon);
+            layout.add (plug_name);
+
+            add (layout);
+        }
+    }
+}