dropdown list fixes to match design layout

client/resources.qrc

@@ -250,7 +250,7 @@
         <file>ui/qml/Controls2/BackButtonType.qml</file>
         <file>ui/qml/Pages2/PageSettingsServerProtocol.qml</file>
         <file>ui/qml/Components/TransportProtoSelector.qml</file>
-        <file>ui/qml/Controls2/ListViewType.qml</file>
+        <file>ui/qml/Controls2/ListViewWithRadioButtonType.qml</file>
         <file>images/controls/radio-button.svg</file>
         <file>images/controls/radio-button-inner-circle.png</file>
         <file>images/controls/radio-button-pressed.svg</file>
@@ -285,5 +285,6 @@
         <file>ui/qml/Controls2/TextAreaType.qml</file>
         <file>images/controls/trash.svg</file>
         <file>images/controls/more-vertical.svg</file>
+        <file>ui/qml/Controls2/ListViewWithLabelsType.qml</file>
     </qresource>
 </RCC>

client/ui/qml/Components/SettingsContainersListView.qml

@@ -22,133 +22,86 @@ ListView {
     clip: true
     interactive: false
 
-    ButtonGroup {
-        id: containersRadioButtonGroup
-    }
-
     delegate: Item {
         implicitWidth: root.width
-        implicitHeight: containerRadioButton.implicitHeight
+        implicitHeight: delegateContent.implicitHeight
 
-        RadioButton {
+        ColumnLayout {
-            id: containerRadioButton
+            id: delegateContent
 
-            implicitWidth: parent.width
+            anchors.fill: parent
-            implicitHeight: containerRadioButtonContent.implicitHeight
 
-            hoverEnabled: true
+            LabelWithButtonType {
+                implicitWidth: parent.width
 
-            ButtonGroup.group: containersRadioButtonGroup
+                text: name
+                descriptionText: description
+                rightImageSource: isInstalled ? "qrc:/images/controls/chevron-right.svg" : "qrc:/images/controls/download.svg"
 
-            indicator: Rectangle {
+                clickedFunction: function() {
-                anchors.fill: parent
+                    if (isInstalled) {
-                color: containerRadioButton.hovered ? Qt.rgba(1, 1, 1, 0.08) : "transparent"
+                        var containerIndex = root.model.mapToSource(index)
+                        ContainersModel.setCurrentlyProcessedContainerIndex(containerIndex)
 
-                Behavior on color {
+                        if (config[ContainerProps.containerTypeToString(containerIndex)]["isThirdPartyConfig"]) {
-                    PropertyAnimation { duration: 200 }
-                }
-            }
-
-            checkable: isInstalled
-
-            RowLayout {
-                id: containerRadioButtonContent
-                anchors.fill: parent
-
-                anchors.rightMargin: 16
-                anchors.leftMargin: 16
-
-                z: 1
-
-                ColumnLayout {
-                    Layout.topMargin: 20
-                    Layout.bottomMargin: 20
-
-                    ListItemTitleType {
-                        Layout.fillWidth: true
-
-                        text: name
-                    }
-
-                    CaptionTextType {
-                        Layout.fillWidth: true
-
-                        text: description
-                        color: "#878B91"
-                    }
-                }
-
-                Image {
-                    source: isInstalled ? "qrc:/images/controls/chevron-right.svg" : "qrc:/images/controls/download.svg"
-
-                    width: 24
-                    height: 24
-
-                    Layout.rightMargin: 8
-                }
-            }
-
-            onClicked: {
-                if (isInstalled) {
-                    var containerIndex = root.model.mapToSource(index)
-                    ContainersModel.setCurrentlyProcessedContainerIndex(containerIndex)
-
-                    if (config[ContainerProps.containerTypeToString(containerIndex)]["isThirdPartyConfig"]) {
-                        ProtocolsModel.updateModel(config)
-                        goToPage(PageEnum.PageProtocolRaw)
-                        return
-                    }
-
-                    switch (containerIndex) {
-                    case ContainerEnum.OpenVpn: {
-                        OpenVpnConfigModel.updateModel(config)
-                        goToPage(PageEnum.PageProtocolOpenVpnSettings)
-                        break
-                    }
-                    case ContainerEnum.WireGuard: {
-                        ProtocolsModel.updateModel(config)
-                        goToPage(PageEnum.PageProtocolRaw)
-//                        WireGuardConfigModel.updateModel(config)
-//                        goToPage(PageEnum.PageProtocolWireGuardSettings)
-                        break
-                    }
-                    case ContainerEnum.Ipsec: {
-                        ProtocolsModel.updateModel(config)
-                        goToPage(PageEnum.PageProtocolRaw)
-//                        Ikev2ConfigModel.updateModel(config)
-//                        goToPage(PageEnum.PageProtocolIKev2Settings)
-                        break
-                    }
-                    case ContainerEnum.Sftp: {
-                        SftpConfigModel.updateModel(config)
-                        goToPage(PageEnum.PageServiceSftpSettings)
-                        break
-                    }
-                    case ContainerEnum.TorWebSite: {
-                        goToPage(PageEnum.PageServiceTorWebsiteSettings)
-                        break
-                    }
-
-                    default: {
-                        if (serviceType !== ProtocolEnum.Other) { //todo disable settings for dns container
                             ProtocolsModel.updateModel(config)
-                            goToPage(PageEnum.PageSettingsServerProtocol)
+                            goToPage(PageEnum.PageProtocolRaw)
+                            return
                         }
-                    }
-                    }
 
-                } else {
+                        switch (containerIndex) {
-                    ContainersModel.setCurrentlyProcessedContainerIndex(root.model.mapToSource(index))
+                        case ContainerEnum.OpenVpn: {
-                    InstallController.setShouldCreateServer(false)
+                            OpenVpnConfigModel.updateModel(config)
-                    goToPage(PageEnum.PageSetupWizardProtocolSettings)
+                            goToPage(PageEnum.PageProtocolOpenVpnSettings)
+                            break
+                        }
+                        case ContainerEnum.WireGuard: {
+                            ProtocolsModel.updateModel(config)
+                            goToPage(PageEnum.PageProtocolRaw)
+    //                        WireGuardConfigModel.updateModel(config)
+    //                        goToPage(PageEnum.PageProtocolWireGuardSettings)
+                            break
+                        }
+                        case ContainerEnum.Ipsec: {
+                            ProtocolsModel.updateModel(config)
+                            goToPage(PageEnum.PageProtocolRaw)
+    //                        Ikev2ConfigModel.updateModel(config)
+    //                        goToPage(PageEnum.PageProtocolIKev2Settings)
+                            break
+                        }
+                        case ContainerEnum.Sftp: {
+                            SftpConfigModel.updateModel(config)
+                            goToPage(PageEnum.PageServiceSftpSettings)
+                            break
+                        }
+                        case ContainerEnum.TorWebSite: {
+                            goToPage(PageEnum.PageServiceTorWebsiteSettings)
+                            break
+                        }
+
+                        default: {
+                            if (serviceType !== ProtocolEnum.Other) { //todo disable settings for dns container
+                                ProtocolsModel.updateModel(config)
+                                goToPage(PageEnum.PageSettingsServerProtocol)
+                            }
+                        }
+                        }
+
+                    } else {
+                        ContainersModel.setCurrentlyProcessedContainerIndex(root.model.mapToSource(index))
+                        InstallController.setShouldCreateServer(false)
+                        goToPage(PageEnum.PageSetupWizardProtocolSettings)
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    enabled: false
                 }
             }
 
-            MouseArea {
+            DividerType {}
-                anchors.fill: containerRadioButton
-                cursorShape: Qt.PointingHandCursor
-                enabled: false
-            }
         }
     }
 }

client/ui/qml/Controls2/ListViewWithLabelsType.qml

@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import "TextTypes"
+
+ListView {
+    id: menuContent
+
+    property var rootWidth
+
+    property var selectedText
+
+    property string imageSource: "qrc:/images/controls/check.svg"
+
+    property var clickedFunction
+
+    property bool dividerVisible: false
+
+    currentIndex: 0
+
+    width: rootWidth
+    height: menuContent.contentItem.height
+
+    clip: true
+    interactive: false
+
+    ButtonGroup {
+        id: buttonGroup
+    }
+
+    delegate: Item {
+        implicitWidth: rootWidth
+        implicitHeight: content.implicitHeight
+
+        ColumnLayout {
+            id: content
+
+            anchors.fill: parent
+
+            LabelWithButtonType {
+                Layout.fillWidth: true
+
+                text: name
+                rightImageSource: imageSource
+
+                clickedFunction: function() {
+                    menuContent.currentIndex = index
+                    menuContent.selectedText = name
+                    if (menuContent.clickedFunction && typeof menuContent.clickedFunction === "function") {
+                        menuContent.clickedFunction()
+                    }
+                }
+            }
+
+            DividerType {
+                Layout.fillWidth: true
+                Layout.bottomMargin: 4
+
+                visible: dividerVisible
+            }
+        }
+
+        Component.onCompleted: {
+            if (menuContent.currentIndex === index) {
+                menuContent.selectedText = name
+            }
+        }
+    }
+}

client/ui/qml/Controls2/ListViewWithRadioButtonType.qml

@@ -11,12 +11,10 @@ ListView {
 
     property var selectedText
 
-    property string imageSource
+    property string imageSource: "qrc:/images/controls/check.svg"
 
     property var clickedFunction
 
-    property bool dividerVisible: false
-
     currentIndex: 0
 
     width: rootWidth
@@ -53,6 +51,12 @@ ListView {
                     Behavior on color {
                         PropertyAnimation { duration: 200 }
                     }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        enabled: false
+                    }
                 }
 
                 RowLayout {
@@ -73,8 +77,8 @@ ListView {
                     }
 
                     Image {
-                        source: imageSource ? imageSource : "qrc:/images/controls/check.svg"
+                        source: imageSource
-                        visible: imageSource ? true : radioButton.checked
+                        visible: radioButton.checked
 
                         width: 24
                         height: 24
@@ -94,13 +98,6 @@ ListView {
                     }
                 }
             }
-
-            DividerType {
-                Layout.fillWidth: true
-                Layout.bottomMargin: 4
-
-                visible: dividerVisible
-            }
         }
 
         Component.onCompleted: {

client/ui/qml/Controls2/PageType.qml

@@ -28,4 +28,14 @@ Item {
             root.stackView.pop()
         }
     }
+
+    MouseArea {
+        z: -1
+        anchors.fill: parent
+
+        onClicked: {
+            console.log("base mouse area pressed")
+            focus = true
+        }
+    }
 }

client/ui/qml/Pages2/PageProtocolCloakSettings.qml

@@ -119,7 +119,7 @@ PageType {
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 
-                            listView: ListViewType {
+                            listView: ListViewWithRadioButtonType {
                                 id: cipherListView
 
                                 rootWidth: root.width

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

@@ -168,7 +168,7 @@ PageType {
                             descriptionText: qsTr("Hash")
                             headerText: qsTr("Hash")
 
-                            listView: ListViewType {
+                            listView: ListViewWithRadioButtonType {
                                 id: hashListView
 
                                 rootWidth: root.width
@@ -214,7 +214,7 @@ PageType {
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 
-                            listView: ListViewType {
+                            listView: ListViewWithRadioButtonType {
                                 id: cipherListView
 
                                 rootWidth: root.width
@@ -392,7 +392,7 @@ PageType {
                         }
                     }
                 }
-            }  
+            }
         }
 
         QuestionDrawer {

client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml

@@ -105,7 +105,7 @@ PageType {
                             descriptionText: qsTr("Cipher")
                             headerText: qsTr("Cipher")
 
-                            listView: ListViewType {
+                            listView: ListViewWithRadioButtonType {
                                 id: cipherListView
 
                                 rootWidth: root.width

client/ui/qml/Pages2/PageServiceSftpSettings.qml

@@ -97,6 +97,7 @@ PageType {
 
                             clickedFunction: function() {
                                 col.copyToClipBoard(descriptionText)
+                                PageController.showNotificationMessage(qsTr("Copied"))
                             }
                         }
 
@@ -113,6 +114,7 @@ PageType {
 
                             clickedFunction: function() {
                                 col.copyToClipBoard(descriptionText)
+                                PageController.showNotificationMessage(qsTr("Copied"))
                             }
                         }
 
@@ -129,6 +131,7 @@ PageType {
 
                             clickedFunction: function() {
                                 col.copyToClipBoard(descriptionText)
+                                PageController.showNotificationMessage(qsTr("Copied"))
                             }
                         }
 
@@ -145,6 +148,7 @@ PageType {
 
                             clickedFunction: function() {
                                 col.copyToClipBoard(descriptionText)
+                                PageController.showNotificationMessage(qsTr("Copied"))
                             }
                         }
 
@@ -194,7 +198,9 @@ PageType {
                             readonly property string macosFirstLink: "<a href=\"https://osxfuse.github.io/\" style=\"color: #FBB26A;\">macFUSE</a>"
                             readonly property string macosSecondLink: "<a href=\"https://osxfuse.github.io/\" style=\"color: #FBB26A;\">SSHFS</a>"
 
-                            onLinkActivated: Qt.openUrlExternally(link)
+                            onLinkActivated: function(link) {
+                                Qt.openUrlExternally(link)
+                            }
                             textFormat: Text.RichText
                             text: {
                                 var str = qsTr("In order to mount remote SFTP folder as local drive, perform following steps: <br>")
@@ -210,6 +216,8 @@ PageType {
 
                                 return str
                             }
+
+
                         }
 
                         BasicButtonType {

client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml

@@ -79,6 +79,7 @@ PageType {
 
                 clickedFunction: function() {
                     content.copyToClipBoard(descriptionText)
+                    PageController.showNotificationMessage(qsTr("Copied"))
                 }
             }
 

client/ui/qml/Pages2/PageSettingsSplitTunneling.qml

@@ -116,7 +116,7 @@ PageType {
 
             headerText: qsTr("Mode")
 
-            listView: ListViewType {
+            listView: ListViewWithRadioButtonType {
                 rootWidth: root.width
 
                 model: root.routeModesModel

client/ui/qml/Pages2/PageShare.qml

@@ -166,7 +166,7 @@ PageType {
                 descriptionText: accessTypeSelector.currentIndex === 0 ? qsTr("Server and service") : qsTr("Server")
                 headerText: qsTr("Server")
 
-                listView: ListViewType {
+                listView: ListViewWithLabelsType {
                     rootWidth: root.width
                     dividerVisible: true
 
@@ -255,9 +255,8 @@ PageType {
                                 wrapMode: Text.WordWrap
                             }
 
-                            ListViewType {
+                            ListViewWithRadioButtonType {
                                 rootWidth: root.width
-                                dividerVisible: true
 
                                 imageSource: "qrc:/images/controls/check.svg"
 
@@ -274,7 +273,7 @@ PageType {
 
                                 currentIndex: 0
 
-                                clickedFunction: function () {
+                                clickedFunction: function() {
                                     handler()
 
                                     protocolSelector.visible = false
@@ -338,11 +337,10 @@ PageType {
                 descriptionText: qsTr("Connection format")
                 headerText: qsTr("Connection format")
 
-                listView: ListViewType {
+                listView: ListViewWithRadioButtonType {
                     id: exportTypeListView
 
                     rootWidth: root.width
-                    dividerVisible: true
 
                     imageSource: "qrc:/images/controls/chevron-right.svg"