AZEN-SGG/amnezia-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added page transition effects

Browse source 
- added functionality for buttons on PageSettingsServerData page
This commit is contained in:
vladimir.kuznetsov 2023-06-01 11:25:33 +08:00
parent 1e180489a4
commit de0cd976de
38 changed files with 656 additions and 335 deletions
Download patch file Download diff file Expand all files Collapse all files

121
client/ui/qml/Pages2/PageHome.qml
View file

@ -37,6 +37,17 @@ PageType {
}
}
Connections {
target: PageController
function onRestorePageHomeState(isContainerInstalled) {
menu.visible = true
if (isContainerInstalled) {
containersDropDown.menuVisible = true
}
}
}
Rectangle {
id: buttonBackground
anchors.fill: buttonContent
@ -96,16 +107,12 @@ PageType {
}
}
Drawer {
DrawerType {
id: menu
edge: Qt.BottomEdge
width: parent.width
height: parent.height * 0.90
clip: true
modal: true
background: Rectangle {
anchors.fill: parent
anchors.bottomMargin: -radius
@ -180,7 +187,7 @@ PageType {
containersDropDown.menuVisible = true
}
listView: ContainersPageHomeListView {
listView: HomeContainersListView {
rootWidth: root.width
model: proxyContainersModel
@ -251,81 +258,63 @@ PageType {
property variant delegateData: model
implicitWidth: serversMenuContent.width
implicitHeight: serverRadioButton.implicitHeight
implicitHeight: serverRadioButtonContent.implicitHeight
RadioButton {
id: serverRadioButton
ColumnLayout {
id: serverRadioButtonContent
anchors.fill: parent
implicitWidth: parent.width
implicitHeight: serverRadioButtonContent.implicitHeight
anchors.rightMargin: 16
anchors.leftMargin: 16
hoverEnabled: true
checked: index === serversMenuContent.currentIndex
ButtonGroup.group: serversRadioButtonGroup
indicator: Rectangle {
anchors.fill: parent
color: serverRadioButton.hovered ? "#2C2D30" : "#1C1D21"
Behavior on color {
PropertyAnimation { duration: 200 }
}
}
spacing: 0
RowLayout {
id: serverRadioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
z: 1
Image {
source: "qrc:/images/controls/check.svg"
visible: serverRadioButton.checked
width: 24
height: 24
Layout.rightMargin: 8
}
Text {
id: serverRadioButtonText
text: name
color: "#D7D8DB"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
height: 24
VerticalRadioButton {
id: serverRadioButton
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 20
text: name
descriptionText: "description"
checked: index === serversMenuContent.currentIndex
ButtonGroup.group: serversRadioButtonGroup
onClicked: {
serversMenuContent.currentIndex = index
isDefault = true
ContainersModel.setCurrentlyProcessedServerIndex(index)
}
MouseArea {
anchors.fill: serverRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
ImageButtonType {
image: "qrc:/images/controls/settings.svg"
// onClicked:
implicitWidth: 56
implicitHeight: 56
z: 1
onClicked: function() {
ServersModel.setCurrentlyProcessedServerIndex(index)
ContainersModel.setCurrentlyProcessedServerIndex(index)
goToPage(PageEnum.PageSettingsServerInfo)
menu.visible = false
}
}
}
onClicked: {
serversMenuContent.currentIndex = index
ServersModel.setDefaultServerIndex(index)
ContainersModel.setCurrentlyProcessedServerIndex(index)
}
MouseArea {
anchors.fill: serverRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
DividerType {
Layout.fillWidth: true
}
}
}

169
client/ui/qml/Pages2/PageSettings.qml
View file

@ -1,142 +1,109 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import QtQuick.Dialogs
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import ProtocolProps 1.0
import "./"
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
import "../Components"
PageType {
id: root
SortFilterProxyModel {
id: proxyServersModel
sourceModel: ServersModel
filters: [
ValueFilter {
roleName: "isCurrentlyProcessed"
value: true
}
]
}
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
contentHeight: content.height
ColumnLayout {
id: content
anchors.fill: parent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
spacing: 16
HeaderType {
Layout.fillWidth: true
Layout.topMargin: 20
Layout.rightMargin: 16
Layout.leftMargin: 16
Repeater {
id: header
model: proxyServersModel
headerText: qsTr("Settings")
}
delegate: HeaderType {
Layout.fillWidth: true
Layout.topMargin: 20
Layout.leftMargin: 16
Layout.rightMargin: 16
LabelWithButtonType {
Layout.fillWidth: true
Layout.topMargin: 16
actionButtonImage: "qrc:/images/controls/edit-3.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
text: qsTr("Servers")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/server.svg"
headerText: name
descriptionText: hostName
actionButtonFunction: function() {
connectionTypeSelection.visible = true
}
backButtonFunction: function() {
closePage()
}
clickedFunction: function() {
goToPage(PageEnum.PageSettingsServersList)
}
}
TabBar {
id: tabBar
DividerType {}
LabelWithButtonType {
Layout.fillWidth: true
background: Rectangle {
color: "transparent"
}
text: qsTr("Connection")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/radio.svg"
TabButtonType {
isSelected: tabBar.currentIndex === 0
text: qsTr("Protocols")
}
TabButtonType {
isSelected: tabBar.currentIndex === 1
text: qsTr("Services")
}
TabButtonType {
isSelected: tabBar.currentIndex === 2
text: qsTr("Data")
clickedFunction: function() {
}
}
StackLayout {
id: stackLayout
currentIndex: tabBar.currentIndex
DividerType {}
LabelWithButtonType {
Layout.fillWidth: true
height: root.height
StackView {
id: protocolsStackView
initialItem: PageSettingsContainersListView {
model: SortFilterProxyModel {
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "serviceType"
value: ProtocolEnum.Vpn
},
ValueFilter {
roleName: "isSupported"
value: true
}
]
}
}
}
text: qsTr("Application")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/app.svg"
StackView {
id: servicesStackView
initialItem: PageSettingsContainersListView {
model: SortFilterProxyModel {
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "serviceType"
value: ProtocolEnum.Other
},
ValueFilter {
roleName: "isSupported"
value: true
}
]
}
}
}
StackView {
id: dataStackView
initialItem: PageSettingsData {
}
clickedFunction: function() {
goToPage(PageEnum.PageSetupWizardTextKey)
}
}
DividerType {}
LabelWithButtonType {
Layout.fillWidth: true
text: qsTr("Backup")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/save.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSetupWizardTextKey)
}
}
DividerType {}
LabelWithButtonType {
Layout.fillWidth: true
text: qsTr("About AmneziaVPN")
buttonImage: "qrc:/images/controls/chevron-right.svg"
iconImage: "qrc:/images/controls/amnezia.svg"
clickedFunction: function() {
goToPage(PageEnum.PageSetupWizardTextKey)
}
}
DividerType {}
}
// }
}
}

13
client/ui/qml/Pages2/PageSettingsData.qml → client/ui/qml/Pages2/PageSettingsServerData.qml
View file

@ -33,6 +33,7 @@ PageType {
descriptionText: "May be needed when changing other settings"
clickedFunction: function() {
ContainersModel.clearCachedProfiles()
}
}
@ -45,6 +46,15 @@ PageType {
textColor: "#EB5757"
clickedFunction: function() {
if (ServersModel.isDefaultServerCurrentlyProcessed && ConnectionController.isConnected()) {
ConnectionController.closeVpnConnection()
}
ServersModel.removeServer()
if (!ServersModel.getServersCount()) {
PageController.replaceStartPage()
} else {
goToStartPage()
}
}
}
@ -57,6 +67,9 @@ PageType {
textColor: "#EB5757"
clickedFunction: function() {
if (ServersModel.isDefaultServerCurrentlyProcessed && ConnectionController.isConnected()) {
ConnectionController.closeVpnConnection()
}
ContainersModel.removeAllContainers()
}
}

134
client/ui/qml/Pages2/PageSettingsServerInfo.qml Normal file
View file

@ -0,0 +1,134 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import ProtocolProps 1.0
import "./"
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
import "../Components"
PageType {
id: root
SortFilterProxyModel {
id: proxyServersModel
sourceModel: ServersModel
filters: [
ValueFilter {
roleName: "isCurrentlyProcessed"
value: true
}
]
}
ColumnLayout {
id: content
anchors.fill: parent
spacing: 16
Repeater {
id: header
model: proxyServersModel
delegate: HeaderType {
Layout.fillWidth: true
Layout.topMargin: 20
Layout.leftMargin: 16
Layout.rightMargin: 16
actionButtonImage: "qrc:/images/controls/edit-3.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: name
descriptionText: hostName
actionButtonFunction: function() {
connectionTypeSelection.visible = true
}
backButtonFunction: function() {
closePage()
}
}
}
TabBar {
id: tabBar
Layout.fillWidth: true
background: Rectangle {
color: "transparent"
}
TabButtonType {
isSelected: tabBar.currentIndex === 0
text: qsTr("Protocols")
// onClicked: {
// tabBarStackView.goToTabBarPage(PageEnum.PageSettingsServerProtocols)
// }
}
TabButtonType {
isSelected: tabBar.currentIndex === 1
text: qsTr("Services")
// onClicked: {
// tabBarStackView.goToTabBarPage(PageEnum.PageSettingsServerServices)
// }
}
TabButtonType {
isSelected: tabBar.currentIndex === 2
text: qsTr("Data")
// onClicked: {
// tabBarStackView.goToTabBarPage(PageEnum.PageSettingsServerData)
// }
}
}
StackLayout {
Layout.preferredWidth: root.width
Layout.preferredHeight: root.height - tabBar.implicitHeight - header.implicitHeight
currentIndex: tabBar.currentIndex
PageSettingsServerProtocols {
stackView: root.stackView
}
PageSettingsServerServices {
stackView: root.stackView
}
PageSettingsServerData {
stackView: root.stackView
}
}
// StackViewType {
// id: tabBarStackView
// Layout.preferredWidth: root.width
// Layout.preferredHeight: root.height - tabBar.implicitHeight - header.implicitHeight
// function goToTabBarPage(page) {
// var pagePath = PageController.getPagePath(page)
// while (tabBarStackView.depth > 1) {
// tabBarStackView.pop()
// }
// tabBarStackView.replace(pagePath, { "objectName" : pagePath })
// }
// Component.onCompleted: {
// var pagePath = PageController.getPagePath(PageEnum.PageSettingsServerProtocols)
// tabBarStackView.push(pagePath, { "objectName" : pagePath })
// }
// }
}
}

38
client/ui/qml/Pages2/PageSettingsServerProtocols.qml Normal file
View file

@ -0,0 +1,38 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import "./"
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
import "../Components"
PageType {
id: root
SortFilterProxyModel {
id: containersProxyModel
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "serviceType"
value: ProtocolEnum.Vpn
},
ValueFilter {
roleName: "isSupported"
value: true
}
]
}
SettingsContainersListView {
model: containersProxyModel
}
}

38
client/ui/qml/Pages2/PageSettingsServerServices.qml Normal file
View file

@ -0,0 +1,38 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import "./"
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
import "../Components"
PageType {
id: root
SortFilterProxyModel {
id: containersProxyModel
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "serviceType"
value: ProtocolEnum.Other
},
ValueFilter {
roleName: "isSupported"
value: true
}
]
}
SettingsContainersListView {
model: containersProxyModel
}
}

7
client/ui/qml/Pages2/PageSettingsServersList.qml
View file

@ -36,10 +36,6 @@ PageType {
actionButtonFunction: function() {
connectionTypeSelection.visible = true
}
backButtonFunction: function() {
PageController.goToPageHome()
}
}
ConnectionTypeSelectionDrawer {
@ -87,7 +83,8 @@ PageType {
clickedFunction: function() {
ServersModel.setCurrentlyProcessedServerIndex(index)
goToPage(PageEnum.PageSettings)
ContainersModel.setCurrentlyProcessedServerIndex(index)
goToPage(PageEnum.PageSettingsServerInfo)
}
}

16
client/ui/qml/Pages2/PageSetupWizardInstalling.qml
View file

@ -26,10 +26,26 @@ PageType {
function onInstallContainerFinished() {
goToStartPage()
if (stackView.currentItem.objectName === PageController.getPagePath(PageEnum.PageHome)) {
PageController.restorePageHomeState(true)
} else if (stackView.currentItem.objectName === PageController.getPagePath(PageEnum.PageSettings)) {
goToPage(PageEnum.PageSettingsServersList, false)
goToPage(PageEnum.PageSettingsServerInfo, false)
} else {
goToPage(PageEnum.PageHome)
}
}
function onInstallServerFinished() {
goToStartPage()
if (stackView.currentItem.objectName === PageController.getPagePath(PageEnum.PageHome)) {
PageController.restorePageHomeState()
} else if (stackView.currentItem.objectName === PageController.getPagePath(PageEnum.PageSettings)) {
goToPage(PageEnum.PageSettingsServersList, false)
} else {
var pagePath = PageController.getPagePath(PageEnum.PageStart)
stackView.replace(pagePath, { "objectName" : pagePath })
}
}
}

10
client/ui/qml/Pages2/PageSetupWizardStart.qml
View file

@ -22,16 +22,6 @@ PageType {
}
}
Connections {
target: InstallController
function onInstallServerFinished() {
//todo add smt like changeStartPage
goToStartPage()
goToPage(PageEnum.PageStart)
}
}
FlickableType {
id: fl
anchors.top: root.top

31
client/ui/qml/Pages2/PageStart.qml
View file

@ -17,6 +17,7 @@ PageType {
function onGoToPageHome() {
tabBar.currentIndex = 0
tabBarStackView.goToTabBarPage(PageController.getPagePath(PageEnum.PageHome))
}
function onShowErrorMessage(errorMessage) {
@ -25,9 +26,8 @@ PageType {
}
}
StackLayout {
id: stackLayout
currentIndex: tabBar.currentIndex
StackViewType {
id: tabBarStackView
anchors.top: parent.top
anchors.right: parent.right
@ -37,20 +37,15 @@ PageType {
width: parent.width
height: root.height - tabBar.implicitHeight
StackView {
initialItem: PageHome {
id: pageHome
}
function goToTabBarPage(page) {
var pagePath = PageController.getPagePath(page)
tabBarStackView.clear(StackView.PopTransition)
tabBarStackView.replace(pagePath, { "objectName" : pagePath })
}
Item {
}
StackView {
initialItem: PageSettingsServersList {
id: pageSettingsServersList
}
Component.onCompleted: {
var pagePath = PageController.getPagePath(PageEnum.PageHome)
tabBarStackView.push(pagePath, { "objectName" : pagePath })
}
}
@ -70,12 +65,12 @@ PageType {
color: "#1C1D21"
}
TabImageButtonType {
isSelected: tabBar.currentIndex === 0
image: "qrc:/images/controls/home.svg"
onClicked: {
pageSettingsServersList.goToStartPage()
tabBarStackView.goToTabBarPage(PageEnum.PageHome)
ContainersModel.setCurrentlyProcessedServerIndex(ServersModel.getDefaultServerIndex())
}
}
TabImageButtonType {
@ -86,7 +81,7 @@ PageType {
isSelected: tabBar.currentIndex === 2
image: "qrc:/images/controls/settings-2.svg"
onClicked: {
pageHome.goToStartPage()
tabBarStackView.goToTabBarPage(PageEnum.PageSettings)
}
}
}