Merge lp:~artmello/ubuntu-system-settings/keyboard_navigation into lp:ubuntu-system-settings

[Arthur Mello]

Add support for keyboard navigation:
- Up/Down to navigate between categories
- Left/Right to change focus from first and second column
- Escape to close panel and return to categories when in single column mode

Add support for keyboard navigation:
- Up/Down to navigate between categories
- Left/Right to change focus from first and second column
- Escape to close panel and return to categories when in single column mode

[system-apps-ci-bot (system-apps-ci-bot)]

FAILED: Continuous integration, rev:1767
https://jenkins.canonical.com/system-apps/job/lp-ubuntu-system-settings-ci/5/
Executed test runs:
    FAILURE: https://jenkins.canonical.com/system-apps/job/build/2317/console
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-0-fetch/2316
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2138/console
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=amd64,release=zesty/2138/console
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2138/console
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=armhf,release=zesty/2138/console
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=i386,release=xenial+overlay/2138/console
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=i386,release=zesty/2138/console

Click here to trigger a rebuild:
https://jenkins.canonical.com/system-apps/job/lp-ubuntu-system-settings-ci/5/rebuild

review: Needs Fixing (continuous-integration)

[lp:~artmello/ubuntu-system-settings/keyboard_navigation]

1768. By Arthur Mello on 2017-03-16

Fix AP tests

[system-apps-ci-bot (system-apps-ci-bot)]

PASSED: Continuous integration, rev:1768
https://jenkins.canonical.com/system-apps/job/lp-ubuntu-system-settings-ci/8/
Executed test runs:
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build/2320
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-0-fetch/2319
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2141
        deb: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2141/artifact/output/*zip*/output.zip
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=amd64,release=zesty/2141
        deb: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=amd64,release=zesty/2141/artifact/output/*zip*/output.zip
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2141
        deb: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2141/artifact/output/*zip*/output.zip
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=armhf,release=zesty/2141
        deb: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=armhf,release=zesty/2141/artifact/output/*zip*/output.zip
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=i386,release=xenial+overlay/2141
        deb: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=i386,release=xenial+overlay/2141/artifact/output/*zip*/output.zip
    SUCCESS: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=i386,release=zesty/2141
        deb: https://jenkins.canonical.com/system-apps/job/build-2-binpkg/arch=i386,release=zesty/2141/artifact/output/*zip*/output.zip

Click here to trigger a rebuild:
https://jenkins.canonical.com/system-apps/job/lp-ubuntu-system-settings-ci/8/rebuild

review: Approve (continuous-integration)

Unmerged revisions

1768. By Arthur Mello on 2017-03-16

Fix AP tests

1767. By Arthur Mello on 2017-03-16

Fix behavior of Esc and Left keys on single column mode

1766. By Arthur Mello on 2017-03-15

Add new keyboard navigation

- Use left/right to change focus from first and second column in 2 column mode
- Use left to close current panel and return to categories in single column mode
- Use Escape to do the same as left

1765. By Arthur Mello on 2017-03-15

Initial support for keyboard navigation

- Up/Down navigate between categories

=== modified file 'src/SystemSettings/ItemPage.qml'
--- src/SystemSettings/ItemPage.qml	2016-12-06 15:38:02 +0000
+++ src/SystemSettings/ItemPage.qml	2017-03-16 14:39:38 +0000
@@ -23,6 +23,7 @@
 
 Page {
     id: root
+    focus: true
 
     property alias title: pageHeader.title
     property alias flickable: pageHeader.flickable

=== modified file 'src/item-model.cpp'
--- src/item-model.cpp	2015-05-12 12:08:47 +0000
+++ src/item-model.cpp	2017-03-16 14:39:38 +0000
@@ -134,6 +134,17 @@
     return d->m_roleNames;
 }
 
+int ItemModel::getIndexByName(const QString& name) const
+{
+    Q_D(const ItemModel);
+    for (int i = 0; i < d->m_visibleItems.count(); ++i) {
+        if (d->m_visibleItems.at(i)->baseName() == name) {
+            return i;
+        }
+    }
+    return -1;
+}
+
 void ItemModel::onItemVisibilityChanged()
 {
     Q_D(ItemModel);
@@ -162,6 +173,73 @@
 {
 }
 
+int ItemModelSortProxy::getIndexByName(const QString& name) const
+{
+    ItemModel *source = (ItemModel*) sourceModel();
+    int sourceRow = source->getIndexByName(name);
+
+    if (sourceRow < 0)
+        return sourceRow;
+
+    return mapFromSource(source->index(sourceRow, 0)).row();
+}
+
+QString ItemModelSortProxy::getNameByIndex(int row) const
+{
+    if (row < 0 || row >= rowCount()) {
+        return QString();
+    }
+
+    QVariant data = index(row, 0).data(ItemModel::ItemRole); 
+    Plugin *plugin = data.value<Plugin *>();
+    
+    if (plugin != NULL) {
+        return plugin->baseName();
+    }
+
+    return QString();
+}
+
+int ItemModelSortProxy::getPreviousVisibleIndex(int from) const
+{
+    int ret = rowCount() - 1;
+    
+    if (from >= 0) {
+       ret = from - 1;
+    }
+
+    while (ret >= 0) {
+        QVariant data = index(ret, 0).data(ItemModel::ItemRole); 
+        Plugin *plugin = data.value<Plugin *>();
+        if (plugin && plugin->isVisible()) {
+            return ret;
+        }
+        ret--;
+    }
+
+    return -1;
+}
+
+int ItemModelSortProxy::getNextVisibleIndex(int from) const
+{
+    int ret = 0;
+    
+    if (from >= 0) {
+       ret = from + 1;
+    }
+
+    while (ret < rowCount()) {
+        QVariant data = index(ret, 0).data(ItemModel::ItemRole); 
+        Plugin *plugin = data.value<Plugin *>();
+        if (plugin->isVisible()) {
+            return ret;
+        }
+        ret++;
+    }
+
+    return -1;
+}
+
 bool ItemModelSortProxy::lessThan(const QModelIndex &left,
                                   const QModelIndex &right) const
 {

=== modified file 'src/item-model.h'
--- src/item-model.h	2014-07-23 13:29:15 +0000
+++ src/item-model.h	2017-03-16 14:39:38 +0000
@@ -49,6 +49,8 @@
     QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
     QHash<int, QByteArray> roleNames() const;
 
+    int getIndexByName(const QString &name) const;
+
 private Q_SLOTS:
     void onItemVisibilityChanged();
 
@@ -64,6 +66,11 @@
 public:
     explicit ItemModelSortProxy(QObject *parent = 0);
 
+    Q_INVOKABLE int getIndexByName(const QString &name) const;
+    Q_INVOKABLE QString getNameByIndex(int row) const;
+    Q_INVOKABLE int getPreviousVisibleIndex(int from) const;
+    Q_INVOKABLE int getNextVisibleIndex(int from) const;
+
 protected:
     virtual bool lessThan(const QModelIndex &left,
                           const QModelIndex &right) const;

=== modified file 'src/qml/CategorySection.qml'
--- src/qml/CategorySection.qml	2016-12-09 15:19:24 +0000
+++ src/qml/CategorySection.qml	2017-03-16 14:39:38 +0000
@@ -36,6 +36,22 @@
 
     objectName: "categoryGrid-" + category
 
+    function getPluginIndexByName(plugin) {
+        return repeater.model.getIndexByName(plugin)
+    }
+
+    function getPluginNameByIndex(index) {
+        return repeater.model.getNameByIndex(index)
+    }
+
+    function getPreviousPluginIndex(from) {
+        return repeater.model.getPreviousVisibleIndex(from)
+    }
+
+    function getNextPluginIndex(from) {
+        return repeater.model.getNextVisibleIndex(from)
+    }
+
     SettingsItemTitle {
         id: header
         text: categoryName
@@ -70,6 +86,9 @@
                         if (pageComponent) {
                             Haptics.play();
                             loadPluginByName(model.item.baseName);
+                            if (apl.columns == 1) {
+                                currentPluginPage.forceActiveFocus();
+                            }
                         }
                     }
                 }
@@ -77,13 +96,13 @@
                     target: loader.item
                     property: "color"
                     value: theme.palette.highlighted.background
-                    when: currentPlugin == model.item.baseName && apl.columns > 1
+                    when: currentPlugin == model.item.baseName
                 }
                 Binding {
                     target: loader.item
                     property: "color"
                     value: "transparent"
-                    when: currentPlugin != model.item.baseName || apl.columns == 1
+                    when: currentPlugin != model.item.baseName
                 }
             }
         }

=== modified file 'src/qml/MainWindow.qml'
--- src/qml/MainWindow.qml	2016-12-14 13:37:49 +0000
+++ src/qml/MainWindow.qml	2017-03-16 14:39:38 +0000
@@ -31,8 +31,10 @@
     objectName: "systemSettingsMainView"
     automaticOrientation: true
     anchorToKeyboard: true
+    focus: true
     property var pluginManager: PluginManager {}
     property string currentPlugin: ""
+    property Page currentPluginPage: null
 
     /* Workaround for lp:1648801, i.e. APL does not support a placeholder,
     so we implement it here. */
@@ -55,12 +57,30 @@
                 page = apl.addComponentToNextColumnSync(
                     apl.primaryPage, pageComponent, opts
                 );
+                page.Component.destruction.connect(function () {
+                    if (mainPage) {
+                        mainPage.forceActiveFocus()
+                    }
+                }.bind(plugin))
+
+                page.Keys.pressed.connect(function (event) {
+                    if (event.key == Qt.Key_Left) {
+                        if (apl.columns > 1) {
+                            mainPage.forceActiveFocus()
+                            event.accepted = true
+                        }
+                    } else if (event.key == Qt.Key_Escape) {
+                        if (apl.columns > 1) {
+                            mainPage.forceActiveFocus()
+                        } else {
+                            apl.removePages(apl.primaryPage);
+                        }
+                        event.accepted = true
+                    }
+                }.bind(plugin))
+
                 currentPlugin = pluginName;
-                page.Component.destruction.connect(function () {
-                    if (currentPlugin == this.baseName) {
-                        currentPlugin = "";
-                    }
-                }.bind(plugin))
+                currentPluginPage = page;
             }
             return true
         } else {
@@ -85,6 +105,8 @@
         // when running in windowed mode, constrain width
         view.minimumWidth  = Qt.binding( function() { return units.gu(40) } )
         view.maximumWidth = Qt.binding( function() { return units.gu(140) } )
+
+        mainPage.forceActiveFocus()
     }
 
     Connections {
@@ -92,9 +114,13 @@
         ignoreUnknownSignals: true
         onColumnsChanged: {
             var columns = target.columns;
-            if (columns > 1 && !currentPlugin) {
-                loadPluginByName(placeholderPlugin);
-            } else if (columns == 1 && currentPlugin == placeholderPlugin) {
+            if (columns > 1) {
+               if (!currentPlugin) {
+                    loadPluginByName(placeholderPlugin);
+                } else { 
+                    loadPluginByName(currentPlugin);
+                }
+            } else if (columns == 1) {
                 apl.removePages(apl.primaryPage);
             }
         }
@@ -131,12 +157,13 @@
             }
         }
     }
-
+    
     USSAdaptivePageLayout {
         id: apl
         objectName: "apl"
         anchors.fill: parent
         primaryPage: mainPage
+        focus: true
         layouts: [
             PageColumnsLayout {
                 when: width >= units.gu(90)
@@ -163,6 +190,85 @@
             objectName: "systemSettingsPage"
             visible: false
             header: standardHeader
+            focus: true
+
+            function selectPreviousPlugin() {
+                for (var i = 0; i < mainColumn.children.length; ++i) {
+                    var curr = mainColumn.children[i].getPluginIndexByName(main.currentPlugin)
+
+                    if (curr >= 0) {
+                        var prev = mainColumn.children[i].getPreviousPluginIndex(curr)
+
+                        var prevPlugin
+                        if (prev >= 0) {
+                            prevPlugin = mainColumn.children[i].getPluginNameByIndex(prev)
+                        } else {
+                            var j = i - 1
+                            if (j <= 0) {
+                                j = mainColumn.children.length - 1 
+                            }
+                            prev = mainColumn.children[j].getPreviousPluginIndex(-1)
+                            prevPlugin = mainColumn.children[j].getPluginNameByIndex(prev)
+                        }
+
+                        if (apl.columns > 1) {
+                            loadPluginByName(prevPlugin)
+                        } else {
+                            main.currentPlugin = prevPlugin
+                        }
+                        break
+                    }
+                }
+            }
+
+            function selectNextPlugin() {
+                for (var i = 0; i < mainColumn.children.length; ++i) {
+                    var curr = mainColumn.children[i].getPluginIndexByName(main.currentPlugin)
+
+                    if (curr >= 0) {
+                        var next = mainColumn.children[i].getNextPluginIndex(curr)
+
+                        var nextPlugin
+                        if (next >= 0) {
+                            nextPlugin = mainColumn.children[i].getPluginNameByIndex(next)
+                        } else {
+                            var j = i + 1
+                            if (j >= mainColumn.children.length) {
+                                j = 1 
+                            }
+                            next = mainColumn.children[j].getNextPluginIndex(-1)
+                            nextPlugin = mainColumn.children[j].getPluginNameByIndex(next)
+                        }
+                        if (apl.columns > 1) {
+                            loadPluginByName(nextPlugin)
+                        } else {
+                            main.currentPlugin = nextPlugin
+                        }
+                        break
+                    }
+                }
+            }
+
+            Keys.onPressed: {
+                if (event.key == Qt.Key_Up) {
+                    mainPage.selectPreviousPlugin()
+                    event.accepted = true
+                } else if (event.key == Qt.Key_Down) {
+                    mainPage.selectNextPlugin()
+                    event.accepted = true
+                } else if (event.key == Qt.Key_Right) {
+                    if (apl.columns > 1 && main.currentPluginPage) {
+                        main.currentPluginPage.forceActiveFocus()
+                        event.accepted = true
+                    }
+                } else if (event.key == Qt.Key_Return || event.key == Qt.Key_Enter) {
+                    if (apl.columns == 1 && main.currentPlugin) {
+                        loadPluginByName(main.currentPlugin)
+                        main.currentPluginPage.forceActiveFocus()
+                        event.accepted = true
+                    }
+                }
+            }
 
             PageHeader {
                 id: standardHeader
@@ -227,6 +333,7 @@
                 flickableDirection: Flickable.VerticalFlick
 
                 Column {
+                    id: mainColumn
                     anchors.left: parent.left
                     anchors.right: parent.right
 

=== modified file 'src/qml/UncategorizedItemsView.qml'
--- src/qml/UncategorizedItemsView.qml	2016-12-09 15:19:24 +0000
+++ src/qml/UncategorizedItemsView.qml	2017-03-16 14:39:38 +0000
@@ -24,6 +24,7 @@
 import SystemSettings 1.0
 
 Column {
+    id: column
     property alias model: repeater.model
 
     visible: repeater.count > 0
@@ -31,6 +32,22 @@
     anchors.left: parent.left
     anchors.right: parent.right
 
+    function getPluginIndexByName(plugin) {
+        return repeater.model.getIndexByName(plugin)
+    }
+
+    function getPluginNameByIndex(index) {
+        return repeater.model.getNameByIndex(index)
+    }
+
+    function getPreviousPluginIndex(from) {
+        return repeater.model.getPreviousVisibleIndex(from)
+    }
+
+    function getNextPluginIndex(from) {
+        return repeater.model.getNextVisibleIndex(from)
+    }
+
     Repeater {
         id: repeater
         Column {
@@ -51,6 +68,9 @@
                         if (pageComponent) {
                             Haptics.play();
                             loadPluginByName(model.item.baseName);
+                            if (apl.columns == 1) {
+                                currentPluginPage.forceActiveFocus();
+                            }
                         }
                     }
                 }
@@ -58,13 +78,13 @@
                     target: loader.item
                     property: "color"
                     value: theme.palette.highlighted.background
-                    when: currentPlugin == model.item.baseName && apl.columns > 1
+                    when: currentPlugin == model.item.baseName
                 }
                 Binding {
                     target: loader.item
                     property: "color"
                     value: "transparent"
-                    when: currentPlugin != model.item.baseName || apl.columns == 1
+                    when: currentPlugin != model.item.baseName
                 }
             }
         }

=== modified file 'tests/plugins/main/tst_MainWindow.qml'
--- tests/plugins/main/tst_MainWindow.qml	2016-12-14 13:37:49 +0000
+++ tests/plugins/main/tst_MainWindow.qml	2017-03-16 14:39:38 +0000
@@ -249,7 +249,7 @@
 
             // Pop a page
             apl.removePages(apl.primaryPage);
-            tryCompare(instance, "currentPlugin", "");
+            tryCompare(instance, "currentPlugin", "Test");
         }
 
         // Seems this is how Unity8 is resizing a window to its previous size.