From a8deb3593be83eae01b17d5b8aba8936cb59f22f Mon Sep 17 00:00:00 2001 From: "vladimir.kuznetsov" Date: Wed, 16 Aug 2023 22:45:05 +0500 Subject: [PATCH] dropdown list fixes to match design layout --- client/resources.qrc | 3 +- .../Components/SettingsContainersListView.qml | 179 +++++++----------- .../qml/Controls2/ListViewWithLabelsType.qml | 70 +++++++ ...pe.qml => ListViewWithRadioButtonType.qml} | 21 +- client/ui/qml/Controls2/PageType.qml | 10 + .../qml/Pages2/PageProtocolCloakSettings.qml | 2 +- .../Pages2/PageProtocolOpenVpnSettings.qml | 6 +- .../PageProtocolShadowSocksSettings.qml | 2 +- .../ui/qml/Pages2/PageServiceSftpSettings.qml | 10 +- .../Pages2/PageServiceTorWebsiteSettings.qml | 1 + .../qml/Pages2/PageSettingsSplitTunneling.qml | 2 +- client/ui/qml/Pages2/PageShare.qml | 10 +- 12 files changed, 177 insertions(+), 139 deletions(-) create mode 100644 client/ui/qml/Controls2/ListViewWithLabelsType.qml rename client/ui/qml/Controls2/{ListViewType.qml => ListViewWithRadioButtonType.qml} (85%) diff --git a/client/resources.qrc b/client/resources.qrc index 2238f25d..782b6446 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -250,7 +250,7 @@ ui/qml/Controls2/BackButtonType.qml ui/qml/Pages2/PageSettingsServerProtocol.qml ui/qml/Components/TransportProtoSelector.qml - ui/qml/Controls2/ListViewType.qml + ui/qml/Controls2/ListViewWithRadioButtonType.qml images/controls/radio-button.svg images/controls/radio-button-inner-circle.png images/controls/radio-button-pressed.svg @@ -285,5 +285,6 @@ ui/qml/Controls2/TextAreaType.qml images/controls/trash.svg images/controls/more-vertical.svg + ui/qml/Controls2/ListViewWithLabelsType.qml diff --git a/client/ui/qml/Components/SettingsContainersListView.qml b/client/ui/qml/Components/SettingsContainersListView.qml index bb578899..2489323b 100644 --- a/client/ui/qml/Components/SettingsContainersListView.qml +++ b/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 { - id: containerRadioButton + ColumnLayout { + id: delegateContent - implicitWidth: parent.width - implicitHeight: containerRadioButtonContent.implicitHeight + anchors.fill: parent - 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 { - anchors.fill: parent - color: containerRadioButton.hovered ? Qt.rgba(1, 1, 1, 0.08) : "transparent" + clickedFunction: function() { + if (isInstalled) { + var containerIndex = root.model.mapToSource(index) + ContainersModel.setCurrentlyProcessedContainerIndex(containerIndex) - Behavior on color { - 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 + if (config[ContainerProps.containerTypeToString(containerIndex)]["isThirdPartyConfig"]) { ProtocolsModel.updateModel(config) - goToPage(PageEnum.PageSettingsServerProtocol) + goToPage(PageEnum.PageProtocolRaw) + return } - } - } - } else { - ContainersModel.setCurrentlyProcessedContainerIndex(root.model.mapToSource(index)) - InstallController.setShouldCreateServer(false) - goToPage(PageEnum.PageSetupWizardProtocolSettings) + 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) + } + } + } + + } else { + ContainersModel.setCurrentlyProcessedContainerIndex(root.model.mapToSource(index)) + InstallController.setShouldCreateServer(false) + goToPage(PageEnum.PageSetupWizardProtocolSettings) + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + enabled: false } } - MouseArea { - anchors.fill: containerRadioButton - cursorShape: Qt.PointingHandCursor - enabled: false - } + DividerType {} } } } diff --git a/client/ui/qml/Controls2/ListViewWithLabelsType.qml b/client/ui/qml/Controls2/ListViewWithLabelsType.qml new file mode 100644 index 00000000..5b614c43 --- /dev/null +++ b/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 + } + } + } +} diff --git a/client/ui/qml/Controls2/ListViewType.qml b/client/ui/qml/Controls2/ListViewWithRadioButtonType.qml similarity index 85% rename from client/ui/qml/Controls2/ListViewType.qml rename to client/ui/qml/Controls2/ListViewWithRadioButtonType.qml index 926ec038..f7f99dec 100644 --- a/client/ui/qml/Controls2/ListViewType.qml +++ b/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" - visible: imageSource ? true : radioButton.checked + source: imageSource + visible: radioButton.checked width: 24 height: 24 @@ -94,13 +98,6 @@ ListView { } } } - - DividerType { - Layout.fillWidth: true - Layout.bottomMargin: 4 - - visible: dividerVisible - } } Component.onCompleted: { diff --git a/client/ui/qml/Controls2/PageType.qml b/client/ui/qml/Controls2/PageType.qml index 296fcc8c..cb6fa142 100644 --- a/client/ui/qml/Controls2/PageType.qml +++ b/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 + } + } } diff --git a/client/ui/qml/Pages2/PageProtocolCloakSettings.qml b/client/ui/qml/Pages2/PageProtocolCloakSettings.qml index c19118b5..7273b86d 100644 --- a/client/ui/qml/Pages2/PageProtocolCloakSettings.qml +++ b/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 diff --git a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml b/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml index a8f7bb77..fb2258c5 100644 --- a/client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml +++ b/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 { diff --git a/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml b/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml index 38a6be06..7b78bc07 100644 --- a/client/ui/qml/Pages2/PageProtocolShadowSocksSettings.qml +++ b/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 diff --git a/client/ui/qml/Pages2/PageServiceSftpSettings.qml b/client/ui/qml/Pages2/PageServiceSftpSettings.qml index 6783fecd..32c0c170 100644 --- a/client/ui/qml/Pages2/PageServiceSftpSettings.qml +++ b/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: "macFUSE" readonly property string macosSecondLink: "SSHFS" - 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:
") @@ -210,6 +216,8 @@ PageType { return str } + + } BasicButtonType { diff --git a/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml b/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml index 40e1b339..080f5ee6 100644 --- a/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml +++ b/client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml @@ -79,6 +79,7 @@ PageType { clickedFunction: function() { content.copyToClipBoard(descriptionText) + PageController.showNotificationMessage(qsTr("Copied")) } } diff --git a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml index a43e9e5e..5cd0d095 100644 --- a/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml +++ b/client/ui/qml/Pages2/PageSettingsSplitTunneling.qml @@ -116,7 +116,7 @@ PageType { headerText: qsTr("Mode") - listView: ListViewType { + listView: ListViewWithRadioButtonType { rootWidth: root.width model: root.routeModesModel diff --git a/client/ui/qml/Pages2/PageShare.qml b/client/ui/qml/Pages2/PageShare.qml index f2ed4607..065bda12 100644 --- a/client/ui/qml/Pages2/PageShare.qml +++ b/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"