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/PageSettingsApplication.qml

@@ -13,6 +13,53 @@ import "../Components"
 PageType {
     id: root
 
+    defaultActiveFocusItem: focusItem
+
+    function getNextComponentInFocusChain(componentId) {
+        const componentsList = [focusItem,
+                                backButton,
+                                switcher,
+                                switcherAutoStart,
+                                switcherAutoConnect,
+                                switcherStartMinimized,
+                                labelWithButtonLanguage,
+                                labelWithButtonLogging,
+                                labelWithButtonReset,
+                             ]
+
+        const idx = componentsList.indexOf(componentId)
+
+        if (idx === -1) {
+            return null
+        }
+
+        let nextIndex = idx + 1
+        if (nextIndex >= componentsList.length) {
+            nextIndex = 0
+        }
+
+        if (componentsList[nextIndex].visible) {
+            if ((nextIndex) >= 6) {
+                return componentsList[nextIndex].rightButton
+            } else {
+                return componentsList[nextIndex]
+            }
+        } else {
+            return getNextComponentInFocusChain(componentsList[nextIndex])
+        }
+    }
+
+    Item {
+        id: focusItem
+        KeyNavigation.tab: root.getNextComponentInFocusChain(focusItem)
+
+        onFocusChanged: {
+            if (focusItem.activeFocus) {
+                fl.contentY = 0
+            }
+        }
+    }
+
     BackButtonType {
         id: backButton
 
@@ -20,6 +67,8 @@ PageType {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.topMargin: 20
+
+        KeyNavigation.tab: root.getNextComponentInFocusChain(backButton)
     }
 
     FlickableType {
@@ -44,6 +93,7 @@ PageType {
             }
 
             SwitcherType {
+                id: switcher
                 visible: GC.isMobile()
 
                 Layout.fillWidth: true
@@ -57,6 +107,9 @@ PageType {
                         SettingsController.toggleScreenshotsEnabled(checked)
                     }
                 }
+
+                KeyNavigation.tab: root.getNextComponentInFocusChain(switcher)
+                parentFlickable: fl
             }
 
             DividerType {
@@ -64,6 +117,7 @@ PageType {
             }
 
             SwitcherType {
+                id: switcherAutoStart
                 visible: !GC.isMobile()
 
                 Layout.fillWidth: true
@@ -72,6 +126,9 @@ PageType {
                 text: qsTr("Auto start")
                 descriptionText: qsTr("Launch the application every time the device is starts")
 
+                KeyNavigation.tab: root.getNextComponentInFocusChain(switcherAutoStart)
+                parentFlickable: fl
+
                 checked: SettingsController.isAutoStartEnabled()
                 onCheckedChanged: {
                     if (checked !== SettingsController.isAutoStartEnabled()) {
@@ -85,6 +142,7 @@ PageType {
             }
 
             SwitcherType {
+                id: switcherAutoConnect
                 visible: !GC.isMobile()
 
                 Layout.fillWidth: true
@@ -93,6 +151,9 @@ PageType {
                 text: qsTr("Auto connect")
                 descriptionText: qsTr("Connect to VPN on app start")
 
+                KeyNavigation.tab: root.getNextComponentInFocusChain(switcherAutoConnect)
+                parentFlickable: fl
+
                 checked: SettingsController.isAutoConnectEnabled()
                 onCheckedChanged: {
                     if (checked !== SettingsController.isAutoConnectEnabled()) {
@@ -106,6 +167,7 @@ PageType {
             }
 
             SwitcherType {
+                id: switcherStartMinimized
                 visible: !GC.isMobile()
 
                 Layout.fillWidth: true
@@ -114,6 +176,9 @@ PageType {
                 text: qsTr("Start minimized")
                 descriptionText: qsTr("Launch application minimized")
 
+                KeyNavigation.tab: root.getNextComponentInFocusChain(switcherStartMinimized)
+                parentFlickable: fl
+
                 checked: SettingsController.isStartMinimizedEnabled()
                 onCheckedChanged: {
                     if (checked !== SettingsController.isStartMinimizedEnabled()) {
@@ -127,12 +192,16 @@ PageType {
             }
 
             LabelWithButtonType {
+                id: labelWithButtonLanguage
                 Layout.fillWidth: true
 
                 text: qsTr("Language")
                 descriptionText: LanguageModel.currentLanguageName
                 rightImageSource: "qrc:/images/controls/chevron-right.svg"
 
+                KeyNavigation.tab: root.getNextComponentInFocusChain(labelWithButtonLanguage)
+                parentFlickable: fl
+
                 clickedFunction: function() {
                     selectLanguageDrawer.open()
                 }
@@ -142,12 +211,16 @@ PageType {
             DividerType {}
 
             LabelWithButtonType {
+                id: labelWithButtonLogging
                 Layout.fillWidth: true
 
                 text: qsTr("Logging")
                 descriptionText: SettingsController.isLoggingEnabled ? qsTr("Enabled") : qsTr("Disabled")
                 rightImageSource: "qrc:/images/controls/chevron-right.svg"
 
+                KeyNavigation.tab: root.getNextComponentInFocusChain(labelWithButtonLogging)
+                parentFlickable: fl
+
                 clickedFunction: function() {
                     PageController.goToPage(PageEnum.PageSettingsLogging)
                 }
@@ -156,12 +229,16 @@ PageType {
             DividerType {}
 
             LabelWithButtonType {
+                id: labelWithButtonReset
                 Layout.fillWidth: true
 
                 text: qsTr("Reset settings and remove all data from the application")
                 rightImageSource: "qrc:/images/controls/chevron-right.svg"
                 textColor: "#EB5757"
 
+                Keys.onTabPressed: lastItemTabClicked()
+                parentFlickable: fl
+
                 clickedFunction: function() {
                     var headerText = qsTr("Reset settings and remove all data from the application?")
                     var descriptionText = qsTr("All settings will be reset to default. All installed AmneziaVPN services will still remain on the server.")
@@ -176,8 +253,15 @@ PageType {
                             SettingsController.clearSettings()
                             PageController.replaceStartPage()
                         }
+
+                        if (!GC.isMobile()) {
+                            root.defaultActiveFocusItem.forceActiveFocus()
+                        }
                     }
                     var noButtonFunction = function() {
+                        if (!GC.isMobile()) {
+                            root.defaultActiveFocusItem.forceActiveFocus()
+                        }
                     }
 
                     showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
@@ -193,5 +277,11 @@ PageType {
 
         width: root.width
         height: root.height
+
+        onClosed: {
+            if (!GC.isMobile()) {
+                focusItem.forceActiveFocus()
+            }
+        }
     }
 }