refactor PageSetupWizardProtocols

amnezia-vpn · Dec 29, 2024 · 2c1f3ea · 2c1f3ea
1 parent 867ad8e
commit 2c1f3ea
Showing 1 changed file with 37 additions and 96 deletions.
diff --git 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
-
-        Column {
-            id: content
-
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottomMargin: 20
+        anchors.right: parent.right
+        anchors.left: parent.left
 
-            Item {
-                width: parent.width
-                height: header.implicitHeight
+        property bool isFocusable: true
 
-                HeaderType {
-                    id: header
+        ScrollBar.vertical: ScrollBarType {}
 
-                    anchors.fill: parent
+        header: ColumnLayout {
+            width: listView.width
 
-                    anchors.leftMargin: 16
-                    anchors.rightMargin: 16
+            HeaderType {
+                id: header
 
-                    width: parent.width
+                Layout.fillWidth: true
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+                Layout.bottomMargin: 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.")
-                }
+                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.")
             }
+        }
 
-            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
+        model: proxyContainersModel
+        clip: true
+        spacing: 0
+        reuseItems: true
+        snapMode: ListView.SnapToItem
 
-                        LabelWithButtonType {
-                            id: container
-                            Layout.fillWidth: true
+        delegate: ColumnLayout {
+            width: listView.width
 
-                            text: name
-                            descriptionText: description
-                            rightImageSource: "qrc:/images/controls/chevron-right.svg"
+            LabelWithButtonType {
+                Layout.fillWidth: true
 
-                            clickedFunction: function() {
-                                ContainersModel.setProcessedContainerIndex(proxyContainersModel.mapToSource(index))
-                                PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings)
-                            }
-                        }
+                text: name
+                descriptionText: description
+                rightImageSource: "qrc:/images/controls/chevron-right.svg"
 
-                        DividerType {}
-                    }
+                clickedFunction: function() {
+                    ContainersModel.setProcessedContainerIndex(proxyContainersModel.mapToSource(index))
+                    PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings)
                 }
             }
+
+            DividerType {}
         }
     }
 }