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
GitHub
parent
d50e7dd3f4
commit
0e4ae26bae
66 changed files with 2269 additions and 143 deletions
|
|
@ -15,6 +15,8 @@ import "../Components"
|
|||
PageType {
|
||||
id: root
|
||||
|
||||
defaultActiveFocusItem: focusItem
|
||||
|
||||
Connections {
|
||||
target: InstallController
|
||||
|
||||
|
|
@ -23,8 +25,13 @@ PageType {
|
|||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: focusItem
|
||||
KeyNavigation.tab: backButton
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: backButton
|
||||
id: backButtonLayout
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
|
|
@ -33,12 +40,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
|
||||
|
||||
|
|
@ -62,10 +71,18 @@ PageType {
|
|||
|
||||
model: SftpConfigModel
|
||||
|
||||
onFocusChanged: {
|
||||
if (focus) {
|
||||
listview.currentItem.focusItem.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
|
||||
delegate: Item {
|
||||
implicitWidth: listview.width
|
||||
implicitHeight: col.implicitHeight
|
||||
|
||||
property alias focusItem: hostLabel.rightButton
|
||||
|
||||
ColumnLayout {
|
||||
id: col
|
||||
|
||||
|
|
@ -84,9 +101,13 @@ PageType {
|
|||
}
|
||||
|
||||
LabelWithButtonType {
|
||||
id: hostLabel
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 32
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: portLabel.rightButton
|
||||
|
||||
text: qsTr("Host")
|
||||
descriptionText: ServersModel.getProcessedServerData("hostName")
|
||||
|
||||
|
|
@ -98,10 +119,14 @@ PageType {
|
|||
clickedFunction: function() {
|
||||
GC.copyToClipBoard(descriptionText)
|
||||
PageController.showNotificationMessage(qsTr("Copied"))
|
||||
if (!GC.isMobile()) {
|
||||
this.rightButton.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LabelWithButtonType {
|
||||
id: portLabel
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: qsTr("Port")
|
||||
|
|
@ -109,16 +134,23 @@ PageType {
|
|||
|
||||
descriptionOnTop: true
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: usernameLabel.rightButton
|
||||
|
||||
rightImageSource: "qrc:/images/controls/copy.svg"
|
||||
rightImageColor: "#D7D8DB"
|
||||
|
||||
clickedFunction: function() {
|
||||
GC.copyToClipBoard(descriptionText)
|
||||
PageController.showNotificationMessage(qsTr("Copied"))
|
||||
if (!GC.isMobile()) {
|
||||
this.rightButton.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LabelWithButtonType {
|
||||
id: usernameLabel
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: qsTr("User name")
|
||||
|
|
@ -126,16 +158,23 @@ PageType {
|
|||
|
||||
descriptionOnTop: true
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: passwordLabel.rightButton
|
||||
|
||||
rightImageSource: "qrc:/images/controls/copy.svg"
|
||||
rightImageColor: "#D7D8DB"
|
||||
|
||||
clickedFunction: function() {
|
||||
GC.copyToClipBoard(descriptionText)
|
||||
PageController.showNotificationMessage(qsTr("Copied"))
|
||||
if (!GC.isMobile()) {
|
||||
this.rightButton.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LabelWithButtonType {
|
||||
id: passwordLabel
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: qsTr("Password")
|
||||
|
|
@ -143,16 +182,29 @@ PageType {
|
|||
|
||||
descriptionOnTop: true
|
||||
|
||||
parentFlickable: fl
|
||||
Keys.onTabPressed: {
|
||||
if (mountButton.visible) {
|
||||
mountButton.forceActiveFocus()
|
||||
} else {
|
||||
detailedInstructionsButton.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
|
||||
rightImageSource: "qrc:/images/controls/copy.svg"
|
||||
rightImageColor: "#D7D8DB"
|
||||
|
||||
clickedFunction: function() {
|
||||
GC.copyToClipBoard(descriptionText)
|
||||
PageController.showNotificationMessage(qsTr("Copied"))
|
||||
if (!GC.isMobile()) {
|
||||
this.rightButton.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BasicButtonType {
|
||||
id: mountButton
|
||||
visible: !GC.isMobile()
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -168,13 +220,16 @@ PageType {
|
|||
textColor: "#D7D8DB"
|
||||
borderWidth: 1
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: detailedInstructionsButton
|
||||
|
||||
text: qsTr("Mount folder on device")
|
||||
|
||||
clickedFunc: function() {
|
||||
PageController.showBusyIndicator(true)
|
||||
InstallController.mountSftpDrive(port, password, username)
|
||||
PageController.showBusyIndicator(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ParagraphTextType {
|
||||
|
|
@ -216,6 +271,7 @@ PageType {
|
|||
}
|
||||
|
||||
BasicButtonType {
|
||||
id: detailedInstructionsButton
|
||||
Layout.topMargin: 16
|
||||
Layout.bottomMargin: 16
|
||||
Layout.leftMargin: 8
|
||||
|
|
@ -229,12 +285,16 @@ PageType {
|
|||
|
||||
text: qsTr("Detailed instructions")
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: removeButton
|
||||
|
||||
clickedFunc: function() {
|
||||
// Qt.openUrlExternally("https://github.com/amnezia-vpn/desktop-client/releases/latest")
|
||||
}
|
||||
}
|
||||
|
||||
BasicButtonType {
|
||||
id: removeButton
|
||||
Layout.topMargin: 24
|
||||
Layout.bottomMargin: 16
|
||||
Layout.leftMargin: 8
|
||||
|
|
@ -245,6 +305,9 @@ PageType {
|
|||
pressedColor: Qt.rgba(1, 1, 1, 0.12)
|
||||
textColor: "#EB5757"
|
||||
|
||||
parentFlickable: fl
|
||||
Keys.onTabPressed: lastItemTabClicked()
|
||||
|
||||
text: qsTr("Remove SFTP and all data stored there")
|
||||
|
||||
clickedFunc: function() {
|
||||
|
|
@ -257,6 +320,9 @@ PageType {
|
|||
InstallController.removeProcessedContainer()
|
||||
}
|
||||
var noButtonFunction = function() {
|
||||
if (!GC.isMobile()) {
|
||||
removeButton.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
|
||||
showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue