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
|
|
@ -18,8 +18,18 @@ PageType {
|
|||
|
||||
defaultActiveFocusItem: listview.currentItem.vpnAddressSubnetTextField.textField
|
||||
|
||||
Item {
|
||||
id: focusItem
|
||||
KeyNavigation.tab: backButton
|
||||
onActiveFocusChanged: {
|
||||
if (activeFocus) {
|
||||
fl.ensureVisible(focusItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: backButton
|
||||
id: backButtonLayout
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
|
|
@ -28,12 +38,14 @@ PageType {
|
|||
anchors.topMargin: 20
|
||||
|
||||
BackButtonType {
|
||||
id: backButton
|
||||
KeyNavigation.tab: listview.currentItem.vpnAddressSubnetTextField.textField
|
||||
}
|
||||
}
|
||||
|
||||
FlickableType {
|
||||
id: fl
|
||||
anchors.top: backButton.bottom
|
||||
anchors.top: backButtonLayout.bottom
|
||||
anchors.bottom: parent.bottom
|
||||
contentHeight: content.implicitHeight
|
||||
|
||||
|
|
@ -90,13 +102,14 @@ PageType {
|
|||
headerText: qsTr("VPN address subnet")
|
||||
textFieldText: subnetAddress
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: transportProtoSelector
|
||||
|
||||
textField.onEditingFinished: {
|
||||
if (textFieldText !== subnetAddress) {
|
||||
subnetAddress = textFieldText
|
||||
}
|
||||
}
|
||||
|
||||
KeyNavigation.tab: portTextField.enabled ? portTextField.textField : saveRestartButton
|
||||
}
|
||||
|
||||
ParagraphTextType {
|
||||
|
|
@ -107,6 +120,7 @@ PageType {
|
|||
}
|
||||
|
||||
TransportProtoSelector {
|
||||
id: transportProtoSelector
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 16
|
||||
rootWidth: root.width
|
||||
|
|
@ -117,6 +131,8 @@ PageType {
|
|||
return transportProto === "tcp" ? 1 : 0
|
||||
}
|
||||
|
||||
KeyNavigation.tab: portTextField.enabled ? portTextField.textField : autoNegotiateEncryprionSwitcher
|
||||
|
||||
onCurrentIndexChanged: {
|
||||
if (transportProto === "tcp" && currentIndex === 0) {
|
||||
transportProto = "udp"
|
||||
|
|
@ -131,6 +147,7 @@ PageType {
|
|||
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 40
|
||||
parentFlickable: fl
|
||||
|
||||
enabled: isPortEditable
|
||||
|
||||
|
|
@ -145,7 +162,7 @@ PageType {
|
|||
}
|
||||
}
|
||||
|
||||
KeyNavigation.tab: saveRestartButton
|
||||
KeyNavigation.tab: autoNegotiateEncryprionSwitcher
|
||||
}
|
||||
|
||||
SwitcherType {
|
||||
|
|
@ -153,6 +170,7 @@ PageType {
|
|||
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 24
|
||||
parentFlickable: fl
|
||||
|
||||
text: qsTr("Auto-negotiate encryption")
|
||||
checked: autoNegotiateEncryprion
|
||||
|
|
@ -162,6 +180,10 @@ PageType {
|
|||
autoNegotiateEncryprion = checked
|
||||
}
|
||||
}
|
||||
|
||||
KeyNavigation.tab: hashDropDown.enabled ?
|
||||
hashDropDown :
|
||||
tlsAuthCheckBox
|
||||
}
|
||||
|
||||
DropDownType {
|
||||
|
|
@ -175,6 +197,10 @@ PageType {
|
|||
headerText: qsTr("Hash")
|
||||
|
||||
drawerParent: root
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: cipherDropDown.enabled ?
|
||||
cipherDropDown :
|
||||
tlsAuthCheckBox
|
||||
|
||||
listView: ListViewWithRadioButtonType {
|
||||
id: hashListView
|
||||
|
|
@ -223,6 +249,9 @@ PageType {
|
|||
headerText: qsTr("Cipher")
|
||||
|
||||
drawerParent: root
|
||||
parentFlickable: fl
|
||||
|
||||
KeyNavigation.tab: tlsAuthCheckBox
|
||||
|
||||
listView: ListViewWithRadioButtonType {
|
||||
id: cipherListView
|
||||
|
|
@ -261,24 +290,40 @@ PageType {
|
|||
}
|
||||
|
||||
Rectangle {
|
||||
id: contentRect
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 32
|
||||
Layout.preferredHeight: checkboxLayout.implicitHeight
|
||||
color: "#1C1D21"
|
||||
radius: 16
|
||||
|
||||
Connections {
|
||||
target: tlsAuthCheckBox
|
||||
enabled: !GC.isMobile()
|
||||
|
||||
function onFocusChanged() {
|
||||
if (tlsAuthCheckBox.activeFocus) {
|
||||
fl.ensureVisible(contentRect)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: checkboxLayout
|
||||
|
||||
anchors.fill: parent
|
||||
CheckBoxType {
|
||||
id: tlsAuthCheckBox
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: qsTr("TLS auth")
|
||||
checked: tlsAuth
|
||||
|
||||
KeyNavigation.tab: blockDnsCheckBox
|
||||
|
||||
onCheckedChanged: {
|
||||
if (checked !== tlsAuth) {
|
||||
console.log("tlsAuth changed to: " + checked)
|
||||
tlsAuth = checked
|
||||
}
|
||||
}
|
||||
|
|
@ -287,11 +332,14 @@ PageType {
|
|||
DividerType {}
|
||||
|
||||
CheckBoxType {
|
||||
id: blockDnsCheckBox
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: qsTr("Block DNS requests outside of VPN")
|
||||
checked: blockDns
|
||||
|
||||
KeyNavigation.tab: additionalClientCommandsSwitcher
|
||||
|
||||
onCheckedChanged: {
|
||||
if (checked !== blockDns) {
|
||||
blockDns = checked
|
||||
|
|
@ -305,6 +353,10 @@ PageType {
|
|||
id: additionalClientCommandsSwitcher
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 32
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: additionalClientCommandsTextArea.visible ?
|
||||
additionalClientCommandsTextArea.textArea :
|
||||
additionalServerCommandsSwitcher
|
||||
|
||||
checked: additionalClientCommands !== ""
|
||||
|
||||
|
|
@ -318,10 +370,13 @@ PageType {
|
|||
}
|
||||
|
||||
TextAreaType {
|
||||
id: additionalClientCommandsTextArea
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 16
|
||||
|
||||
visible: additionalClientCommandsSwitcher.checked
|
||||
KeyNavigation.tab: additionalServerCommandsSwitcher
|
||||
parentFlickable: fl
|
||||
|
||||
textAreaText: additionalClientCommands
|
||||
placeholderText: qsTr("Commands:")
|
||||
|
|
@ -337,6 +392,10 @@ PageType {
|
|||
id: additionalServerCommandsSwitcher
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 16
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: additionalServerCommandsTextArea.visible ?
|
||||
additionalServerCommandsTextArea.textArea :
|
||||
saveRestartButton
|
||||
|
||||
checked: additionalServerCommands !== ""
|
||||
|
||||
|
|
@ -350,6 +409,7 @@ PageType {
|
|||
}
|
||||
|
||||
TextAreaType {
|
||||
id: additionalServerCommandsTextArea
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 16
|
||||
|
||||
|
|
@ -357,7 +417,8 @@ PageType {
|
|||
|
||||
textAreaText: additionalServerCommands
|
||||
placeholderText: qsTr("Commands:")
|
||||
|
||||
parentFlickable: fl
|
||||
KeyNavigation.tab: saveRestartButton
|
||||
textArea.onEditingFinished: {
|
||||
if (additionalServerCommands !== textAreaText) {
|
||||
additionalServerCommands = textAreaText
|
||||
|
|
@ -373,6 +434,8 @@ PageType {
|
|||
Layout.bottomMargin: 24
|
||||
|
||||
text: qsTr("Save")
|
||||
parentFlickable: fl
|
||||
Keys.onTabPressed: lastItemTabClicked(focusItem)
|
||||
|
||||
clickedFunc: function() {
|
||||
forceActiveFocus()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue