added a drawer to change the server name and moved the display of the exported config to a separate drawer

This commit is contained in:
vladimir.kuznetsov 2023-06-20 10:25:24 +09:00
parent 4224e8314b
commit 3a264e6baf
30 changed files with 276 additions and 159 deletions

View file

@ -36,7 +36,7 @@ DrawerType {
Layout.topMargin: 16
text: "IP, логин и пароль от сервера"
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSetupWizardCredentials)
@ -50,7 +50,7 @@ DrawerType {
Layout.fillWidth: true
text: "QR-код, ключ или файл настроек"
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSetupWizardConfigSource)

View file

@ -16,11 +16,12 @@ DrawerType {
id: root
property alias headerText: header.headerText
property alias configContentHeaderText: configContentHeader.headerText
width: parent.width
height: parent.height * 0.9
Item{
Item {
anchors.fill: parent
FlickableType {
@ -86,46 +87,77 @@ DrawerType {
disabledColor: "#878B91"
textColor: "#D7D8DB"
text: showContent ? qsTr("Collapse content") : qsTr("Show content")
text: qsTr("Show content")
onClicked: {
showContent = !showContent
configContentDrawer.visible = true
}
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: configContent.implicitHeight + configContent.anchors.topMargin + configContent.anchors.bottomMargin
DrawerType {
id: configContentDrawer
radius: 10
color: "#2C2D30"
width: parent.width
height: parent.height * 0.9
visible: showContent
BackButtonType {
id: backButton
height: 24
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 16
anchors.leftMargin: 16
anchors.topMargin: 16
TextField {
id: configContent
backButtonFunction: function() {
configContentDrawer.visible = false
}
}
anchors.fill: parent
anchors.margins: 16
FlickableType {
anchors.top: backButton.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
contentHeight: configContent.implicitHeight + configContent.anchors.topMargin + configContent.anchors.bottomMargin
height: 24
ColumnLayout {
id: configContent
color: "#D7D8DB"
font.pixelSize: 16
font.weight: Font.Medium
font.family: "PT Root UI VF"
text: ExportController.amneziaCode
wrapMode: Text.Wrap
enabled: false
background: Rectangle {
anchors.fill: parent
color: "transparent"
anchors.rightMargin: 16
anchors.leftMargin: 16
Header2Type {
id: configContentHeader
Layout.fillWidth: true
Layout.topMargin: 16
}
TextField {
Layout.fillWidth: true
Layout.topMargin: 16
Layout.bottomMargin: 16
padding: 0
height: 24
color: "#D7D8DB"
font.pixelSize: 16
font.weight: Font.Medium
font.family: "PT Root UI VF"
text: ExportController.amneziaCode
wrapMode: Text.Wrap
readOnly: true
background: Rectangle {
color: "transparent"
}
}
}
}
}
@ -143,17 +175,19 @@ DrawerType {
anchors.fill: parent
smooth: false
source: ExportController.qrCodesCount ? ExportController.qrCodes[0] : ""
Timer {
property int idx: 0
property int index: 0
interval: 1000
running: ExportController.qrCodesCount > 0
repeat: true
onTriggered: {
idx++
if (idx >= ExportController.qrCodesCount) {
idx = 0
index++
if (index >= ExportController.qrCodesCount) {
index = 0
}
parent.source = ExportController.qrCodes[idx]
parent.source = ExportController.qrCodes[index]
}
}

View file

@ -12,8 +12,8 @@ Item {
property var clickedFunction
property alias buttonImage: button.image
property string iconImage
property string rightImageSource
property string leftImageSource
property string textColor: "#d7d8db"
@ -26,17 +26,34 @@ Item {
anchors.leftMargin: 16
anchors.rightMargin: 16
Image {
id: icon
source: iconImage
visible: iconImage ? true : false
Layout.rightMargin: visible ? 16 : 0
Rectangle {
id: leftImageBackground
visible: leftImageSource ? true : false
Layout.preferredHeight: rightImageSource ? leftImage.implicitHeight : 56
Layout.preferredWidth: rightImageSource ? leftImage.implicitWidth : 56
Layout.rightMargin: rightImageSource ? 16 : 0
radius: 12
color: "transparent"
Behavior on color {
PropertyAnimation { duration: 200 }
}
Image {
id: leftImage
anchors.centerIn: parent
source: leftImageSource
}
}
ColumnLayout {
ListItemTitleType {
text: root.text
color: textColor
color: root.textColor
Layout.fillWidth: true
Layout.topMargin: 16
@ -63,25 +80,20 @@ Item {
}
ImageButtonType {
id: button
id: rightImage
hoverEnabled: false
image: buttonImage
onClicked: {
if (clickedFunction && typeof clickedFunction === "function") {
clickedFunction()
}
}
image: rightImageSource
visible: rightImageSource ? true : false
Layout.alignment: Qt.AlignRight
Rectangle {
id: imageBackground
anchors.fill: button
id: rightImageBackground
anchors.fill: parent
radius: 12
color: "transparent"
Behavior on color {
PropertyAnimation { duration: 200 }
}
@ -106,31 +118,39 @@ Item {
hoverEnabled: true
onEntered: {
if (buttonImage) {
imageBackground.color = button.hoveredColor
if (rightImageSource) {
rightImageBackground.color = rightImage.hoveredColor
} else if (leftImageSource) {
leftImageBackground.color = rightImage.hoveredColor
} else {
background.color = button.hoveredColor
background.color = rightImage.hoveredColor
}
}
onExited: {
if (buttonImage) {
imageBackground.color = button.defaultColor
if (rightImageSource) {
rightImageBackground.color = rightImage.defaultColor
} else if (leftImageSource) {
leftImageBackground.color = rightImage.defaultColor
} else {
background.color = button.defaultColor
background.color = rightImage.defaultColor
}
}
onPressedChanged: {
if (buttonImage) {
imageBackground.color = pressed ? button.pressedColor : entered ? button.hoveredColor : button.defaultColor
if (rightImageSource) {
rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
} else if (leftImageSource) {
leftImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
} else {
background.color = pressed ? button.pressedColor : entered ? button.hoveredColor : button.defaultColor
background.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
}
}
onClicked: {
button.clicked()
if (clickedFunction && typeof clickedFunction === "function") {
clickedFunction()
}
}
}
}

View file

@ -31,7 +31,6 @@ ListView {
id: content
anchors.fill: parent
spacing: 16
RadioButton {
id: radioButton
@ -92,7 +91,7 @@ ListView {
DividerType {
Layout.fillWidth: true
Layout.bottomMargin: 16
Layout.bottomMargin: 4
visible: dividerVisible
}

View file

@ -51,7 +51,6 @@ PageType {
Rectangle {
id: buttonBackground
anchors.fill: buttonContent
anchors.bottomMargin: -radius
radius: 16
color: root.defaultColor
@ -59,11 +58,12 @@ PageType {
border.width: 1
Rectangle {
width: parent.width
height: 1
y: parent.height - height - parent.radius
color: root.borderColor
width: parent.radius
height: parent.radius
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: parent.left
color: parent.color
}
}

View file

@ -15,8 +15,8 @@ PageType {
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {
@ -40,8 +40,8 @@ PageType {
Layout.topMargin: 16
text: qsTr("Servers")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/server.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/server.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsServersList)
@ -54,8 +54,8 @@ PageType {
Layout.fillWidth: true
text: qsTr("Connection")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/radio.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/radio.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsConnection)
@ -68,8 +68,8 @@ PageType {
Layout.fillWidth: true
text: qsTr("Application")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/app.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/app.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsApplication)
@ -82,8 +82,8 @@ PageType {
Layout.fillWidth: true
text: qsTr("Backup")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/save.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/save.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsBackup)
@ -96,8 +96,8 @@ PageType {
Layout.fillWidth: true
text: qsTr("About AmneziaVPN")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/amnezia.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/amnezia.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsAbout)

View file

@ -27,7 +27,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {
@ -102,8 +102,7 @@ And if you don't like the app, all the more support it - the donation will be us
text: qsTr("Show other methods on Github")
onClicked: {
}
onClicked: Qt.openUrlExternally("https://github.com/amnezia-vpn/amnezia-client")
}
ParagraphTextType {
@ -121,11 +120,10 @@ And if you don't like the app, all the more support it - the donation will be us
text: qsTr("Telegram group")
descriptionText: qsTr("To discuss features")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/telegram.svg"
leftImageSource: "qrc:/images/controls/telegram.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsAbout)
Qt.openUrlExternally("https://t.me/amnezia_vpn_dev")
}
}
@ -136,11 +134,9 @@ And if you don't like the app, all the more support it - the donation will be us
text: qsTr("Mail")
descriptionText: qsTr("For reviews and bug reports")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/mail.svg"
leftImageSource: "qrc:/images/controls/mail.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsAbout)
}
}
@ -150,11 +146,10 @@ And if you don't like the app, all the more support it - the donation will be us
Layout.fillWidth: true
text: qsTr("Github")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/github.svg"
leftImageSource: "qrc:/images/controls/github.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsAbout)
Qt.openUrlExternally("https://github.com/amnezia-vpn/amnezia-client")
}
}
@ -164,11 +159,9 @@ And if you don't like the app, all the more support it - the donation will be us
Layout.fillWidth: true
text: qsTr("Website")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/amnezia.svg"
leftImageSource: "qrc:/images/controls/amnezia.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsAbout)
}
}

View file

@ -26,7 +26,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {
@ -35,22 +35,21 @@ PageType {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
spacing: 16
HeaderType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
headerText: qsTr("Application")
}
LabelWithButtonType {
Layout.fillWidth: true
Layout.topMargin: 16
text: qsTr("Language")
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
}
@ -62,7 +61,7 @@ PageType {
Layout.fillWidth: true
text: qsTr("Reset settings and remove all data from the application")
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
}

View file

@ -26,7 +26,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {

View file

@ -25,7 +25,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {
@ -35,8 +35,6 @@ PageType {
anchors.left: parent.left
anchors.right: parent.right
spacing: 16
HeaderType {
Layout.fillWidth: true
Layout.leftMargin: 16
@ -47,6 +45,8 @@ PageType {
SwitcherType {
Layout.fillWidth: true
Layout.topMargin: 16
Layout.bottomMargin: 16
Layout.leftMargin: 16
Layout.rightMargin: 16
@ -68,7 +68,7 @@ PageType {
text: qsTr("DNS servers")
descriptionText: qsTr("If AmneziaDNS is not used or installed")
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSettingsDns)
@ -82,7 +82,7 @@ PageType {
text: qsTr("Split site tunneling")
descriptionText: qsTr("Allows you to connect to some sites through a secure connection, and to others bypassing it")
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
}
@ -95,7 +95,7 @@ PageType {
text: qsTr("Separate application tunneling")
descriptionText: qsTr("Allows you to use the VPN only for certain applications")
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
}

View file

@ -26,7 +26,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {

View file

@ -16,8 +16,8 @@ PageType {
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {

View file

@ -54,10 +54,60 @@ PageType {
actionButtonImage: "qrc:/images/controls/edit-3.svg"
headerText: name
descriptionText: hostName
descriptionText: credentialsLogin + " · " + hostName
actionButtonFunction: function() {
connectionTypeSelection.visible = true
serverNameEditDrawer.visible = true
}
}
DrawerType {
id: serverNameEditDrawer
width: root.width
height: root.height * 0.35
onVisibleChanged: {
if (serverNameEditDrawer.visible) {
serverName.textField.forceActiveFocus()
}
}
ColumnLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 16
anchors.leftMargin: 16
anchors.rightMargin: 16
TextFieldWithHeaderType {
id: serverName
Layout.fillWidth: true
headerText: qsTr("Server name")
textFieldText: name
}
BasicButtonType {
Layout.fillWidth: true
defaultColor: "transparent"
hoveredColor: Qt.rgba(1, 1, 1, 0.08)
pressedColor: Qt.rgba(1, 1, 1, 0.12)
disabledColor: "#878B91"
textColor: "#D7D8DB"
borderWidth: 1
text: qsTr("Save")
onClicked: {
if (serverName.textFieldText !== name) {
name = serverName.textFieldText
serverNameEditDrawer.visible = false
}
}
}
}
}
}

View file

@ -86,7 +86,7 @@ PageType {
text: name
descriptionText: hostName
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
ServersModel.setCurrentlyProcessedServerIndex(index)

View file

@ -15,8 +15,8 @@ PageType {
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {
@ -58,8 +58,8 @@ PageType {
Layout.topMargin: 16
text: "Файл с настройками подключения"
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/folder-open.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/folder-open.svg"
clickedFunction: function() {
onClicked: fileDialog.open()
@ -81,8 +81,8 @@ PageType {
Layout.fillWidth: true
text: "QR-код"
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/qr-code.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/qr-code.svg"
clickedFunction: function() {
}
@ -94,8 +94,8 @@ PageType {
Layout.fillWidth: true
text: "Ключ в виде текста"
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/text-cursor.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
leftImageSource: "qrc:/images/controls/text-cursor.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSetupWizardTextKey)

View file

@ -25,7 +25,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {

View file

@ -44,7 +44,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.implicitHeight + continueButton.anchors.bottomMargin
Column {

View file

@ -32,8 +32,8 @@ PageType {
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
Column {
@ -87,7 +87,7 @@ PageType {
text: name
descriptionText: description
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
clickedFunction: function() {
ContainersModel.setCurrentlyProcessedContainerIndex(proxyContainersModel.mapToSource(index))

View file

@ -24,8 +24,8 @@ PageType {
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {

View file

@ -14,8 +14,8 @@ PageType {
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {

View file

@ -50,7 +50,7 @@ PageType {
FlickableType {
id: fl
anchors.top: backButton.bottom
anchors.bottom: root.bottom
anchors.bottom: parent.bottom
contentHeight: content.implicitHeight + connectButton.implicitHeight
ColumnLayout {

View file

@ -56,8 +56,8 @@ PageType {
}
FlickableType {
anchors.top: root.top
anchors.bottom: root.bottom
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: content.height
ColumnLayout {
@ -121,6 +121,7 @@ PageType {
ParagraphTextType {
Layout.fillWidth: true
Layout.topMargin: 24
text: accessTypeSelector.currentIndex === 0 ? qsTr("VPN access without the ability to manage the server") :
qsTr("Full access to server")
@ -222,7 +223,6 @@ PageType {
roleName: "isInstalled"
value: true
}
]
}
@ -231,6 +231,7 @@ PageType {
clickedFunction: function () {
serverSelector.text += ", " + selectedText
shareConnectionDrawer.headerText = qsTr("Connection to ") + serverSelector.text
shareConnectionDrawer.configContentHeaderText = qsTr("File with connection settings to ") + serverSelector.text
ContainersModel.setCurrentlyProcessedContainerIndex(proxyContainersModel.mapToSource(currentIndex))
protocolSelector.visible = false
@ -242,6 +243,7 @@ PageType {
Component.onCompleted: {
serverSelector.text += ", " + selectedText
shareConnectionDrawer.headerText = qsTr("Connection to ") + serverSelector.text
shareConnectionDrawer.configContentHeaderText = qsTr("File with connection settings to ") + serverSelector.text
ContainersModel.setCurrentlyProcessedContainerIndex(proxyContainersModel.mapToSource(currentIndex))
fillConnectionTypeModel()

View file

@ -59,11 +59,13 @@ PageType {
anchors.bottom: parent.bottom
topPadding: 8
bottomPadding: 34
bottomPadding: 8//34
leftPadding: 96
rightPadding: 96
background: Rectangle {
border.width: 1
border.color: "#2C2D30"
color: "#1C1D21"
}

View file

@ -122,7 +122,7 @@ Item {
Layout.rightMargin: 16
text: "IP, логин и пароль от сервера"
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
}
Rectangle {
@ -139,7 +139,7 @@ Item {
Layout.rightMargin: 16
text: "QR-код, ключ или файл настроек"
buttonImage: "qrc:/images/controls/chevron-right.svg"
rightImageSource: "qrc:/images/controls/chevron-right.svg"
}
Rectangle {