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.
This commit is contained in:
Garegin Harutyunyan 2024-04-18 17:54:55 +04:00 committed by GitHub
parent d50e7dd3f4
commit 0e4ae26bae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
66 changed files with 2269 additions and 143 deletions

View file

@ -61,12 +61,19 @@ PageType {
anchors.rightMargin: 16
anchors.leftMargin: 16
Item {
id: focusItem
KeyNavigation.tab: backButton
}
BackButtonType {
id: backButton
Layout.topMargin: 20
Layout.rightMargin: -16
Layout.leftMargin: -16
KeyNavigation.tab: showDetailsButton
}
HeaderType {
@ -93,6 +100,7 @@ PageType {
textColor: "#FBB26A"
text: qsTr("More detailed")
KeyNavigation.tab: transportProtoSelector
clickedFunc: function() {
showDetailsDrawer.open()
@ -102,12 +110,35 @@ PageType {
DrawerType2 {
id: showDetailsDrawer
parent: root
onClosed: {
if (!GC.isMobile()) {
defaultActiveFocusItem.forceActiveFocus()
}
}
anchors.fill: parent
expandedHeight: parent.height * 0.9
expandedContent: Item {
Connections {
target: showDetailsDrawer
enabled: !GC.isMobile()
function onOpened() {
focusItem2.forceActiveFocus()
}
}
implicitHeight: showDetailsDrawer.expandedHeight
Item {
id: focusItem2
KeyNavigation.tab: showDetailsBackButton
onFocusChanged: {
if (focusItem2.activeFocus) {
fl.contentY = 0
}
}
}
BackButtonType {
id: showDetailsBackButton
@ -116,12 +147,15 @@ PageType {
anchors.right: parent.right
anchors.topMargin: 16
KeyNavigation.tab: showDetailsCloseButton
backButtonFunction: function() {
showDetailsDrawer.close()
}
}
FlickableType {
id: fl
anchors.top: showDetailsBackButton.bottom
anchors.left: parent.left
anchors.right: parent.right
@ -158,17 +192,19 @@ PageType {
textFormat: Text.MarkdownText
}
Rectangle {
Layout.fillHeight: true
color: "transparent"
}
BasicButtonType {
id: showDetailsCloseButton
Layout.fillWidth: true
Layout.bottomMargin: 32
parentFlickable: fl
text: qsTr("Close")
Keys.onTabPressed: lastItemTabClicked(focusItem2)
clickedFunc: function() {
showDetailsDrawer.close()
@ -192,6 +228,8 @@ PageType {
Layout.fillWidth: true
rootWidth: root.width
KeyNavigation.tab: (port.visible && port.enabled) ? port.textField : installButton
}
TextFieldWithHeaderType {
@ -220,6 +258,8 @@ PageType {
text: qsTr("Install")
Keys.onTabPressed: lastItemTabClicked(focusItem)
clickedFunc: function() {
PageController.goToPage(PageEnum.PageSetupWizardInstalling);
InstallController.install(dockerContainer, port.textFieldText, transportProtoSelector.currentIndex)
@ -241,7 +281,10 @@ PageType {
transportProtoSelector.visible = protocolSelectorVisible
transportProtoHeader.visible = protocolSelectorVisible
defaultActiveFocusItem = port.textField
if (port.visible && port.enabled)
defaultActiveFocusItem = port.textField
else
defaultActiveFocusItem = focusItem
}
}
}