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

@@ -18,6 +18,8 @@ import "../Components"
 PageType {
     id: root
 
+    defaultActiveFocusItem: focusItem
+
     Connections {
         target: PageController
 
@@ -37,6 +39,11 @@ PageType {
         ]
     }
 
+    Item {
+        id: focusItem
+        KeyNavigation.tab: header
+    }
+
     ColumnLayout {
         anchors.fill: parent
 
@@ -46,15 +53,26 @@ PageType {
             id: header
             model: proxyServersModel
 
+            activeFocusOnTab: true
+            onFocusChanged: {
+                header.itemAt(0).focusItem.forceActiveFocus()
+            }
+
             delegate: ColumnLayout {
+
+                property alias focusItem: backButton
+
                 id: content
 
                 Layout.topMargin: 20
 
                 BackButtonType {
+                    id: backButton
+                    KeyNavigation.tab: headerContent.actionButton
                 }
 
                 HeaderType {
+                    id: headerContent
                     Layout.fillWidth: true
                     Layout.leftMargin: 16
                     Layout.rightMargin: 16
@@ -70,6 +88,8 @@ PageType {
                         }
                     }
 
+                    KeyNavigation.tab: tabBar
+
                     actionButtonFunction: function() {
                         serverNameEditDrawer.open()
                     }
@@ -83,6 +103,12 @@ PageType {
                     anchors.fill: parent
                     expandedHeight: root.height * 0.35
 
+                    onClosed: {
+                        if (!GC.isMobile()) {
+                            headerContent.actionButton.forceActiveFocus()
+                        }
+                    }
+
                     expandedContent: ColumnLayout {
                         anchors.top: parent.top
                         anchors.left: parent.left
@@ -99,6 +125,11 @@ PageType {
                             }
                         }
 
+                        Item {
+                            id: focusItem1
+                            KeyNavigation.tab: serverName.textField
+                        }
+
                         TextFieldWithHeaderType {
                             id: serverName
 
@@ -117,6 +148,7 @@ PageType {
                             Layout.fillWidth: true
 
                             text: qsTr("Save")
+                            KeyNavigation.tab: focusItem1
 
                             clickedFunc: function() {
                                 if (serverName.textFieldText === "") {
@@ -129,12 +161,6 @@ PageType {
                                 serverNameEditDrawer.close()
                             }
                         }
-
-                        Component.onCompleted: {
-                            if (header.itemAt(0) && !GC.isMobile()) {
-                                defaultActiveFocusItem = serverName.textField
-                            }
-                        }
                     }
                 }
             }
@@ -152,25 +178,52 @@ PageType {
                 color: "transparent"
             }
 
+            activeFocusOnTab: true
+            onFocusChanged: {
+                if (activeFocus) {
+                    protocolsTab.forceActiveFocus()
+                }
+            }
+
             TabButtonType {
+                id: protocolsTab
                 visible: protocolsPage.installedProtocolsCount
                 width: protocolsPage.installedProtocolsCount ? undefined : 0
                 isSelected: tabBar.currentIndex === 0
                 text: qsTr("Protocols")
+
+                KeyNavigation.tab: servicesTab
+                Keys.onReturnPressed: tabBar.currentIndex = 0
+                Keys.onEnterPressed: tabBar.currentIndex = 0
             }
             TabButtonType {
+                id: servicesTab
                 visible: servicesPage.installedServicesCount
                 width: servicesPage.installedServicesCount ? undefined : 0
                 isSelected: tabBar.currentIndex === 1
                 text: qsTr("Services")
+
+                KeyNavigation.tab: dataTab
+                Keys.onReturnPressed: tabBar.currentIndex = 1
+                Keys.onEnterPressed: tabBar.currentIndex = 1
             }
             TabButtonType {
+                id: dataTab
                 isSelected: tabBar.currentIndex === 2
                 text: qsTr("Management")
+
+                Keys.onReturnPressed: tabBar.currentIndex = 2
+                Keys.onEnterPressed: tabBar.currentIndex = 2
+                KeyNavigation.tab: stackView.currentIndex === 0 ?
+                                       protocolsPage :
+                                       stackView.currentIndex === 1 ?
+                                           servicesPage :
+                                           dataPage
             }
         }
 
         StackLayout {
+            id: stackView
             Layout.preferredWidth: root.width
             Layout.preferredHeight: root.height - tabBar.implicitHeight - header.implicitHeight
 
@@ -179,14 +232,22 @@ PageType {
             PageSettingsServerProtocols {
                 id: protocolsPage
                 stackView: root.stackView
+
+                onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
             }
             PageSettingsServerServices {
                 id: servicesPage
                 stackView: root.stackView
+
+                onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
             }
             PageSettingsServerData {
+                id: dataPage
                 stackView: root.stackView
+
+                onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
             }
         }
+
     }
 }