dropdown list fixes to match design layout
This commit is contained in:
parent
e0d6e0117e
commit
a8deb3593b
12 changed files with 177 additions and 139 deletions
|
@ -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>
|
||||
|
|
|
@ -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 {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
70
client/ui/qml/Controls2/ListViewWithLabelsType.qml
Normal file
70
client/ui/qml/Controls2/ListViewWithLabelsType.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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: {
|
|
@ -28,4 +28,14 @@ Item {
|
|||
root.stackView.pop()
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
z: -1
|
||||
anchors.fill: parent
|
||||
|
||||
onClicked: {
|
||||
console.log("base mouse area pressed")
|
||||
focus = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -119,7 +119,7 @@ PageType {
|
|||
descriptionText: qsTr("Cipher")
|
||||
headerText: qsTr("Cipher")
|
||||
|
||||
listView: ListViewType {
|
||||
listView: ListViewWithRadioButtonType {
|
||||
id: cipherListView
|
||||
|
||||
rootWidth: root.width
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -105,7 +105,7 @@ PageType {
|
|||
descriptionText: qsTr("Cipher")
|
||||
headerText: qsTr("Cipher")
|
||||
|
||||
listView: ListViewType {
|
||||
listView: ListViewWithRadioButtonType {
|
||||
id: cipherListView
|
||||
|
||||
rootWidth: root.width
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -79,6 +79,7 @@ PageType {
|
|||
|
||||
clickedFunction: function() {
|
||||
content.copyToClipBoard(descriptionText)
|
||||
PageController.showNotificationMessage(qsTr("Copied"))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -116,7 +116,7 @@ PageType {
|
|||
|
||||
headerText: qsTr("Mode")
|
||||
|
||||
listView: ListViewType {
|
||||
listView: ListViewWithRadioButtonType {
|
||||
rootWidth: root.width
|
||||
|
||||
model: root.routeModesModel
|
||||
|
|
|
@ -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"
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue