diff --git a/client/ui/qml/Pages2/PageSetupWizardProtocols.qml b/client/ui/qml/Pages2/PageSetupWizardProtocols.qml index 15c1170f..6b6b6038 100644 --- a/client/ui/qml/Pages2/PageSetupWizardProtocols.qml +++ b/client/ui/qml/Pages2/PageSetupWizardProtocols.qml @@ -34,125 +34,66 @@ PageType { } } - ColumnLayout { - id: backButtonLayout + BackButtonType { + id: backButton anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.topMargin: 20 - - BackButtonType { - id: backButton - } } - FlickableType { - id: fl - anchors.top: backButtonLayout.bottom + ListView { + id: listView + anchors.top: backButton.bottom anchors.bottom: parent.bottom - contentHeight: content.implicitHeight + content.anchors.topMargin + content.anchors.bottomMargin + anchors.right: parent.right + anchors.left: parent.left - Column { - id: content + property bool isFocusable: true - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottomMargin: 20 + ScrollBar.vertical: ScrollBarType {} - Item { - width: parent.width - height: header.implicitHeight + header: ColumnLayout { + width: listView.width - HeaderType { - id: header + HeaderType { + id: header - anchors.fill: parent + Layout.fillWidth: true + Layout.leftMargin: 16 + Layout.rightMargin: 16 + Layout.bottomMargin: 16 - anchors.leftMargin: 16 - anchors.rightMargin: 16 + headerText: qsTr("VPN protocol") + descriptionText: qsTr("Choose the one with the highest priority for you. Later, you can install other protocols and additional services, such as DNS proxy and SFTP.") + } + } - width: parent.width + model: proxyContainersModel + clip: true + spacing: 0 + reuseItems: true + snapMode: ListView.SnapToItem - headerText: qsTr("VPN protocol") - descriptionText: qsTr("Choose the one with the highest priority for you. Later, you can install other protocols and additional services, such as DNS proxy and SFTP.") + delegate: ColumnLayout { + width: listView.width + + LabelWithButtonType { + Layout.fillWidth: true + + text: name + descriptionText: description + rightImageSource: "qrc:/images/controls/chevron-right.svg" + + clickedFunction: function() { + ContainersModel.setProcessedContainerIndex(proxyContainersModel.mapToSource(index)) + PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings) } } - ListView { - id: containers - width: parent.width - height: containers.contentItem.height - // currentIndex: -1 - clip: true - interactive: false - model: proxyContainersModel - - function ensureCurrentItemVisible() { - if (currentIndex >= 0) { - if (currentItem.y < fl.contentY) { - fl.contentY = currentItem.y - } else if (currentItem.y + currentItem.height + header.height > fl.contentY + fl.height) { - fl.contentY = currentItem.y + currentItem.height + header.height - fl.height + 40 // 40 is a bottom margin - } - } - } - - activeFocusOnTab: true - Keys.onTabPressed: { - if (currentIndex < this.count - 1) { - this.incrementCurrentIndex() - } else { - this.currentIndex = 0 - focusItem.forceActiveFocus() - } - - ensureCurrentItemVisible() - } - - onVisibleChanged: { - if (visible) { - currentIndex = 0 - } - } - - delegate: Item { - implicitWidth: containers.width - implicitHeight: delegateContent.implicitHeight - - onActiveFocusChanged: { - if (activeFocus) { - container.rightButton.forceActiveFocus() - } - } - - ColumnLayout { - id: delegateContent - - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - - LabelWithButtonType { - id: container - Layout.fillWidth: true - - text: name - descriptionText: description - rightImageSource: "qrc:/images/controls/chevron-right.svg" - - clickedFunction: function() { - ContainersModel.setProcessedContainerIndex(proxyContainersModel.mapToSource(index)) - PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings) - } - } - - DividerType {} - } - } - } + DividerType {} } } }