dropdown list fixes to match design layout

This commit is contained in:
vladimir.kuznetsov 2023-08-16 22:45:05 +05:00
parent e0d6e0117e
commit a8deb3593b
12 changed files with 177 additions and 139 deletions

View file

@ -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>

View file

@ -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 {}
}
}
}

View file

@ -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
}
}
}
}

View file

@ -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: {

View file

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

View file

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

View file

@ -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 {

View file

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

View file

@ -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 {

View file

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

View file

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

View file

@ -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"