HBox: Add arrow keys navigation

Also rename enterButtonTarget to clickButtonOnEnter

src/qml/Base/HBox.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
+import "../utils.js" as Utils
 
 Rectangle {
     id: interfaceBox
@@ -9,6 +10,10 @@ Rectangle {
     )
     implicitHeight: childrenRect.height
 
+    Keys.onReturnPressed: if (clickButtonOnEnter) enterClickButton()
+    Keys.onEnterPressed: Keys.onReturnPressed(event)
+
+
     property real multiplyWidth: 1.0
     property real multiplyHorizontalSpacing: 1.5
     property real multiplyVerticalSpacing: 1.5
@@ -20,21 +25,21 @@ Rectangle {
     property int verticalSpacing: theme.spacing * multiplyVerticalSpacing
 
     property alias title: interfaceTitle.text
-    property alias buttonModel: interfaceButtonsRepeater.model
+    property alias buttonModel: buttonRepeater.model
     property var buttonCallbacks: []
-    property string enterButtonTarget: ""
+    property string focusButton: ""
+    property string clickButtonOnEnter: ""
 
     default property alias body: interfaceBody.data
 
-    function clickEnterButtonTarget() {
+
+    function enterClickButton() {
         for (let i = 0; i < buttonModel.length; i++) {
-            let btn = interfaceButtonsRepeater.itemAt(i)
-            if (btn.enabled && btn.name === enterButtonTarget) btn.clicked()
+            let btn = buttonRepeater.itemAt(i)
+            if (btn.enabled && btn.name === clickButtonOnEnter) btn.clicked()
         }
     }
 
-    Keys.onReturnPressed: clickEnterButtonTarget()
-    Keys.onEnterPressed: clickEnterButtonTarget()
 
     HColumnLayout {
         id: mainColumn
@@ -69,12 +74,10 @@ Rectangle {
             visible: buttonModel.length > 0
 
             Repeater {
-                id: interfaceButtonsRepeater
+                id: buttonRepeater
                 model: []
 
                 HButton {
-                    property string name: modelData.name
-
                     id: button
                     text: modelData.text
                     icon.name: modelData.iconName || ""
@@ -91,10 +94,31 @@ Rectangle {
                     enabled: (modelData.enabled == undefined ?
                               true : modelData.enabled) &&
                              ! button.loading
+
                     onClicked: buttonCallbacks[modelData.name](button)
 
+                    Keys.onLeftPressed: previous.forceActiveFocus()
+                    Keys.onUpPressed: previous.forceActiveFocus()
+                    Keys.onRightPressed: next.forceActiveFocus()
+                    Keys.onDownPressed: next.forceActiveFocus()
+                    Keys.onReturnPressed: if (button.enabled) button.clicked()
+                    Keys.onEnterPressed: Keys.onReturnPressed(event)
+
+                    Component.onCompleted:
+                        if (modelData.name == focusButton) forceActiveFocus()
+
                     Layout.fillWidth: true
                     Layout.preferredHeight: theme.baseElementsHeight
+
+
+                    property string name: modelData.name
+
+                    property Item next: buttonRepeater.itemAt(
+                        Utils.numberWrapAt(index + 1, buttonRepeater.count),
+                    )
+                    property Item previous: buttonRepeater.itemAt(
+                        Utils.numberWrapAt(index - 1, buttonRepeater.count),
+                    )
                 }
             }
         }

src/qml/Base/HBoxPopup.qml

@@ -15,7 +15,8 @@ HPopup {
     property bool okClicked: false
 
 
-    box.enterButtonTarget: "ok"
+    box.focusButton: "ok"
+    box.clickButtonOnEnter: "ok"
     box.buttonModel: [
         { name: "ok", text: qsTr("OK"), iconName: "ok" },
         { name: "cancel", text: qsTr("Cancel"), iconName: "cancel" },

src/qml/Pages/SignIn.qml

@@ -15,7 +15,7 @@ HPage {
 
         multiplyWidth: 0.85
         title: qsTr("Sign in")
-        enterButtonTarget: "login"
+        clickButtonOnEnter: "login"
 
         buttonModel: [
             { name: "register", text: qsTr("Register"), enabled: false },

src/qml/utils.js

@@ -45,13 +45,13 @@ function isEmptyObject(obj) {
 }
 
 
-function numberWrapAround(num, max) {
+function numberWrapAt(num, max) {
     return num < 0 ? max + (num % max) : (num % max)
 }
 
 
 function hsluv(hue, saturation, lightness, alpha=1.0) {
-    hue = numberWrapAround(hue, 360)
+    hue = numberWrapAt(hue, 360)
     let rgb = py.callSync("hsluv", [hue, saturation, lightness])
     return Qt.rgba(rgb[0], rgb[1], rgb[2], alpha)
 }