Merge lp:~vikoadi/switchboard/keyboard-navigation into lp:~elementary-pantheon/switchboard/switchboard

[Viko Adi Rahmawan]

Keyboard navigation throughout switchboard
- using arrow key will move selection
- using Return key to activate selection
- Alt+left key will bring back to CategoryView
- typing other key will start search
- press enter from startbar will activate first result

Keyboard navigation throughout switchboard
- using arrow key will move selection
- using Return key to activate selection
- Alt+left key will bring back to CategoryView
- typing other key will start search
- press enter from startbar will activate first result

please note that current elementary theme doesnt have focus style so either use Adwaita or comment

GtkIconView.view.cell:selected,
GtkIconView.view.cell:selected:focus {
    background-color: @base_color;
    color: @text_color;
}

in gtk-widgets.css theme file

[lp:~vikoadi/switchboard/keyboard-navigation]

533. By Viko Adi Rahmawan on 2014-11-14

remove debug printing

534. By Viko Adi Rahmawan on 2014-11-14

remove TODO note

[David Gomes (davidgomes)]

"c", "d", "sel" and "dist" aren't really good variable names.

Also, this needs design input I'm pretty sure.

review: Needs Fixing

[lp:~vikoadi/switchboard/keyboard-navigation]

535. By Viko Adi Rahmawan on 2014-11-16

remove trailing whitespace, rename bad variable

[Viko Adi Rahmawan (vikoadi)]

variable renamed,
Ux team assigned

[lp:~vikoadi/switchboard/keyboard-navigation]

536. By Viko Adi Rahmawan on 2014-11-16

add space arround =>

[Artem Anufrij (artem-anufrij)]

see line comments

review: Needs Fixing (code style)

[Danielle Foré (danrabbit)]

Merge conflicts. Needs fixing.

review: Needs Fixing

[lp:~vikoadi/switchboard/keyboard-navigation]

537. By Viko Adi Rahmawan on 2015-03-10

merge trunk

538. By Viko Adi Rahmawan on 2015-03-10

clean code

539. By Viko Adi Rahmawan on 2015-03-10

clean code

[Viko Adi Rahmawan (vikoadi)]

merge trunk

[Cody Garver (codygarver)]

When I down arrow (⬇), the search field loses focus but I don't see where the "cursor" is. I can't see what is selected.

[Viko Adi Rahmawan (vikoadi)]

Have you try using adwaita theme?
read my note in Description of the Change above.

[Danielle Foré (danrabbit)]

Hm, just added some stuff to make a style for switchboard. For some reason GtkIconView in Switchboard won't accept a background color.

[Danielle Foré (danrabbit)]

It all appears to work correctly here :)

review: Approve (ux)

[Cody Garver (codygarver)]

Backspace key should close plug and return to categoryview

[Danielle Foré (danrabbit)]

No, no backspace! We removed that before because it causes issues.

=== modified file 'src/CategoryView.vala'
--- src/CategoryView.vala	2014-08-07 09:48:26 +0000
+++ src/CategoryView.vala	2015-03-10 10:08:38 +0000
@@ -102,6 +102,76 @@
                     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);
         }
 
@@ -123,9 +193,9 @@
                 return false;
             });
         }
-        
+
         private Gtk.IconView setup_icon_view () {
-            var store = new Gtk.ListStore (Columns.N_COLUMNS, typeof (Gdk.Pixbuf), typeof (string), 
+            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);
@@ -142,7 +212,7 @@
             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;
@@ -195,7 +265,7 @@
             }
 
             store.append (out root);
-            store.set (root, Columns.ICON, icon_pixbuf, Columns.TEXT, plug.display_name, 
+            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;
@@ -211,6 +281,43 @@
             }
         }
 
+
+        // 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 ();
+                }
+        }
+
+        // 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));
+        }
+
         public void filter_plugs (string filter) {
 
             var any_found = false;
@@ -231,12 +338,12 @@
                 app.hide_alert ();
             }
         }
-        
+
         private bool search_by_category (string filter, Plug.Category category) {
-            
+
             Gtk.TreeModelFilter model_filter;
             Gtk.Widget grid;
-            
+
             switch (category) {
                 case Switchboard.Plug.Category.PERSONAL:
                     model_filter = (Gtk.TreeModelFilter)personal_iconview.get_model ();
@@ -274,7 +381,7 @@
 
                 return false;
             });
-            
+
             if (shown == 0) {
                 grid.hide ();
                 return false;
@@ -322,5 +429,55 @@
 
             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	2015-02-22 15:30:10 +0000
+++ src/Switchboard.vala	2015-03-10 10:08:38 +0000
@@ -59,6 +59,13 @@
         private static string? plug_to_open = null;
         private static bool opened_directly = false;
         private static bool should_animate_next_transition = true;
+        private const uint[] NAVIGATION_KEYS = {
+            Gdk.Key.Up,
+            Gdk.Key.Down,
+            Gdk.Key.Left,
+            Gdk.Key.Right,
+            Gdk.Key.Return
+        };
 
         static const OptionEntry[] entries = {
             { "open-plug", 'o', 0, OptionArg.STRING, ref plug_to_open, N_("Open a plug"), "PLUG_NAME" },
@@ -402,13 +409,32 @@
             search_box.changed.connect(() => {
                 category_view.filter_plugs(search_box.get_text ());
             });
+            search_box.key_press_event.connect ((event) => {
+                if (event.keyval == Gdk.Key.Return) {
+                    category_view.activate_first_item ();
+                    return true;
+                }
+
+                return false;
+            });
 
             // Focus typing to the search bar
             main_window.key_press_event.connect ((event) => {
                 // alt+left should go back to all settings
-                if (Gdk.ModifierType.MOD1_MASK in event.state && event.keyval == Gdk.Key.Left) {
+                if ((event.state & Gdk.ModifierType.MOD1_MASK) != 0 && event.keyval == Gdk.Key.Left) {
                     navigation_button.clicked ();
-                }
+                    return false;
+                }
+
+                // Down key from search_bar should move focus to CategoryVIew
+                if (search_box.has_focus && event.keyval == Gdk.Key.Down) {
+                    category_view.grab_focus_first_icon_view ();
+                    return false;
+                }
+
+                // arrow key is being used by CategoryView to navigate
+                if (event.keyval in NAVIGATION_KEYS)
+                    return false;
 
                 // Don't focus if it is a modifier or if search_box is already focused
                 if ((event.is_modifier == 0) && !search_box.has_focus)