AZEN-SGG/amnezia-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update pages

Browse source
This commit is contained in:
Cyril Anisimov 2024-09-29 23:54:04 +02:00
parent 3c655d0051
commit 75f189e256
13 changed files with 443 additions and 668 deletions
Download patch file Download diff file Expand all files Collapse all files

22
client/ui/qml/Components/HomeContainersListView.qml
View file

@ -17,8 +17,6 @@ ListView {
property var rootWidth property var rootWidth
property var selectedText property var selectedText
property bool a: true
width: rootWidth width: rootWidth
height: contentItem.height // TODO: It should be fixed size, not content item height height: contentItem.height // TODO: It should be fixed size, not content item height
@ -30,28 +28,34 @@ ListView {
// property int currentFocusIndex: 0 // property int currentFocusIndex: 0
snapMode: ListView.SnapToItem // snapMode: ListView.SnapToItem
// ScrollBar.vertical: ScrollBar {} // ScrollBar.vertical: ScrollBar {}
property bool isFocusable: true property bool isFocusable: true
Keys.onTabPressed: { Keys.onTabPressed: {
console.debug("--> Tab is pressed on HomeContainersListView: ", objectName)
FocusController.nextKeyTabItem() FocusController.nextKeyTabItem()
} }
Keys.onBacktabPressed: { Keys.onBacktabPressed: {
console.debug("--> Shift+Tab is pressed on HomeContainersListView: ", objectName)
FocusController.previousKeyTabItem() FocusController.previousKeyTabItem()
} }
Keys.onRightPressed: { Keys.onUpPressed: {
FocusController.nextKeyTabItem() FocusController.nextKeyUpItem()
} }
Keys.onDownPressed: {
FocusController.nextKeyDownItem()
}
Keys.onLeftPressed: { Keys.onLeftPressed: {
FocusController.previousKeyTabItem() FocusController.nextKeyLeftItem()
}
Keys.onRightPressed: {
FocusController.nextKeyRightItem()
} }
// activeFocusOnTab: true // activeFocusOnTab: true

2
client/ui/qml/Components/InstalledAppsDrawer.qml
View file

@ -69,6 +69,8 @@ DrawerType2 {
clip: true clip: true
interactive: true interactive: true
property bool isFocusable: true
model: SortFilterProxyModel { model: SortFilterProxyModel {
id: proxyInstalledAppsModel id: proxyInstalledAppsModel
sourceModel: installedAppsModel sourceModel: installedAppsModel

74
client/ui/qml/Components/ServersListView.qml
View file

@ -33,43 +33,7 @@ ListView {
policy: root.height >= root.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn policy: root.height >= root.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
} }
readonly property bool isFocusable: true 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 { Connections {
target: ServersModel target: ServersModel
@ -135,7 +99,6 @@ ListView {
enabled: false enabled: false
} }
// Keys.onTabPressed: serverInfoButton.forceActiveFocus()
Keys.onEnterPressed: serverRadioButton.clicked() Keys.onEnterPressed: serverRadioButton.clicked()
Keys.onReturnPressed: serverRadioButton.clicked() Keys.onReturnPressed: serverRadioButton.clicked()
} }
@ -144,10 +107,6 @@ ListView {
id: serverInfoButton id: serverInfoButton
objectName: "serverInfoButton" objectName: "serverInfoButton"
// signal keyTabOnLastElement
// isFocusable: false
image: "qrc:/images/controls/settings.svg" image: "qrc:/images/controls/settings.svg"
imageColor: AmneziaStyle.color.paleGray imageColor: AmneziaStyle.color.paleGray
@ -156,41 +115,10 @@ ListView {
z: 1 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.onEnterPressed: serverInfoButton.clicked()
Keys.onReturnPressed: serverInfoButton.clicked() Keys.onReturnPressed: serverInfoButton.clicked()
onClicked: function() { onClicked: function() {
console.debug("===>> onClicked serverInfoButton")
ServersModel.processedIndex = index ServersModel.processedIndex = index
PageController.goToPage(PageEnum.PageSettingsServerInfo) PageController.goToPage(PageEnum.PageSettingsServerInfo)
drawer.closeTriggered() drawer.closeTriggered()

29
client/ui/qml/Components/SettingsContainersListView.qml
View file

@ -22,28 +22,7 @@ ListView {
clip: true clip: true
interactive: false interactive: false
activeFocusOnTab: true property bool isFocusable: false
// Keys.onTabPressed: {
// if (currentIndex < this.count - 1) {
// this.incrementCurrentIndex()
// } else {
// currentIndex = 0
// lastItemTabClickedSignal()
// }
// }
onCurrentIndexChanged: {
if (visible) {
if (fl.contentHeight > fl.height) {
var item = this.currentItem
if (item.y < fl.height) {
fl.contentY = item.y
} else if (item.y + item.height > fl.contentY + fl.height) {
fl.contentY = item.y + item.height - fl.height
}
}
}
}
onVisibleChanged: { onVisibleChanged: {
if (visible) { if (visible) {
@ -55,12 +34,6 @@ ListView {
implicitWidth: root.width implicitWidth: root.width
implicitHeight: delegateContent.implicitHeight implicitHeight: delegateContent.implicitHeight
onActiveFocusChanged: {
if (activeFocus) {
containerRadioButton.rightButton.forceActiveFocus()
}
}
ColumnLayout { ColumnLayout {
id: delegateContent id: delegateContent

51
client/ui/qml/Controls2/DropDownType.qml
View file

@ -54,20 +54,25 @@ Item {
FocusController.nextKeyTabItem() FocusController.nextKeyTabItem()
} }
// function popupClosedFunc() { Keys.onBacktabPressed: {
// if (!GC.isMobile()) { FocusController.previousKeyTabItem()
// this.forceActiveFocus() }
// }
// }
// property var parentFlickable Keys.onUpPressed: {
// onFocusChanged: { FocusController.nextKeyUpItem()
// if (root.activeFocus) { }
// if (root.parentFlickable) {
// root.parentFlickable.ensureVisible(root) Keys.onDownPressed: {
// } FocusController.nextKeyDownItem()
// } }
// }
Keys.onLeftPressed: {
FocusController.nextKeyLeftItem()
}
Keys.onRightPressed: {
FocusController.nextKeyRightItem()
}
implicitWidth: rootButtonContent.implicitWidth implicitWidth: rootButtonContent.implicitWidth
implicitHeight: rootButtonContent.implicitHeight implicitHeight: rootButtonContent.implicitHeight
@ -171,8 +176,6 @@ Item {
} }
ImageButtonType { ImageButtonType {
// isFocusable: false
Layout.rightMargin: 16 Layout.rightMargin: 16
implicitWidth: 40 implicitWidth: 40
@ -206,10 +209,6 @@ Item {
anchors.fill: parent anchors.fill: parent
expandedHeight: drawerParent.height * drawerHeight expandedHeight: drawerParent.height * drawerHeight
// onClosed: {
// root.popupClosedFunc()
// }
expandedStateContent: Item { expandedStateContent: Item {
id: container id: container
implicitHeight: menu.expandedHeight implicitHeight: menu.expandedHeight
@ -226,7 +225,11 @@ Item {
id: backButton id: backButton
backButtonImage: root.headerBackButtonImage backButtonImage: root.headerBackButtonImage
backButtonFunction: function() { menu.closeTriggered() } backButtonFunction: function() { menu.closeTriggered() }
// KeyNavigation.tab: listViewLoader.item onActiveFocusChanged: {
if(activeFocus) {
root.listView.positionViewAtBeginning()
}
}
} }
} }
@ -252,14 +255,6 @@ Item {
Loader { Loader {
id: listViewLoader id: listViewLoader
sourceComponent: root.listView sourceComponent: root.listView
onLoaded: {
// listViewLoader.item.parentFlickable = flickable
// FocusController.reload()
// listViewLoader.item.lastItemTabClicked = function() {
// focusItem.forceActiveFocus()
// }
}
} }
} }
} }

122
client/ui/qml/Controls2/ListViewWithRadioButtonType.qml
View file

@ -26,12 +26,6 @@ ListView {
height: root.contentItem.height height: root.contentItem.height
clip: true clip: true
interactive: false
property FlickableType parentFlickable
property var lastItemTabClicked
property int currentFocusIndex: 0
property bool isFocusable: true property bool isFocusable: true
@ -69,84 +63,80 @@ ListView {
radioButton.clicked() radioButton.clicked()
} }
delegate: Item { delegate: ColumnLayout {
id: content
implicitWidth: rootWidth implicitWidth: rootWidth
implicitHeight: content.implicitHeight // implicitHeight: content.implicitHeight
ColumnLayout { RadioButton {
id: content id: radioButton
anchors.fill: parent implicitWidth: parent.width
implicitHeight: radioButtonContent.implicitHeight
RadioButton { hoverEnabled: true
id: radioButton
implicitWidth: parent.width indicator: Rectangle {
implicitHeight: radioButtonContent.implicitHeight width: parent.width - 1
height: parent.height
color: radioButton.hovered ? AmneziaStyle.color.slateGray : AmneziaStyle.color.onyxBlack
border.color: radioButton.focus ? AmneziaStyle.color.paleGray : AmneziaStyle.color.transparent
border.width: radioButton.focus ? 1 : 0
hoverEnabled: true Behavior on color {
PropertyAnimation { duration: 200 }
indicator: Rectangle { }
width: parent.width - 1 Behavior on border.color {
height: parent.height PropertyAnimation { duration: 200 }
color: radioButton.hovered ? AmneziaStyle.color.slateGray : AmneziaStyle.color.onyxBlack
border.color: radioButton.focus ? AmneziaStyle.color.paleGray : AmneziaStyle.color.transparent
border.width: radioButton.focus ? 1 : 0
Behavior on color {
PropertyAnimation { duration: 200 }
}
Behavior on border.color {
PropertyAnimation { duration: 200 }
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
enabled: false
}
} }
RowLayout { MouseArea {
id: radioButtonContent
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
anchors.rightMargin: 16 RowLayout {
anchors.leftMargin: 16 id: radioButtonContent
anchors.fill: parent
z: 1 anchors.rightMargin: 16
anchors.leftMargin: 16
ParagraphTextType { z: 1
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 20
text: name ParagraphTextType {
maximumLineCount: root.textMaximumLineCount Layout.fillWidth: true
elide: root.textElide Layout.topMargin: 20
Layout.bottomMargin: 20
} text: name
maximumLineCount: root.textMaximumLineCount
elide: root.textElide
Image {
source: imageSource
visible: radioButton.checked
width: 24
height: 24
Layout.rightMargin: 8
}
} }
ButtonGroup.group: buttonGroup Image {
checked: root.currentIndex === index source: imageSource
visible: radioButton.checked
onClicked: { width: 24
root.currentIndex = index height: 24
root.selectedText = name
if (clickedFunction && typeof clickedFunction === "function") { Layout.rightMargin: 8
clickedFunction() }
} }
ButtonGroup.group: buttonGroup
checked: root.currentIndex === index
onClicked: {
root.currentIndex = index
root.selectedText = name
if (clickedFunction && typeof clickedFunction === "function") {
clickedFunction()
} }
} }
} }

6
client/ui/qml/Pages2/PageHome.qml
View file

@ -126,7 +126,6 @@ PageType {
onClosed: { onClosed: {
console.log(objectName, " was closed...") console.log(objectName, " was closed...")
FocusController.setRootItem(null)
} }
} }
} }
@ -257,7 +256,6 @@ PageType {
console.debug("onClicked collapsedButtonChevron") console.debug("onClicked collapsedButtonChevron")
if (drawer.isCollapsedStateActive()) { if (drawer.isCollapsedStateActive()) {
drawer.openTriggered() drawer.openTriggered()
FocusController.setRootItem(drawer)
} }
} }
} }
@ -340,6 +338,8 @@ PageType {
rootButtonTextTopMargin: 8 rootButtonTextTopMargin: 8
rootButtonTextBottomMargin: 8 rootButtonTextBottomMargin: 8
enabled: drawer.isOpened
text: ServersModel.defaultServerDefaultContainerName text: ServersModel.defaultServerDefaultContainerName
textColor: AmneziaStyle.color.midnightBlack textColor: AmneziaStyle.color.midnightBlack
headerText: qsTr("VPN protocol") headerText: qsTr("VPN protocol")
@ -358,8 +358,6 @@ PageType {
rootWidth: root.width rootWidth: root.width
height: 500 // TODO: make calculated height: 500 // TODO: make calculated
// isFocusable: false // TODO: this is a workaround. Need to remove it
Connections { Connections {
objectName: "rowLayoutConnections" objectName: "rowLayoutConnections"

116
client/ui/qml/Pages2/PageSettingsApiLanguageList.qml
View file

@ -31,72 +31,68 @@ PageType {
id: containersRadioButtonGroup id: containersRadioButtonGroup
} }
delegate: Item { delegate: ColumnLayout {
id: content
implicitWidth: parent.width implicitWidth: parent.width
implicitHeight: content.implicitHeight implicitHeight: content.implicitHeight
ColumnLayout { RowLayout {
id: content VerticalRadioButton {
id: containerRadioButton
anchors.fill: parent
RowLayout {
VerticalRadioButton {
id: containerRadioButton
Layout.fillWidth: true
Layout.leftMargin: 16
text: countryName
ButtonGroup.group: containersRadioButtonGroup
imageSource: "qrc:/images/controls/download.svg"
checked: index === ApiCountryModel.currentIndex
onClicked: {
if (index !== ApiCountryModel.currentIndex) {
PageController.showBusyIndicator(true)
var prevIndex = ApiCountryModel.currentIndex
ApiCountryModel.currentIndex = index
if (!InstallController.updateServiceFromApi(ServersModel.defaultIndex, countryCode, countryName)) {
ApiCountryModel.currentIndex = prevIndex
}
}
}
MouseArea {
anchors.fill: containerRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
Keys.onEnterPressed: {
if (checkable) {
checked = true
}
containerRadioButton.clicked()
}
Keys.onReturnPressed: {
if (checkable) {
checked = true
}
containerRadioButton.clicked()
}
}
Image {
Layout.rightMargin: 32
Layout.alignment: Qt.AlignRight
source: "qrc:/countriesFlags/images/flagKit/" + countryImageCode + ".svg"
}
}
DividerType {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: 16
text: countryName
ButtonGroup.group: containersRadioButtonGroup
imageSource: "qrc:/images/controls/download.svg"
checked: index === ApiCountryModel.currentIndex
onClicked: {
if (index !== ApiCountryModel.currentIndex) {
PageController.showBusyIndicator(true)
var prevIndex = ApiCountryModel.currentIndex
ApiCountryModel.currentIndex = index
if (!InstallController.updateServiceFromApi(ServersModel.defaultIndex, countryCode, countryName)) {
ApiCountryModel.currentIndex = prevIndex
}
}
}
MouseArea {
anchors.fill: containerRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
Keys.onEnterPressed: {
if (checkable) {
checked = true
}
containerRadioButton.clicked()
}
Keys.onReturnPressed: {
if (checkable) {
checked = true
}
containerRadioButton.clicked()
}
} }
Image {
Layout.rightMargin: 32
Layout.alignment: Qt.AlignRight
source: "qrc:/countriesFlags/images/flagKit/" + countryImageCode + ".svg"
}
}
DividerType {
Layout.fillWidth: true
} }
} }
} }

250
client/ui/qml/Pages2/PageSettingsServerInfo.qml
View file

@ -19,24 +19,26 @@ import "../Components"
PageType { PageType {
id: root id: root
property int pageSettingsServerProtocols: 0 readonly property int pageSettingsServerProtocols: 0
property int pageSettingsServerServices: 1 readonly property int pageSettingsServerServices: 1
property int pageSettingsServerData: 2 readonly property int pageSettingsServerData: 2
property int pageSettingsApiServerInfo: 3 readonly property int pageSettingsApiServerInfo: 3
property int pageSettingsApiLanguageList: 4 readonly property int pageSettingsApiLanguageList: 4
// defaultActiveFocusItem: focusItem property var server
Connections { Connections {
target: PageController target: PageController
function onGoToPageSettingsServerServices() { function onGoToPageSettingsServerServices() {
tabBar.currentIndex = root.pageSettingsServerServices tabBar.setCurrentIndex(root.pageSettingsServerServices)
} }
} }
SortFilterProxyModel { SortFilterProxyModel {
id: proxyServersModel id: proxyServersModel
objectName: "proxyServersModel"
sourceModel: ServersModel sourceModel: ServersModel
filters: [ filters: [
ValueFilter { ValueFilter {
@ -44,131 +46,110 @@ PageType {
value: true value: true
} }
] ]
Component.onCompleted: {
root.server = proxyServersModel.get(0)
}
} }
ColumnLayout { ColumnLayout {
objectName: "mainLayout"
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 20
spacing: 16 spacing: 4
Repeater { BackButtonType {
id: header id: backButton
model: proxyServersModel objectName: "backButton"
activeFocusOnTab: true backButtonFunction: function() {
onFocusChanged: { if (nestedStackView.currentIndex === root.pageSettingsApiServerInfo
header.itemAt(0).focusItem.forceActiveFocus() && ServersModel.getProcessedServerData("isCountrySelectionAvailable")) {
nestedStackView.currentIndex = root.pageSettingsApiLanguageList
} else {
PageController.closePage()
}
}
}
HeaderType {
id: headerContent
objectName: "headerContent"
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.bottomMargin: 10
actionButtonImage: nestedStackView.currentIndex === root.pageSettingsApiLanguageList ? "qrc:/images/controls/settings.svg" : "qrc:/images/controls/edit-3.svg"
headerText: root.server.name
descriptionText: {
if (ServersModel.getProcessedServerData("isServerFromGatewayApi")) {
return ApiServicesModel.getSelectedServiceData("serviceDescription")
} else if (ServersModel.getProcessedServerData("isServerFromTelegramApi")) {
return root.server.serverDescription
} else if (ServersModel.isProcessedServerHasWriteAccess()) {
return root.server.credentialsLogin + " · " + root.server.hostName
} else {
return root.server.hostName
}
} }
delegate: ColumnLayout { actionButtonFunction: function() {
if (nestedStackView.currentIndex === root.pageSettingsApiLanguageList) {
property alias focusItem: backButton nestedStackView.currentIndex = root.pageSettingsApiServerInfo
} else {
id: content serverNameEditDrawer.openTriggered()
Layout.topMargin: 20
BackButtonType {
id: backButton
backButtonFunction: function() {
if (nestedStackView.currentIndex === root.pageSettingsApiServerInfo &&
ServersModel.getProcessedServerData("isCountrySelectionAvailable")) {
nestedStackView.currentIndex = root.pageSettingsApiLanguageList
} else {
PageController.closePage()
}
}
} }
}
}
DrawerType2 {
id: serverNameEditDrawer
objectName: "serverNameEditDrawer"
parent: root
anchors.fill: parent
expandedHeight: root.height * 0.35
expandedStateContent: ColumnLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 32
anchors.leftMargin: 16
anchors.rightMargin: 16
TextFieldWithHeaderType {
id: serverName
HeaderType {
id: headerContent
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: 16 headerText: qsTr("Server name")
Layout.rightMargin: 16 textFieldText: root.server.name
textField.maximumLength: 30
actionButtonImage: nestedStackView.currentIndex === root.pageSettingsApiLanguageList ? "qrc:/images/controls/settings.svg" : "qrc:/images/controls/edit-3.svg" checkEmptyText: true
headerText: name
descriptionText: {
if (ServersModel.getProcessedServerData("isServerFromGatewayApi")) {
return ApiServicesModel.getSelectedServiceData("serviceDescription")
} else if (ServersModel.getProcessedServerData("isServerFromTelegramApi")) {
return serverDescription
} else if (ServersModel.isProcessedServerHasWriteAccess()) {
return credentialsLogin + " · " + hostName
} else {
return hostName
}
}
actionButtonFunction: function() {
if (nestedStackView.currentIndex === root.pageSettingsApiLanguageList) {
nestedStackView.currentIndex = root.pageSettingsApiServerInfo
} else {
serverNameEditDrawer.openTriggered()
}
}
} }
DrawerType2 { BasicButtonType {
id: serverNameEditDrawer id: saveButton
parent: root Layout.fillWidth: true
anchors.fill: parent text: qsTr("Save")
expandedHeight: root.height * 0.35
onClosed: { clickedFunc: function() {
if (!GC.isMobile()) { if (serverName.textFieldText === "") {
headerContent.actionButton.forceActiveFocus() return
}
}
expandedStateContent: ColumnLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 32
anchors.leftMargin: 16
anchors.rightMargin: 16
Connections {
target: serverNameEditDrawer
enabled: !GC.isMobile()
function onOpened() {
serverName.textField.forceActiveFocus()
}
} }
TextFieldWithHeaderType { if (serverName.textFieldText !== root.server.name) {
id: serverName root.server.name = serverName.textFieldText // TODO(CyAn84): set value to the model
Layout.fillWidth: true
headerText: qsTr("Server name")
textFieldText: name
textField.maximumLength: 30
checkEmptyText: true
}
BasicButtonType {
id: saveButton
Layout.fillWidth: true
text: qsTr("Save")
clickedFunc: function() {
if (serverName.textFieldText === "") {
return
}
if (serverName.textFieldText !== name) {
name = serverName.textFieldText
}
serverNameEditDrawer.closeTriggered()
}
} }
serverNameEditDrawer.closeTriggered()
} }
} }
} }
@ -189,33 +170,27 @@ PageType {
visible: !ServersModel.getProcessedServerData("isServerFromGatewayApi") visible: !ServersModel.getProcessedServerData("isServerFromGatewayApi")
activeFocusOnTab: true
onFocusChanged: {
if (activeFocus) {
protocolsTab.forceActiveFocus()
}
}
TabButtonType { TabButtonType {
id: protocolsTab id: protocolsTab
visible: protocolsPage.installedProtocolsCount visible: protocolsPage.installedProtocolsCount
width: protocolsPage.installedProtocolsCount ? undefined : 0 width: protocolsPage.installedProtocolsCount ? undefined : 0
isSelected: tabBar.currentIndex === root.pageSettingsServerProtocols isSelected: TabBar.tabBar.currentIndex === root.pageSettingsServerProtocols
text: qsTr("Protocols") text: qsTr("Protocols")
Keys.onReturnPressed: tabBar.currentIndex = root.pageSettingsServerProtocols Keys.onReturnPressed: TabBar.tabBar.setCurrentIndex(root.pageSettingsServerProtocols)
Keys.onEnterPressed: tabBar.currentIndex = root.pageSettingsServerProtocols Keys.onEnterPressed: TabBar.tabBar.setCurrentIndex(root.pageSettingsServerProtocols)
} }
TabButtonType { TabButtonType {
id: servicesTab id: servicesTab
visible: servicesPage.installedServicesCount visible: servicesPage.installedServicesCount
width: servicesPage.installedServicesCount ? undefined : 0 width: servicesPage.installedServicesCount ? undefined : 0
isSelected: tabBar.currentIndex === root.pageSettingsServerServices isSelected: TabBar.tabBar.currentIndex === root.pageSettingsServerServices
text: qsTr("Services") text: qsTr("Services")
Keys.onReturnPressed: tabBar.currentIndex = root.pageSettingsServerServices Keys.onReturnPressed: TabBar.tabBar.setCurrentIndex(root.pageSettingsServerServices)
Keys.onEnterPressed: tabBar.currentIndex = root.pageSettingsServerServices Keys.onEnterPressed: TabBar.tabBar.setCurrentIndex(root.pageSettingsServerServices)
} }
TabButtonType { TabButtonType {
@ -223,24 +198,15 @@ PageType {
isSelected: tabBar.currentIndex === root.pageSettingsServerData isSelected: tabBar.currentIndex === root.pageSettingsServerData
text: qsTr("Management") text: qsTr("Management")
Keys.onReturnPressed: tabBar.currentIndex = root.pageSettingsServerData Keys.onReturnPressed: TabBar.tabBar.setCurrentIndex(root.pageSettingsServerData)
Keys.onEnterPressed: tabBar.currentIndex = root.pageSettingsServerData Keys.onEnterPressed: TabBar.tabBar.setCurrentIndex(root.pageSettingsServerData)
Keys.onTabPressed: function() {
if (nestedStackView.currentIndex === root.pageSettingsServerProtocols) {
return protocolsPage
} else if (nestedStackView.currentIndex === root.pageSettingsServerProtocols) {
return servicesPage
} else {
return dataPage
}
}
} }
} }
StackLayout { StackLayout {
id: nestedStackView id: nestedStackView
Layout.preferredWidth: root.width
Layout.preferredHeight: root.height - tabBar.implicitHeight - header.implicitHeight Layout.fillWidth: true
currentIndex: ServersModel.getProcessedServerData("isServerFromGatewayApi") ? currentIndex: ServersModel.getProcessedServerData("isServerFromGatewayApi") ?
(ServersModel.getProcessedServerData("isCountrySelectionAvailable") ? (ServersModel.getProcessedServerData("isCountrySelectionAvailable") ?
@ -249,36 +215,26 @@ PageType {
PageSettingsServerProtocols { PageSettingsServerProtocols {
id: protocolsPage id: protocolsPage
stackView: root.stackView stackView: root.stackView
onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
} }
PageSettingsServerServices { PageSettingsServerServices {
id: servicesPage id: servicesPage
stackView: root.stackView stackView: root.stackView
onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
} }
PageSettingsServerData { PageSettingsServerData {
id: dataPage id: dataPage
stackView: root.stackView stackView: root.stackView
onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
} }
PageSettingsApiServerInfo { PageSettingsApiServerInfo {
id: apiInfoPage id: apiInfoPage
stackView: root.stackView stackView: root.stackView
// onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
} }
PageSettingsApiLanguageList { PageSettingsApiLanguageList {
id: apiLanguageListPage id: apiLanguageListPage
stackView: root.stackView stackView: root.stackView
// onLastItemTabClickedSignal: lastItemTabClicked(focusItem)
} }
} }

76
client/ui/qml/Pages2/PageSettingsServerProtocols.qml
View file

@ -21,53 +21,45 @@ PageType {
property var installedProtocolsCount property var installedProtocolsCount
onFocusChanged: settingsContainersListView.forceActiveFocus() function resetView() {
signal lastItemTabClickedSignal() settingsContainersListView.positionViewAtBeginning()
}
FlickableType { SettingsContainersListView {
id: fl id: settingsContainersListView
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.implicitHeight
Column { anchors.fill: parent
id: content
anchors.top: parent.top Connections {
anchors.left: parent.left target: ServersModel
anchors.right: parent.right
SettingsContainersListView { function onProcessedServerIndexChanged() {
id: settingsContainersListView settingsContainersListView.updateContainersModelFilters()
Connections {
target: ServersModel
function onProcessedServerIndexChanged() {
settingsContainersListView.updateContainersModelFilters()
}
}
function updateContainersModelFilters() {
if (ServersModel.isProcessedServerHasWriteAccess()) {
proxyContainersModel.filters = ContainersModelFilters.getWriteAccessProtocolsListFilters()
} else {
proxyContainersModel.filters = ContainersModelFilters.getReadAccessProtocolsListFilters()
}
root.installedProtocolsCount = proxyContainersModel.count
}
model: SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
sorters: [
RoleSorter { roleName: "isInstalled"; sortOrder: Qt.DescendingOrder },
RoleSorter { roleName: "installPageOrder"; sortOrder: Qt.AscendingOrder }
]
}
Component.onCompleted: updateContainersModelFilters()
} }
} }
function updateContainersModelFilters() {
if (ServersModel.isProcessedServerHasWriteAccess()) {
proxyContainersModel.filters = ContainersModelFilters.getWriteAccessProtocolsListFilters()
} else {
proxyContainersModel.filters = ContainersModelFilters.getReadAccessProtocolsListFilters()
}
root.installedProtocolsCount = proxyContainersModel.count
}
model: SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
sorters: [
RoleSorter { roleName: "isInstalled"; sortOrder: Qt.DescendingOrder },
RoleSorter { roleName: "installPageOrder"; sortOrder: Qt.AscendingOrder }
]
}
Component.onCompleted: {
settingsContainersListView.isFocusable = true
settingsContainersListView.interactive = true
updateContainersModelFilters()
}
} }
} }

72
client/ui/qml/Pages2/PageSettingsServerServices.qml
View file

@ -21,52 +21,40 @@ PageType {
property var installedServicesCount property var installedServicesCount
onFocusChanged: settingsContainersListView.forceActiveFocus() SettingsContainersListView {
signal lastItemTabClickedSignal() id: settingsContainersListView
FlickableType { anchors.fill: parent
id: fl
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.implicitHeight
Column { Connections {
id: content target: ServersModel
anchors.top: parent.top function onProcessedServerIndexChanged() {
anchors.left: parent.left settingsContainersListView.updateContainersModelFilters()
anchors.right: parent.right
SettingsContainersListView {
id: settingsContainersListView
Connections {
target: ServersModel
function onProcessedServerIndexChanged() {
settingsContainersListView.updateContainersModelFilters()
}
}
function updateContainersModelFilters() {
if (ServersModel.isProcessedServerHasWriteAccess()) {
proxyContainersModel.filters = ContainersModelFilters.getWriteAccessServicesListFilters()
} else {
proxyContainersModel.filters = ContainersModelFilters.getReadAccessServicesListFilters()
}
root.installedServicesCount = proxyContainersModel.count
}
model: SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
sorters: [
RoleSorter { roleName: "isInstalled"; sortOrder: Qt.DescendingOrder }
]
}
Component.onCompleted: updateContainersModelFilters()
} }
} }
function updateContainersModelFilters() {
if (ServersModel.isProcessedServerHasWriteAccess()) {
proxyContainersModel.filters = ContainersModelFilters.getWriteAccessServicesListFilters()
} else {
proxyContainersModel.filters = ContainersModelFilters.getReadAccessServicesListFilters()
}
root.installedServicesCount = proxyContainersModel.count
}
model: SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
sorters: [
RoleSorter { roleName: "isInstalled"; sortOrder: Qt.DescendingOrder }
]
}
Component.onCompleted: {
settingsContainersListView.isFocusable = true
settingsContainersListView.interactive = true
updateContainersModelFilters()
}
} }
} }

227
client/ui/qml/Pages2/PageSettingsSplitTunneling.qml
View file

@ -169,124 +169,120 @@ PageType {
} }
} }
} }
// KeyNavigation.tab: {
// return sites.count > 0 ?
// sites :
// searchField.textField
// }
} }
} }
FlickableType { ListView {
id: fl id: sites
anchors.top: header.bottom anchors.top: header.bottom
anchors.topMargin: 16 anchors.topMargin: 16
contentHeight: col.implicitHeight + addSiteButton.implicitHeight + addSiteButton.anchors.bottomMargin + addSiteButton.anchors.topMargin width: parent.width
height: 200 // TODO: Change to correct height
enabled: root.pageEnabled enabled: root.pageEnabled
Column { property bool isFocusable: true
id: col
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
ListView { Keys.onTabPressed: {
id: sites FocusController.nextKeyTabItem()
width: parent.width }
height: sites.contentItem.height
model: SortFilterProxyModel { Keys.onBacktabPressed: {
id: proxySitesModel FocusController.previousKeyTabItem()
sourceModel: SitesModel }
filters: [
AnyOf { Keys.onUpPressed: {
RegExpFilter { FocusController.nextKeyUpItem()
roleName: "url" }
pattern: ".*" + searchField.textField.text + ".*"
caseSensitivity: Qt.CaseInsensitive Keys.onDownPressed: {
} FocusController.nextKeyDownItem()
RegExpFilter { }
roleName: "ip"
pattern: ".*" + searchField.textField.text + ".*" Keys.onLeftPressed: {
caseSensitivity: Qt.CaseInsensitive FocusController.nextKeyLeftItem()
}
Keys.onRightPressed: {
FocusController.nextKeyRightItem()
}
model: SortFilterProxyModel {
id: proxySitesModel
sourceModel: SitesModel
filters: [
AnyOf {
RegExpFilter {
roleName: "url"
pattern: ".*" + searchField.textField.text + ".*"
caseSensitivity: Qt.CaseInsensitive
}
RegExpFilter {
roleName: "ip"
pattern: ".*" + searchField.textField.text + ".*"
caseSensitivity: Qt.CaseInsensitive
}
}
]
}
clip: true
delegate: Item {
implicitWidth: sites.width
implicitHeight: delegateContent.implicitHeight
// onActiveFocusChanged: {
// if (activeFocus) {
// site.rightButton.forceActiveFocus()
// }
// }
ColumnLayout {
id: delegateContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
LabelWithButtonType {
id: site
Layout.fillWidth: true
text: url
descriptionText: ip
rightImageSource: "qrc:/images/controls/trash.svg"
rightImageColor: AmneziaStyle.color.paleGray
clickedFunction: function() {
var headerText = qsTr("Remove ") + url + "?"
var yesButtonText = qsTr("Continue")
var noButtonText = qsTr("Cancel")
var yesButtonFunction = function() {
SitesController.removeSite(proxySitesModel.mapToSource(index))
if (!GC.isMobile()) {
site.rightButton.forceActiveFocus()
} }
} }
] var noButtonFunction = function() {
} if (!GC.isMobile()) {
site.rightButton.forceActiveFocus()
clip: true
interactive: false
activeFocusOnTab: true
focus: true
Keys.onTabPressed: {
if (currentIndex < this.count - 1) {
this.incrementCurrentIndex()
} else {
currentIndex = 0
searchField.textField.forceActiveFocus()
}
fl.ensureVisible(currentItem)
}
delegate: Item {
implicitWidth: sites.width
implicitHeight: delegateContent.implicitHeight
onActiveFocusChanged: {
if (activeFocus) {
site.rightButton.forceActiveFocus()
}
}
ColumnLayout {
id: delegateContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
LabelWithButtonType {
id: site
Layout.fillWidth: true
text: url
descriptionText: ip
rightImageSource: "qrc:/images/controls/trash.svg"
rightImageColor: AmneziaStyle.color.paleGray
clickedFunction: function() {
var headerText = qsTr("Remove ") + url + "?"
var yesButtonText = qsTr("Continue")
var noButtonText = qsTr("Cancel")
var yesButtonFunction = function() {
SitesController.removeSite(proxySitesModel.mapToSource(index))
if (!GC.isMobile()) {
site.rightButton.forceActiveFocus()
}
}
var noButtonFunction = function() {
if (!GC.isMobile()) {
site.rightButton.forceActiveFocus()
}
}
showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
} }
} }
DividerType {} showQuestionDrawer(headerText, "", yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
} }
} }
DividerType {}
} }
} }
} }
Rectangle { Rectangle {
anchors.fill: addSiteButton anchors.fill: addSiteButton
anchors.bottomMargin: -24 anchors.bottomMargin: -24
@ -315,7 +311,6 @@ PageType {
textFieldPlaceholderText: qsTr("website or IP") textFieldPlaceholderText: qsTr("website or IP")
buttonImageSource: "qrc:/images/controls/plus.svg" buttonImageSource: "qrc:/images/controls/plus.svg"
// KeyNavigation.tab: GC.isMobile() ? focusItem : addSiteButtonImage
clickedFunc: function() { clickedFunc: function() {
PageController.showBusyIndicator(true) PageController.showBusyIndicator(true)
@ -339,8 +334,6 @@ PageType {
Keys.onReturnPressed: addSiteButtonImage.clicked() Keys.onReturnPressed: addSiteButtonImage.clicked()
Keys.onEnterPressed: addSiteButtonImage.clicked() Keys.onEnterPressed: addSiteButtonImage.clicked()
Keys.onTabPressed: lastItemTabClicked(focusItem)
} }
} }
@ -350,12 +343,6 @@ PageType {
anchors.fill: parent anchors.fill: parent
expandedHeight: parent.height * 0.4375 expandedHeight: parent.height * 0.4375
onClosed: {
// if (root.defaultActiveFocusItem && !GC.isMobile()) {
// root.defaultActiveFocusItem.forceActiveFocus()
// }
}
expandedStateContent: ColumnLayout { expandedStateContent: ColumnLayout {
id: moreActionsDrawerContent id: moreActionsDrawerContent
@ -363,20 +350,6 @@ PageType {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
Connections {
target: moreActionsDrawer
function onOpened() {
focusItem1.forceActiveFocus()
}
function onActiveFocusChanged() {
if (!GC.isMobile()) {
focusItem1.forceActiveFocus()
}
}
}
Header2Type { Header2Type {
Layout.fillWidth: true Layout.fillWidth: true
Layout.margins: 16 Layout.margins: 16
@ -433,23 +406,9 @@ PageType {
anchors.fill: parent anchors.fill: parent
expandedHeight: parent.height * 0.4375 expandedHeight: parent.height * 0.4375
onClosed: {
if (!GC.isMobile()) {
moreActionsDrawer.forceActiveFocus()
}
}
expandedStateContent: Item { expandedStateContent: Item {
implicitHeight: importSitesDrawer.expandedHeight implicitHeight: importSitesDrawer.expandedHeight
Connections {
target: importSitesDrawer
enabled: !GC.isMobile()
function onOpened() {
focusItem2.forceActiveFocus()
}
}
BackButtonType { BackButtonType {
id: importSitesDrawerBackButton id: importSitesDrawerBackButton

64
client/ui/qml/Pages2/PageShare.qml
View file

@ -236,11 +236,6 @@ PageType {
descriptionText: qsTr("Use for your own devices, or share with those you trust to manage the server.") descriptionText: qsTr("Use for your own devices, or share with those you trust to manage the server.")
} }
// Item {
// id: focusItem
// // KeyNavigation.tab: shareFullAccessButton.rightButton
// }
LabelWithButtonType { LabelWithButtonType {
id: shareFullAccessButton id: shareFullAccessButton
Layout.fillWidth: true Layout.fillWidth: true
@ -253,7 +248,6 @@ PageType {
PageController.goToPage(PageEnum.PageShareFullAccess) PageController.goToPage(PageEnum.PageShareFullAccess)
shareFullAccessDrawer.closeTriggered() shareFullAccessDrawer.closeTriggered()
} }
} }
} }
} }
@ -694,38 +688,38 @@ PageType {
} }
clip: true clip: true
interactive: false // interactive: false
activeFocusOnTab: true // activeFocusOnTab: true
focus: true // focus: true
Keys.onTabPressed: { // Keys.onTabPressed: {
if (!GC.isMobile()) { // if (!GC.isMobile()) {
if (currentIndex < this.count - 1) { // if (currentIndex < this.count - 1) {
this.incrementCurrentIndex() // this.incrementCurrentIndex()
// currentItem.focusItem.forceActiveFocus() // // currentItem.focusItem.forceActiveFocus()
} else { // } else {
this.currentIndex = 0 // this.currentIndex = 0
// lastItemTabClicked(focusItem) // // lastItemTabClicked(focusItem)
} // }
} // }
} // }
onActiveFocusChanged: { // onActiveFocusChanged: {
if (focus && !GC.isMobile()) { // if (focus && !GC.isMobile()) {
currentIndex = 0 // currentIndex = 0
// currentItem.focusItem.forceActiveFocus() // // currentItem.focusItem.forceActiveFocus()
} // }
} // }
onCurrentIndexChanged: { // onCurrentIndexChanged: {
if (currentItem) { // if (currentItem) {
if (currentItem.y < a.contentY) { // if (currentItem.y < a.contentY) {
a.contentY = currentItem.y // a.contentY = currentItem.y
} else if (currentItem.y + currentItem.height + clientsListView.y > a.contentY + a.height) { // } else if (currentItem.y + currentItem.height + clientsListView.y > a.contentY + a.height) {
a.contentY = currentItem.y + clientsListView.y + currentItem.height - a.height // a.contentY = currentItem.y + clientsListView.y + currentItem.height - a.height
} // }
} // }
} // }
delegate: Item { delegate: Item {
implicitWidth: clientsListView.width implicitWidth: clientsListView.width