Partially working keyboard navigation support

app/gui/AppView.qml

@@ -11,6 +11,8 @@ GridView {
     property AppModel appModel : createModel()
 
     id: appGrid
+    focus: true
+    activeFocusOnTab: true
     anchors.fill: parent
     anchors.leftMargin: (parent.width % (cellWidth + anchors.rightMargin)) / 2
     anchors.topMargin: 20
@@ -47,8 +49,9 @@ GridView {
 
     model: appModel
 
-    delegate: ItemDelegate {
+    delegate: NavigableItemDelegate {
         width: 200; height: 335;
+        grid: pcGrid
 
         Image {
             id: appIcon

app/gui/NavigableItemDelegate.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.2
+
+ItemDelegate {
+    property GridView grid
+
+    Keys.onLeftPressed: {
+        grid.moveCurrentIndexLeft()
+    }
+    Keys.onRightPressed: {
+        grid.moveCurrentIndexRight()
+    }
+    Keys.onDownPressed: {
+        grid.moveCurrentIndexDown()
+    }
+
+    Keys.onUpPressed: {
+        grid.moveCurrentIndexUp()
+    }
+
+    Keys.onReturnPressed: {
+        clicked()
+    }
+}

app/gui/NavigableToolButton.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.2
+
+ToolButton {
+    activeFocusOnTab: true
+
+    Keys.onReturnPressed: {
+        clicked()
+    }
+
+    Keys.onRightPressed: {
+        nextItemInFocusChain(true).forceActiveFocus(Qt.TabFocus)
+    }
+
+    Keys.onLeftPressed: {
+        nextItemInFocusChain(false).forceActiveFocus(Qt.TabFocus)
+    }
+}

app/gui/PcView.qml

@@ -13,6 +13,8 @@ GridView {
     property ComputerModel computerModel : createModel()
 
     id: pcGrid
+    focus: true
+    activeFocusOnTab: true
     anchors.fill: parent
     anchors.leftMargin: (parent.width % (cellWidth + anchors.rightMargin)) / 2
     anchors.topMargin: 20
@@ -75,8 +77,9 @@ GridView {
 
     model: computerModel
 
-    delegate: ItemDelegate {
+    delegate: NavigableItemDelegate {
         width: 300; height: 300;
+        grid: pcGrid
 
         Image {
             id: pcIcon

app/gui/main.qml

@@ -23,6 +23,20 @@ ApplicationWindow {
         id: stackView
         initialItem: "PcView.qml"
         anchors.fill: parent
+        focus: true
+
+        onCurrentItemChanged: {
+            // Ensure focus travels to the next view
+            if (currentItem) {
+                currentItem.forceActiveFocus()
+            }
+        }
+
+        Keys.onEscapePressed: {
+            if (depth > 1) {
+                stackView.pop()
+            }
+        }
     }
 
     onVisibilityChanged: {
@@ -68,7 +82,7 @@ ApplicationWindow {
             spacing: 20
             anchors.fill: parent
 
-            ToolButton {
+            NavigableToolButton {
                 // Only make the button visible if the user has navigated somewhere.
                 visible: stackView.depth > 1
 
@@ -85,6 +99,10 @@ ApplicationWindow {
                 }
 
                 onClicked: stackView.pop()
+
+                Keys.onDownPressed: {
+                    stackView.currentItem.forceActiveFocus(Qt.TabFocus)
+                }
             }
 
             Label {
@@ -97,7 +115,7 @@ ApplicationWindow {
                 Layout.fillWidth: true
             }
 
-            ToolButton {
+            NavigableToolButton {
                 property string browserUrl: ""
 
                 id: updateButton
@@ -122,7 +140,6 @@ ApplicationWindow {
 
                 onClicked: Qt.openUrlExternally(browserUrl);
 
-
                 function updateAvailable(url)
                 {
                     updateButton.browserUrl = url
@@ -133,9 +150,13 @@ ApplicationWindow {
                     AutoUpdateChecker.onUpdateAvailable.connect(updateAvailable)
                     AutoUpdateChecker.start()
                 }
+
+                Keys.onDownPressed: {
+                    stackView.currentItem.forceActiveFocus(Qt.TabFocus)
+                }
             }
 
-            ToolButton {
+            NavigableToolButton {
                 Image {
                     source: "qrc:/res/question_mark.svg"
                     anchors.centerIn: parent
@@ -152,9 +173,13 @@ ApplicationWindow {
 
                 // TODO need to make sure browser is brought to foreground.
                 onClicked: Qt.openUrlExternally("https://github.com/moonlight-stream/moonlight-docs/wiki/Setup-Guide");
+
+                Keys.onDownPressed: {
+                    stackView.currentItem.forceActiveFocus(Qt.TabFocus)
+                }
             }
 
-            ToolButton {
+            NavigableToolButton {
                 // TODO: Implement gamepad mapping then unhide this button
                 visible: false
 
@@ -173,9 +198,13 @@ ApplicationWindow {
                 }
 
                 onClicked: navigateTo("qrc:/gui/GamepadMapper.qml", "Gamepad Mapping")
+
+                Keys.onDownPressed: {
+                    stackView.currentItem.forceActiveFocus(Qt.TabFocus)
+                }
             }
 
-            ToolButton {
+            NavigableToolButton {
                 Image {
                     source: "qrc:/res/settings.svg"
                     anchors.centerIn: parent
@@ -187,6 +216,10 @@ ApplicationWindow {
 
                 onClicked: navigateTo("qrc:/gui/SettingsView.qml", "Settings")
 
+                Keys.onDownPressed: {
+                    stackView.currentItem.forceActiveFocus(Qt.TabFocus)
+                }
+
                 ToolTip.delay: 1000
                 ToolTip.timeout: 3000
                 ToolTip.visible: hovered

app/qml.qrc

@@ -7,5 +7,7 @@
         <file>gui/StreamSegue.qml</file>
         <file>gui/GamepadMapper.qml</file>
         <file>gui/QuitSegue.qml</file>
+        <file>gui/NavigableToolButton.qml</file>
+        <file>gui/NavigableItemDelegate.qml</file>
     </qresource>
 </RCC>