add navigation using enter + buttons will be clicked if enter (if but… (#556)

Enter navigation

client/ui/qml/Controls2/BasicButtonType.qml

@@ -16,47 +16,37 @@ Button {
     property string textColor: "#0E0E11"
 
     property string borderColor: "#D7D8DB"
+    property string borderFocusedColor: "#D7D8DB"
     property int borderWidth: 0
+    property int borderFocusedWidth: 1
 
     property string imageSource
 
     property bool squareLeftSide: false
 
+    property var clickedFunc
+
     implicitHeight: 56
 
     hoverEnabled: true
 
     background: Rectangle {
-        id: background
+        id: background_border
+
+        color: "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.width: root.activeFocus ? root.borderFocusedWidth : "transparent"
+
         anchors.fill: parent
         radius: 16
-        color: {
-            if (root.enabled) {
-                if (root.pressed) {
-                    return pressedColor
-                }
-                return root.hovered ? hoveredColor : defaultColor
-            } else {
-                return disabledColor
-            }
-        }
-        border.color: borderColor
-        border.width: borderWidth
-
-        Behavior on color {
-            PropertyAnimation { duration: 200 }
-        }
 
         Rectangle {
-            visible: root.squareLeftSide
+            id: background
 
-            z: 1
+            anchors.fill: background_border
+            anchors.margins: root.activeFocus ? 2: 0
 
-            width: parent.radius
-            height: parent.radius
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
+            radius: 16
             color: {
                 if (root.enabled) {
                     if (root.pressed) {
@@ -67,24 +57,53 @@ Button {
                     return disabledColor
                 }
             }
+            border.color: root.activeFocus ? "transparent" : borderColor
+            border.width: root.activeFocus ? 0 : borderWidth
 
             Behavior on color {
                 PropertyAnimation { duration: 200 }
             }
+
+            Rectangle {
+                visible: root.squareLeftSide
+
+                z: 1
+
+                width: parent.radius
+                height: parent.radius
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                color: {
+                    if (root.enabled) {
+                        if (root.pressed) {
+                            return pressedColor
+                        }
+                        return root.hovered ? hoveredColor : defaultColor
+                    } else {
+                        return disabledColor
+                    }
+                }
+
+                Behavior on color {
+                    PropertyAnimation { duration: 200 }
+                }
+            }
         }
     }
 
     MouseArea {
-        anchors.fill: background
+        anchors.fill: background_border
         enabled: false
         cursorShape: Qt.PointingHandCursor
     }
 
     contentItem: Item {
-        anchors.fill: background
+        anchors.fill: background_border
 
         implicitWidth: content.implicitWidth
         implicitHeight: content.implicitHeight
+
         RowLayout {
             id: content
             anchors.centerIn: parent
@@ -114,4 +133,22 @@ Button {
             }
         }
     }
+
+    Keys.onEnterPressed: {
+        if (root.clickedFunc && typeof root.clickedFunc === "function") {
+            root.clickedFunc()
+        }
+    }
+
+    Keys.onReturnPressed: {
+        if (root.clickedFunc && typeof root.clickedFunc === "function") {
+            root.clickedFunc()
+        }
+    }
+
+    onClicked: {
+        if (root.clickedFunc && typeof root.clickedFunc === "function") {
+            root.clickedFunc()
+        }
+    }
 }

client/ui/qml/Controls2/PageType.qml

@@ -7,6 +7,8 @@ Item {
 
     property StackView stackView: StackView.view
 
+    property var defaultActiveFocusItem: null
+
 //    MouseArea {
 //        id: globalMouseArea
 //        z: 99
@@ -19,4 +21,17 @@ Item {
 //            mouse.accepted = false
 //        }
 //    }
+
+    // Set a timer to set focus after a short delay
+    Timer {
+        id: timer
+        interval: 100 // Milliseconds
+        onTriggered: {
+            if (defaultActiveFocusItem) {
+                defaultActiveFocusItem.forceActiveFocus()
+            }
+        }
+        repeat: false // Stop the timer after one trigger
+        running: true // Start the timer
+    }
 }

client/ui/qml/Controls2/PopupType.qml

@@ -66,7 +66,7 @@ Popup {
                 borderWidth: 0
 
                 text: qsTr("Close")
-                onClicked: {
+                clickedFunc: function() {
                     root.close()
                 }
             }

client/ui/qml/Controls2/TextFieldWithHeaderType.qml

@@ -69,6 +69,7 @@ Item {
 
                     TextField {
                         id: textField
+                        activeFocusOnTab: false
 
                         enabled: root.textFieldEditable
                         color: root.enabled ? root.textFieldTextColor : root.textFieldTextDisabledColor
@@ -142,7 +143,7 @@ Item {
                     Layout.preferredWidth: content.implicitHeight
                     squareLeftSide: true
 
-                    onClicked: {
+                    clickedFunc: function() {
                         if (root.clickedFunc && typeof root.clickedFunc === "function") {
                             root.clickedFunc()
                         }
@@ -186,4 +187,12 @@ Item {
     function getBackgroundBorderColor(noneFocusedColor) {
         return textField.focus ? root.borderFocusedColor : noneFocusedColor
     }
+
+    Keys.onEnterPressed: {
+         KeyNavigation.tab.forceActiveFocus();
+    }
+
+    Keys.onReturnPressed: {
+         KeyNavigation.tab.forceActiveFocus();
+    }
 }