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:
parent
d50e7dd3f4
commit
0e4ae26bae
66 changed files with 2269 additions and 143 deletions
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue