moved ContainersPageHomeListView and ConnectionTypeSelectionDrawer to separate components

This commit is contained in:
vladimir.kuznetsov 2023-05-22 00:10:51 +08:00
parent acca85b99a
commit 0479113949
23 changed files with 443 additions and 294 deletions

View file

@ -0,0 +1,87 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import PageEnum 1.0
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
Drawer {
id: root
edge: Qt.BottomEdge
width: parent.width
height: parent.height * 0.4375
clip: true
modal: true
background: Rectangle {
anchors.fill: parent
anchors.bottomMargin: -radius
radius: 16
color: "#1C1D21"
border.color: "#2C2D30"
border.width: 1
}
Overlay.modal: Rectangle {
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
}
ColumnLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 16
anchors.leftMargin: 16
Header2TextType {
Layout.fillWidth: true
Layout.topMargin: 24
Layout.alignment: Qt.AlignHCenter
text: "Данные для подключения"
wrapMode: Text.WordWrap
}
LabelWithButtonType {
id: ip
Layout.fillWidth: true
Layout.topMargin: 32
text: "IP, логин и пароль от сервера"
buttonImage: "qrc:/images/controls/chevron-right.svg"
onClickedFunc: function() {
PageController.goToPage(PageEnum.PageSetupWizardCredentials)
root.visible = false
}
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
LabelWithButtonType {
Layout.fillWidth: true
text: "QR-код, ключ или файл настроек"
buttonImage: "qrc:/images/controls/chevron-right.svg"
onClickedFunc: function() {
PageController.goToPage(PageEnum.PageSetupWizardConfigSource)
root.visible = false
}
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
}
}

View file

@ -0,0 +1,119 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import "../Controls2"
import "../Controls2/TextTypes"
ListView {
id: menuContent
property var rootWidth
width: rootWidth
height: menuContent.contentItem.height
clip: true
ButtonGroup {
id: containersRadioButtonGroup
}
delegate: Item {
implicitWidth: rootWidth
implicitHeight: containerRadioButton.implicitHeight
RadioButton {
id: containerRadioButton
implicitWidth: parent.width
implicitHeight: containerRadioButtonContent.implicitHeight
hoverEnabled: true
ButtonGroup.group: containersRadioButtonGroup
checked: isDefault
indicator: Rectangle {
anchors.fill: parent
color: containerRadioButton.hovered ? "#2C2D30" : "#1C1D21"
Behavior on color {
PropertyAnimation { duration: 200 }
}
}
checkable: isInstalled
RowLayout {
id: containerRadioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
z: 1
Image {
source: isInstalled ? "qrc:/images/controls/check.svg" : "qrc:/images/controls/download.svg"
visible: isInstalled ? containerRadioButton.checked : true
width: 24
height: 24
Layout.rightMargin: 8
}
Text {
id: containerRadioButtonText
text: name
color: "#D7D8DB"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
height: 24
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 20
}
}
onClicked: {
if (checked) {
isDefault = true
menuContent.currentIndex = index
containersDropDown.menuVisible = false
} else {
ContainersModel.setCurrentlyInstalledContainerIndex(proxyContainersModel.mapToSource(index))
InstallController.setShouldCreateServer(false)
PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings)
containersDropDown.menuVisible = false
menu.visible = false
}
}
MouseArea {
anchors.fill: containerRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
Component.onCompleted: {
if (isDefault) {
root.currentContainerName = name
}
}
}
}

View file

@ -24,8 +24,7 @@ Item {
property string rootButtonBorderColor: "#494B50"
property int rootButtonBorderWidth: 1
property Component menuDelegate
property variant menuModel
property Component listView
property alias menuVisible: menu.visible
@ -169,30 +168,9 @@ Item {
spacing: 16
ButtonGroup {
id: radioButtonGroup
}
ListView {
id: menuContent
width: parent.width
height: menuContent.contentItem.height
currentIndex: -1
clip: true
interactive: false
model: root.menuModel
delegate: Row {
Loader {
id: loader
sourceComponent: root.menuDelegate
property QtObject modelData: model
property var delegateIndex: index
}
}
Loader {
id: listViewLoader
sourceComponent: root.listView
}
}
}

View file

@ -6,6 +6,7 @@ import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import "./"
import "../Controls2"
@ -22,21 +23,28 @@ Item {
property string currentServerName: serversMenuContent.currentItem.delegateData.name
property string currentServerHostName: serversMenuContent.currentItem.delegateData.hostName
property string currentContainerName
ConnectButton {
anchors.centerIn: parent
}
Connections {
target: ContainersModel
function onDefaultContainerChanged() {
root.currentContainerName = ContainersModel.getDefaultContainerName()
}
}
Rectangle {
id: buttonBackground
anchors.fill: buttonContent
anchors.bottomMargin: -radius
radius: 16
color: defaultColor
border.color: borderColor
color: root.defaultColor
border.color: root.borderColor
border.width: 1
Rectangle {
@ -44,7 +52,7 @@ Item {
height: 1
y: parent.height - height - parent.radius
color: borderColor
color: root.borderColor
}
}
@ -59,7 +67,7 @@ Item {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Header1TextType {
text: currentServerName
text: root.currentServerName
}
Image {
@ -74,7 +82,7 @@ Item {
Layout.bottomMargin: 44
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: currentContainerName + " | " + currentServerHostName
text: root.currentContainerName + " | " + root.currentServerHostName
}
}
@ -104,7 +112,7 @@ Item {
radius: 16
color: "#1C1D21"
border.color: borderColor
border.color: root.borderColor
border.width: 1
}
@ -122,14 +130,14 @@ Item {
Layout.topMargin: 24
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: currentServerName
text: root.currentServerName
}
LabelTextType {
Layout.bottomMargin: 24
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: currentServerHostName
text: root.currentServerHostName
}
RowLayout {
@ -157,6 +165,7 @@ Item {
rootButtonMaximumWidth: 150 //todo make it dynamic
rootButtonDefaultColor: "#D7D8DB"
text: root.currentContainerName
textColor: "#0E0E11"
headerText: "Протокол подключения"
headerBackButtonImage: "qrc:/images/controls/arrow-left.svg"
@ -167,134 +176,11 @@ Item {
containersDropDown.menuVisible = true
}
menuModel: proxyContainersModel
listView: ContainersPageHomeListView {
rootWidth: root.width
ButtonGroup {
id: containersRadioButtonGroup
}
menuDelegate: Item {
implicitWidth: root.width
implicitHeight: containerRadioButton.implicitHeight
RadioButton {
id: containerRadioButton
implicitWidth: parent.width
implicitHeight: containerRadioButtonContent.implicitHeight
hoverEnabled: true
ButtonGroup.group: containersRadioButtonGroup
checked: {
if (modelData !== null) {
return modelData.isDefault
}
return false
}
indicator: Rectangle {
anchors.fill: parent
color: containerRadioButton.hovered ? "#2C2D30" : "#1C1D21"
Behavior on color {
PropertyAnimation { duration: 200 }
}
}
checkable: {
if (modelData !== null) {
if (modelData.isInstalled) {
return true
}
}
return false
}
RowLayout {
id: containerRadioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
z: 1
Image {
source: {
if (modelData !== null) {
if (modelData.isInstalled) {
return "qrc:/images/controls/check.svg"
}
}
return "qrc:/images/controls/download.svg"
}
visible: {
if (modelData !== null) {
if (modelData.isInstalled) {
return containerRadioButton.checked
}
}
return true
}
width: 24
height: 24
Layout.rightMargin: 8
}
Text {
id: containerRadioButtonText
text: {
if (modelData !== null) {
return modelData.name
} else
return ""
}
color: "#D7D8DB"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
height: 24
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 20
}
}
onClicked: {
if (checked) {
modelData.isDefault = true
containersDropDown.text = containerRadioButtonText.text
root.currentContainerName = containerRadioButtonText.text
containersDropDown.menuVisible = false
} else {
ContainersModel.setCurrentlyInstalledContainerIndex(proxyContainersModel.mapToSource(delegateIndex))
InstallController.setShouldCreateServer(false)
PageController.goToPage(PageEnum.PageSetupWizardProtocolSettings)
containersDropDown.menuVisible = false
menu.visible = false
}
}
MouseArea {
anchors.fill: containerRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
Component.onCompleted: {
if (modelData !== null && modelData.isDefault) {
containersDropDown.text = modelData.name
}
}
model: proxyContainersModel
currentIndex: ContainersModel.getDefaultContainer()
}
}
@ -318,9 +204,14 @@ Item {
headerText: "Серверы"
actionButtonFunction: function() {
PageController.goToPage(PageEnum.PageSetupWizardStart)
menu.visible = false
connectionTypeSelection.visible = true
}
}
ConnectionTypeSelectionDrawer {
id: connectionTypeSelection
}
}
FlickableType {
@ -416,10 +307,9 @@ Item {
onClicked: {
serversMenuContent.currentIndex = index
root.currentServerName = name
root.currentServerHostName = hostName
ServersModel.setDefaultServerIndex(index)
ContainersModel.setCurrentlyProcessedServerIndex(index)
}
MouseArea {

View file

@ -41,7 +41,7 @@ Item {
id: hostname
Layout.fillWidth: true
headerText: "Server IP adress [:port]"
headerText: "Server IP address [:port]"
}
TextFieldWithHeaderType {
@ -66,6 +66,9 @@ Item {
text: qsTr("Настроить сервер простым образом")
onClicked: function() {
InstallController.setShouldCreateServer(true)
InstallController.setCurrentlyInstalledServerCredentials(hostname.textField.text, username.textField.text, secretData.textField.text)
PageController.goToPage(PageEnum.PageSetupWizardEasy)
}
}

View file

@ -2,7 +2,11 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ContainerProps 1.0
import ProtocolProps 1.0
import "./"
import "../Controls2"
@ -11,13 +15,28 @@ import "../Config"
Item {
id: root
SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "isEasySetupContainer"
value: true
}
]
sorters: RoleSorter {
roleName: "dockerContainer"
sortOrder: Qt.DescendingOrder
}
}
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
contentHeight: content.height
ColumnLayout {
Column {
id: content
anchors.top: parent.top
@ -25,47 +44,91 @@ Item {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.leftMargin: 16
anchors.topMargin: 20
spacing: 16
HeaderType {
Layout.fillWidth: true
Layout.topMargin: 20
implicitWidth: parent.width
anchors.topMargin: 20
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Какой уровень контроля интернета в вашем регионе?"
headerText: qsTr("What is the level of Internet control in your region?")
}
CardType {
Layout.fillWidth: true
ListView {
id: containers
width: parent.width
height: containers.contentItem.height
spacing: 16
headerText: "Высокий"
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
}
currentIndex: 1
clip: true
interactive: false
model: proxyContainersModel
CardType {
Layout.fillWidth: true
property int dockerContainer
property int containerDefaultPort
property int containerDefaultTransportProto
checked: true
delegate: Item {
implicitWidth: containers.width
implicitHeight: delegateContent.implicitHeight
headerText: "Средний"
bodyText: "Некоторые иностранные сайты заблокированы, но VPN-провайдеры не блокируются"
}
ColumnLayout {
id: delegateContent
CardType {
Layout.fillWidth: true
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
headerText: "Низкий"
bodyText: "Хочу просто повысить уровень приватности"
CardType {
id: card
Layout.fillWidth: true
headerText: easySetupHeader
bodyText: easySetupDescription
ButtonGroup.group: buttonGroup
onClicked: function() {
var defaultContainerProto = ContainerProps.defaultProtocol(dockerContainer)
containers.dockerContainer = dockerContainer
containers.containerDefaultPort = ProtocolProps.defaultPort(defaultContainerProto)
containers.containerDefaultTransportProto = ProtocolProps.defaultTransportProto(defaultContainerProto)
}
}
}
Component.onCompleted: {
if (index === containers.currentIndex) {
card.checked = true
card.clicked()
}
}
}
ButtonGroup {
id: buttonGroup
}
}
BasicButtonType {
Layout.fillWidth: true
Layout.topMargin: 24
Layout.bottomMargin: 32
implicitWidth: parent.width
anchors.topMargin: 24
anchors.bottomMargin: 32
text: qsTr("Продолжить")
text: qsTr("Continue")
onClicked: function() {
PageController.goToPage(PageEnum.PageSetupWizardInstalling);
InstallController.install(containers.dockerContainer,
containers.containerDefaultPort,
containers.containerDefaultTransportProto)
}
}
}
}

View file

@ -109,7 +109,7 @@ Item {
running: false
onTriggered: {
// todo go to root installing page
PageController.goToPage(PageEnum.PageHome)
PageController.goToPage(PageEnum.PageStart)
}
}

View file

@ -157,7 +157,6 @@ Item {
onClicked: function() {
PageController.goToPage(PageEnum.PageSetupWizardInstalling);
InstallController.install(dockerContainer, port.textFieldText, transportProtoButtonGroup.currentIndex)
}
}

View file

@ -19,9 +19,14 @@ Item {
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "service_type_role"
roleName: "serviceType"
value: ProtocolEnum.Vpn
},
ValueFilter {
roleName: "isSupported"
value: true
}
]
}
@ -77,8 +82,8 @@ Item {
Layout.topMargin: 16
Layout.bottomMargin: 16
text: name_role
descriptionText: desc_role
text: name
descriptionText: description
buttonImage: "qrc:/images/controls/chevron-right.svg"
onClickedFunc: function() {

View file

@ -8,6 +8,7 @@ import "./"
import "../Controls2"
import "../Config"
import "../Controls2/TextTypes"
import "../Components"
Item {
id: root
@ -55,7 +56,7 @@ Item {
text: qsTr("У меня есть данные для подключения")
onClicked: {
drawer.visible = true
connectionTypeSelection.visible = true
}
}
@ -80,82 +81,8 @@ Item {
}
}
Drawer {
id: drawer
edge: Qt.BottomEdge
width: parent.width
height: parent.height * 0.4375
clip: true
modal: true
background: Rectangle {
anchors.fill: parent
anchors.bottomMargin: -radius
radius: 16
color: "#1C1D21"
border.color: "#2C2D30"
border.width: 1
}
Overlay.modal: Rectangle {
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
}
ColumnLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 16
anchors.leftMargin: 16
Header2TextType {
Layout.fillWidth: true
Layout.topMargin: 24
Layout.alignment: Qt.AlignHCenter
text: "Данные для подключения"
wrapMode: Text.WordWrap
}
LabelWithButtonType {
id: ip
Layout.fillWidth: true
Layout.topMargin: 32
text: "IP, логин и пароль от сервера"
buttonImage: "qrc:/images/controls/chevron-right.svg"
onClickedFunc: function() {
PageController.goToPage(PageEnum.PageSetupWizardCredentials)
drawer.visible = false
}
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
LabelWithButtonType {
Layout.fillWidth: true
text: "QR-код, ключ или файл настроек"
buttonImage: "qrc:/images/controls/chevron-right.svg"
onClickedFunc: function() {
PageController.goToPage(PageEnum.PageSetupWizardConfigSource)
drawer.visible = false
}
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
}
ConnectionTypeSelectionDrawer {
id: connectionTypeSelection
}
}
}