add focusController class

This commit is contained in:
Cyril Anisimov 2024-09-14 19:42:55 +02:00
parent 8547de82ea
commit 02bbcd3a31
76 changed files with 1906 additions and 1576 deletions

View file

@ -16,6 +16,16 @@ Button {
property string connectedButtonColor: AmneziaStyle.color.goldenApricot
property bool buttonActiveFocus: activeFocus && (Qt.platform.os !== "android" || SettingsController.isOnTv())
property bool isFocusable: true
Keys.onTabPressed: {
FocusController.nextKeyTabItem()
}
Keys.onBacktabPressed: {
FocusController.previousKeyTabItem()
}
implicitWidth: 190
implicitHeight: 190

View file

@ -14,7 +14,7 @@ DrawerType2 {
width: parent.width
height: parent.height
expandedContent: ColumnLayout {
expandedStateContent: ColumnLayout {
id: content
anchors.top: parent.top
@ -26,14 +26,6 @@ DrawerType2 {
root.expandedHeight = content.implicitHeight + 32
}
Connections {
target: root
enabled: !GC.isMobile()
function onOpened() {
focusItem.forceActiveFocus()
}
}
Header2Type {
Layout.fillWidth: true
Layout.topMargin: 24
@ -44,11 +36,6 @@ DrawerType2 {
headerText: qsTr("Add new connection")
}
Item {
id: focusItem
KeyNavigation.tab: ip.rightButton
}
LabelWithButtonType {
id: ip
Layout.fillWidth: true
@ -61,8 +48,6 @@ DrawerType2 {
PageController.goToPage(PageEnum.PageSetupWizardCredentials)
root.close()
}
KeyNavigation.tab: qrCode.rightButton
}
DividerType {}
@ -78,8 +63,6 @@ DrawerType2 {
PageController.goToPage(PageEnum.PageSetupWizardConfigSource)
root.close()
}
KeyNavigation.tab: focusItem
}
DividerType {}

View file

@ -20,52 +20,71 @@ ListView {
property bool a: true
width: rootWidth
height: menuContent.contentItem.height
height: contentItem.height // TODO: It should be fixed size, not content item height
clip: true
interactive: false
// interactive: false
property FlickableType parentFlickable
property var lastItemTabClicked
// property FlickableType parentFlickable
// property var lastItemTabClicked
property int currentFocusIndex: 0
// property int currentFocusIndex: 0
activeFocusOnTab: true
onActiveFocusChanged: {
if (activeFocus) {
this.currentFocusIndex = 0
this.itemAtIndex(currentFocusIndex).forceActiveFocus()
}
}
snapMode: ListView.SnapToItem
// ScrollBar.vertical: ScrollBar {}
property bool isFocusable: true
Keys.onTabPressed: {
if (currentFocusIndex < this.count - 1) {
currentFocusIndex += 1
this.itemAtIndex(currentFocusIndex).forceActiveFocus()
} else {
currentFocusIndex = 0
if (lastItemTabClicked && typeof lastItemTabClicked === "function") {
lastItemTabClicked()
}
}
console.debug("--> Tab is pressed on HomeContainersListView: ", objectName)
FocusController.nextKeyTabItem()
}
onVisibleChanged: {
if (visible) {
currentFocusIndex = 0
focusItem.forceActiveFocus()
}
}
Item {
id: focusItem
Keys.onBacktabPressed: {
console.debug("--> Shift+Tab is pressed on HomeContainersListView: ", objectName)
FocusController.previousKeyTabItem()
}
onCurrentFocusIndexChanged: {
if (parentFlickable) {
parentFlickable.ensureVisible(this.itemAtIndex(currentFocusIndex))
}
}
// activeFocusOnTab: true
// onActiveFocusChanged: {
// console.log("===========================")
// positionViewAtEnd()
// parentFlickable.ensureVisible(this.itemAtIndex(6))
// if (activeFocus) {
// this.currentFocusIndex = 0
// this.itemAtIndex(currentFocusIndex).forceActiveFocus()
// }
// }
// Keys.onTabPressed: {
// if (currentFocusIndex < this.count - 1) {
// currentFocusIndex += 1
// this.itemAtIndex(currentFocusIndex).forceActiveFocus()
// } else {
// currentFocusIndex = 0
// if (lastItemTabClicked && typeof lastItemTabClicked === "function") {
// lastItemTabClicked()
// }
// }
// }
// onVisibleChanged: {
// if (visible) {
// currentFocusIndex = 0
// focusItem.forceActiveFocus()
// }
// }
// Item {
// id: focusItem
// }
// onCurrentFocusIndexChanged: {
// if (parentFlickable) {
// parentFlickable.ensureVisible(this.itemAtIndex(currentFocusIndex))
// }
// }
ButtonGroup {
id: containersRadioButtonGroup
@ -75,12 +94,6 @@ ListView {
implicitWidth: rootWidth
implicitHeight: content.implicitHeight
onActiveFocusChanged: {
if (activeFocus) {
containerRadioButton.forceActiveFocus()
}
}
ColumnLayout {
id: content
@ -111,13 +124,13 @@ ListView {
}
if (checked) {
containersDropDown.close()
containersDropDown.closeTriggered() // TODO: containersDropDown is outside this file
ServersModel.setDefaultContainer(ServersModel.defaultIndex, proxyDefaultServerContainersModel.mapToSource(index))
} else {
ContainersModel.setProcessedContainerIndex(proxyDefaultServerContainersModel.mapToSource(index))
InstallController.setShouldCreateServer(false)
PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings)
containersDropDown.close()
containersDropDown.closeTriggered()
}
}

View file

@ -16,7 +16,7 @@ DrawerType2 {
anchors.fill: parent
expandedHeight: parent.height * 0.9
expandedContent: ColumnLayout {
expandedStateContent: ColumnLayout {
id: content
anchors.top: parent.top
@ -24,14 +24,6 @@ DrawerType2 {
anchors.right: parent.right
spacing: 0
Connections {
target: root
enabled: !GC.isMobile()
function onOpened() {
focusItem.forceActiveFocus()
}
}
Header2Type {
Layout.fillWidth: true
Layout.topMargin: 24
@ -43,11 +35,6 @@ DrawerType2 {
descriptionText: qsTr("Allows you to connect to some sites or applications through a VPN connection and bypass others")
}
Item {
id: focusItem
KeyNavigation.tab: splitTunnelingSwitch.visible ? splitTunnelingSwitch : siteBasedSplitTunnelingSwitch.rightButton
}
LabelWithButtonType {
id: splitTunnelingSwitch
Layout.fillWidth: true
@ -59,7 +46,7 @@ DrawerType2 {
descriptionText: qsTr("Enabled \nCan't be disabled for current server")
rightImageSource: "qrc:/images/controls/chevron-right.svg"
KeyNavigation.tab: siteBasedSplitTunnelingSwitch.visible ? siteBasedSplitTunnelingSwitch.rightButton : focusItem
// KeyNavigation.tab: siteBasedSplitTunnelingSwitch.visible ? siteBasedSplitTunnelingSwitch.rightButton : focusItem
clickedFunction: function() {
// PageController.goToPage(PageEnum.PageSettingsSplitTunneling)
@ -80,13 +67,13 @@ DrawerType2 {
descriptionText: enabled && SitesModel.isTunnelingEnabled ? qsTr("Enabled") : qsTr("Disabled")
rightImageSource: "qrc:/images/controls/chevron-right.svg"
KeyNavigation.tab: appSplitTunnelingSwitch.visible ?
appSplitTunnelingSwitch.rightButton :
focusItem
// KeyNavigation.tab: appSplitTunnelingSwitch.visible ?
// appSplitTunnelingSwitch.rightButton :
// focusItem
clickedFunction: function() {
PageController.goToPage(PageEnum.PageSettingsSplitTunneling)
root.close()
root.closeTriggered()
}
}
@ -103,11 +90,11 @@ DrawerType2 {
descriptionText: AppSplitTunnelingModel.isTunnelingEnabled ? qsTr("Enabled") : qsTr("Disabled")
rightImageSource: "qrc:/images/controls/chevron-right.svg"
KeyNavigation.tab: focusItem
// KeyNavigation.tab: focusItem
clickedFunction: function() {
PageController.goToPage(PageEnum.PageSettingsAppSplitTunneling)
root.close()
root.closeTriggered()
}
}

View file

@ -26,7 +26,7 @@ DrawerType2 {
id: installedAppsModel
}
expandedContent: Item {
expandedStateContent: Item {
id: container
implicitHeight: expandedHeight

View file

@ -20,7 +20,7 @@ DrawerType2 {
property var yesButtonFunction
property var noButtonFunction
expandedContent: ColumnLayout {
expandedStateContent: ColumnLayout {
id: content
anchors.top: parent.top
@ -37,7 +37,11 @@ DrawerType2 {
target: root
enabled: !GC.isMobile()
function onOpened() {
focusItem.forceActiveFocus()
FocusController.setRoot(root)
}
function onClosed() {
FocusController.setRoot(null)
}
}
@ -59,11 +63,6 @@ DrawerType2 {
text: descriptionText
}
Item {
id: focusItem
KeyNavigation.tab: yesButton
}
BasicButtonType {
id: yesButton
Layout.fillWidth: true
@ -78,8 +77,6 @@ DrawerType2 {
yesButtonFunction()
}
}
KeyNavigation.tab: noButton
}
BasicButtonType {
@ -102,8 +99,6 @@ DrawerType2 {
noButtonFunction()
}
}
KeyNavigation.tab: focusItem
}
}
}

View file

@ -11,7 +11,7 @@ import "../Config"
DrawerType2 {
id: root
expandedContent: Item {
expandedStateContent: Item {
id: container
implicitHeight: root.height * 0.9
@ -24,13 +24,12 @@ DrawerType2 {
target: root
enabled: !GC.isMobile()
function onOpened() {
focusItem.forceActiveFocus()
FocusController.setRoot(root)
}
}
Item {
id: focusItem
KeyNavigation.tab: backButton
function onClosed() {
FocusController.setRoot(null)
}
}
ColumnLayout {
@ -44,8 +43,7 @@ DrawerType2 {
BackButtonType {
id: backButton
backButtonImage: "qrc:/images/controls/arrow-left.svg"
backButtonFunction: function() { root.close() }
KeyNavigation.tab: listView
backButtonFunction: function() { root.closeTriggered() }
}
}
@ -97,15 +95,15 @@ DrawerType2 {
}
}
Keys.onTabPressed: {
if (currentFocusIndex < this.count - 1) {
currentFocusIndex += 1
this.itemAtIndex(currentFocusIndex).forceActiveFocus()
} else {
listViewFocusItem.forceActiveFocus()
focusItem.forceActiveFocus()
}
}
// Keys.onTabPressed: {
// if (currentFocusIndex < this.count - 1) {
// currentFocusIndex += 1
// this.itemAtIndex(currentFocusIndex).forceActiveFocus()
// } else {
// listViewFocusItem.forceActiveFocus()
// focusItem.forceActiveFocus()
// }
// }
Item {
id: listViewFocusItem
@ -195,7 +193,7 @@ DrawerType2 {
onClicked: {
listView.currentIndex = index
LanguageModel.changeLanguage(languageIndex)
root.close()
root.closeTriggered()
}
}
}

View file

@ -0,0 +1,208 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import ContainersModelFilters 1.0
import Style 1.0
import "./"
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
ListView {
id: root
anchors.top: serversMenuHeader.bottom
anchors.right: parent.right
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.topMargin: 16
model: ServersModel
currentIndex: ServersModel.defaultIndex
ScrollBar.vertical: ScrollBar {
id: scrollBar
objectName: "scrollBar"
policy: root.height >= root.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
}
readonly property bool isFocusable: true
// Keys.onTabPressed: {
// FocusController.nextKeyTabItem()
// }
// activeFocusOnTab: true
// focus: true
property int focusItemIndex: 0
// onFocusItemIndexChanged: {
// console.debug("===>> root onFocusItemIndexChanged")
// // const focusedElement = root.itemAtIndex(focusItemIndex)
// // if (focusedElement) {
// // if (focusedElement.y + focusedElement.height > root.height) {
// // root.contentY = focusedElement.y + focusedElement.height - root.height
// // } else {
// // root.contentY = 0
// // }
// // }
// }
Keys.onUpPressed: scrollBar.decrease()
Keys.onDownPressed: scrollBar.increase()
// Connections {
// target: drawer
// enabled: !GC.isMobile()
// function onIsCollapsedChanged() {
// if (drawer.isCollapsedStateActive) {
// const item = root.itemAtIndex(root.focusItemIndex)
// if (item) { item.serverRadioButtonProperty.focus = false }
// }
// }
// }
Connections {
target: ServersModel
function onDefaultServerIndexChanged(serverIndex) {
root.currentIndex = serverIndex
}
}
clip: true
delegate: Item {
id: menuContentDelegate
objectName: "menuContentDelegate"
property variant delegateData: model
property VerticalRadioButton serverRadioButtonProperty: serverRadioButton
implicitWidth: root.width
implicitHeight: serverRadioButtonContent.implicitHeight
ColumnLayout {
id: serverRadioButtonContent
objectName: "serverRadioButtonContent"
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
spacing: 0
RowLayout {
objectName: "serverRadioButtonRowLayout"
Layout.fillWidth: true
VerticalRadioButton {
id: serverRadioButton
objectName: "serverRadioButton"
Layout.fillWidth: true
focus: true
text: name
descriptionText: serverDescription
checked: index === root.currentIndex
checkable: !ConnectionController.isConnected
ButtonGroup.group: serversRadioButtonGroup
onClicked: {
if (ConnectionController.isConnected) {
PageController.showNotificationMessage(qsTr("Unable change server while there is an active connection"))
return
}
root.currentIndex = index
ServersModel.defaultIndex = index
}
MouseArea {
anchors.fill: serverRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
// Keys.onTabPressed: serverInfoButton.forceActiveFocus()
Keys.onEnterPressed: serverRadioButton.clicked()
Keys.onReturnPressed: serverRadioButton.clicked()
}
ImageButtonType {
id: serverInfoButton
objectName: "serverInfoButton"
// signal keyTabOnLastElement
// isFocusable: false
image: "qrc:/images/controls/settings.svg"
imageColor: AmneziaStyle.color.paleGray
implicitWidth: 56
implicitHeight: 56
z: 1
// onActiveFocusChanged: {
// console.debug("===>> serverInfoButton::activeFocusChanged")
// if (activeFocus) {
// if (currentIndex === root.count - 1) {
// console.log("---> Latest element")
// keyTabOnLastElement()
// }
// console.log("--->>", currentIndex)
// // serverRadioButton.forceActiveFocus()
// }
// }
// onKeyTabOnLastElement: {
// console.log("*** Signal emmited! ***")
// FocusController.nextKeyTabItem()
// }
// Keys.onTabPressed: {
// console.log("===>> serverInfoButton::Keys.onTabPressed")
// if (root.focusItemIndex < root.count - 1) {
// root.focusItemIndex++
// root.itemAtIndex(root.focusItemIndex).forceActiveFocus()
// } else {
// FocusController.nextKeyTabItem()
// root.contentY = 0
// }
// }
Keys.onEnterPressed: serverInfoButton.clicked()
Keys.onReturnPressed: serverInfoButton.clicked()
onClicked: function() {
console.debug("===>> onClicked serverInfoButton")
ServersModel.processedIndex = index
PageController.goToPage(PageEnum.PageSettingsServerInfo)
drawer.closeTriggered()
}
}
}
DividerType {
Layout.fillWidth: true
Layout.leftMargin: 0
Layout.rightMargin: 0
}
}
}
}

View file

@ -36,7 +36,7 @@ DrawerType2 {
configFileName = "amnezia_config"
}
expandedContent: Item {
expandedStateContent: Item {
implicitHeight: root.expandedHeight
Connections {
@ -57,8 +57,6 @@ DrawerType2 {
anchors.rightMargin: 16
headerText: root.headerText
KeyNavigation.tab: shareButton
}
FlickableType {
@ -86,8 +84,6 @@ DrawerType2 {
text: qsTr("Share")
leftImageSource: "qrc:/images/controls/share-2.svg"
KeyNavigation.tab: copyConfigTextButton
clickedFunc: function() {
var fileName = ""
if (GC.isMobile()) {
@ -124,8 +120,6 @@ DrawerType2 {
Keys.onReturnPressed: { copyConfigTextButton.clicked() }
Keys.onEnterPressed: { copyConfigTextButton.clicked() }
KeyNavigation.tab: copyNativeConfigStringButton.visible ? copyNativeConfigStringButton : showSettingsButton
}
BasicButtonType {
@ -166,8 +160,6 @@ DrawerType2 {
clickedFunc: function() {
configContentDrawer.open()
}
KeyNavigation.tab: header
}
DrawerType2 {
@ -184,24 +176,11 @@ DrawerType2 {
}
}
expandedContent: Item {
expandedStateContent: Item {
id: configContentContainer
implicitHeight: configContentDrawer.expandedHeight
Connections {
target: configContentDrawer
enabled: !GC.isMobile()
function onOpened() {
focusItem.forceActiveFocus()
}
}
Item {
id: focusItem
KeyNavigation.tab: backButton
}
Connections {
target: copyNativeConfigStringButton
function onClicked() {
@ -232,8 +211,6 @@ DrawerType2 {
anchors.topMargin: 16
backButtonFunction: function() { configContentDrawer.close() }
KeyNavigation.tab: focusItem
}
FlickableType {

View file

@ -39,8 +39,6 @@ Rectangle {
implicitWidth: (rootWidth - 32) / 2
text: "UDP"
KeyNavigation.tab: tcpButton
onClicked: {
root.currentIndex = 0
}