Added tab navigation functional. (#721)

- Added tab navigation functional.
- In basic types added parentFlickable property, which will help to ensure, that the item is visible within flickable parent during tab navigation.
- Added focus state for some basic types.
- In PageType qml file added lastItemTabClicked function, which will help to focus tab bar buttons when the last tab on the current page clicked.
- Added Focus for back button for all pages and drawers.
- Added scroll on tab for Servers ListView on PageHome.

client/ui/qml/Pages2/PageProtocolWireGuardSettings.qml

@@ -15,8 +15,15 @@ import "../Components"
 PageType {
     id: root
 
+    defaultActiveFocusItem: listview
+
+    Item {
+        id: focusItem
+        KeyNavigation.tab: backButton
+    }
+
     ColumnLayout {
-        id: backButton
+        id: backButtonLayout
 
         anchors.top: parent.top
         anchors.left: parent.left
@@ -25,12 +32,14 @@ PageType {
         anchors.topMargin: 20
 
         BackButtonType {
+            id: backButton
+            KeyNavigation.tab: listview
         }
     }
 
     FlickableType {
         id: fl
-        anchors.top: backButton.bottom
+        anchors.top: backButtonLayout.bottom
         anchors.bottom: parent.bottom
         contentHeight: content.implicitHeight
 
@@ -54,7 +63,16 @@ PageType {
 
                 model: WireGuardConfigModel
 
+                activeFocusOnTab: true
+                onActiveFocusChanged: {
+                    if (activeFocus) {
+                        listview.itemAtIndex(0)?.focusItemId.forceActiveFocus()
+                    }
+                }
+
                 delegate: Item {
+                    property alias focusItemId: portTextField.textField
+
                     implicitWidth: listview.width
                     implicitHeight: col.implicitHeight
 
@@ -85,6 +103,8 @@ PageType {
                             textField.maximumLength: 5
                             textField.validator: IntValidator { bottom: 1; top: 65535 }
 
+                            KeyNavigation.tab: mtuTextField.textField
+
                             textField.onEditingFinished: {
                                 if (textFieldText !== port) {
                                     port = textFieldText
@@ -103,6 +123,8 @@ PageType {
                             textFieldText: mtu
                             textField.validator: IntValidator { bottom: 576; top: 65535 }
 
+                            KeyNavigation.tab: saveButton
+
                             textField.onEditingFinished: {
                                 if (textFieldText === "") {
                                     textFieldText = "0"
@@ -115,6 +137,7 @@ PageType {
                         }
 
                         BasicButtonType {
+                            id: saveButton
                             Layout.fillWidth: true
                             Layout.topMargin: 24
                             Layout.bottomMargin: 24
@@ -124,6 +147,8 @@ PageType {
 
                             text: qsTr("Save")
 
+                            Keys.onTabPressed: lastItemTabClicked(focusItem)
+
                             onClicked: {
                                 forceActiveFocus()
 
@@ -134,7 +159,11 @@ PageType {
 
                                 PageController.goToPage(PageEnum.PageSetupWizardInstalling);
                                 InstallController.updateContainer(WireGuardConfigModel.getConfig())
+                                focusItem.forceActiveFocus()
                             }
+
+                            Keys.onEnterPressed: saveButton.clicked()
+                            Keys.onReturnPressed: saveButton.clicked()
                         }
                     }
                 }