added display of protocols on PageHome

This commit is contained in:
Vladimir Kuznetsov 2023-05-11 14:50:50 +08:00
parent 1c8dbae359
commit b66f4bf2be
22 changed files with 237 additions and 138 deletions

View file

@ -48,7 +48,7 @@ Button {
contentItem: Text {
anchors.fill: background
font.family: "PT Root UI"
font.family: "PT Root UI VF"
font.styleName: "normal"
font.weight: 400
font.pixelSize: 16

View file

@ -10,6 +10,9 @@ Item {
property string text
property string descriptionText
property string headerText
property string headerBackButtonImage
property var onClickedFunc
property string buttonImage: "qrc:/images/controls/chevron-down.svg"
property string buttonImageColor: "#494B50"
@ -22,7 +25,10 @@ Item {
property string borderColor: "#494B50"
property int borderWidth: 1
property alias menuModel: menuContent.model
property Component menuDelegate
property variant menuModel
property alias menuVisible: menu.visible
implicitWidth: buttonContent.implicitWidth
implicitHeight: buttonContent.implicitHeight
@ -128,12 +134,13 @@ Item {
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
}
Header2TextType {
Header2Type {
id: header
width: parent.width
text: "Данные для подключения"
wrapMode: Text.WordWrap
headerText: root.headerText
backButtonImage: root.headerBackButtonImage
width: parent.width
anchors.top: parent.top
anchors.left: parent.left
@ -170,64 +177,13 @@ Item {
clip: true
interactive: false
delegate: Item {
implicitWidth: menuContent.width
implicitHeight: radioButton.implicitHeight
model: root.menuModel
RadioButton {
id: radioButton
implicitWidth: parent.width
implicitHeight: radioButtonContent.implicitHeight
hoverEnabled: true
ButtonGroup.group: radioButtonGroup
indicator: Rectangle {
anchors.fill: parent
color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
}
RowLayout {
id: radioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
z: 1
Text {
id: text
text: modelData
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
}
Image {
source: "qrc:/images/controls/check.svg"
visible: radioButton.checked
width: 24
height: 24
Layout.rightMargin: 8
}
}
onClicked: {
root.text = modelData
menu.visible = false
}
delegate: Row {
Loader {
id: loader
sourceComponent: root.menuDelegate
property QtObject modelData: model
}
}
}

View file

@ -6,7 +6,12 @@ import "TextTypes"
Item {
id: root
property string buttonImage
property string backButtonImage
property string actionButtonImage
property var backButtonFunction
property var actionButtonFunction
property string headerText
property string descriptionText
@ -22,22 +27,41 @@ Item {
Layout.leftMargin: -6
image: root.buttonImage
image: root.backButtonImage
imageColor: "#D7D8DB"
visible: image ? true : false
onClicked: {
UiLogic.closePage()
if (backButtonFunction && typeof backButtonFunction === "function") {
backButtonFunction()
}
}
}
Header2TextType {
id: header
RowLayout {
Header2TextType {
id: header
Layout.fillWidth: true
Layout.fillWidth: true
text: root.headerText
text: root.headerText
}
ImageButtonType {
id: headerActionButton
image: root.actionButtonImage
imageColor: "#D7D8DB"
visible: image ? true : false
onClicked: {
if (actionButtonImage && typeof actionButtonImage === "function") {
actionButtonImage()
}
}
}
}
ParagraphTextType {

View file

@ -6,7 +6,12 @@ import "TextTypes"
Item {
id: root
property string buttonImage
property string backButtonImage
property string actionButtonImage
property var backButtonFunction
property var actionButtonFunction
property string headerText
property string descriptionText
@ -22,22 +27,43 @@ Item {
Layout.leftMargin: -6
image: root.buttonImage
image: root.backButtonImage
imageColor: "#D7D8DB"
visible: image ? true : false
onClicked: {
UiLogic.closePage()
if (backButtonFunction && typeof backButtonFunction === "function") {
backButtonFunction()
}
}
}
Header1TextType {
id: header
RowLayout {
Header1TextType {
id: header
Layout.fillWidth: true
Layout.fillWidth: true
text: root.headerText
text: root.headerText
}
ImageButtonType {
id: headerActionButton
Layout.alignment: Qt.AlignRight
image: root.actionButtonImage
imageColor: "#D7D8DB"
visible: image ? true : false
onClicked: {
if (actionButtonImage && typeof actionButtonImage === "function") {
actionButtonImage()
}
}
}
}
ParagraphTextType {
@ -49,6 +75,8 @@ Item {
text: root.descriptionText
color: "#878B91"
visible: root.descriptionText !== ""
}
}
}

View file

@ -29,7 +29,7 @@ Item {
ColumnLayout {
Text {
font.family: "PT Root UI"
font.family: "PT Root UI VF"
font.styleName: "normal"
font.pixelSize: 18
color: "#d7d8db"
@ -44,7 +44,7 @@ Item {
}
Text {
font.family: "PT Root UI"
font.family: "PT Root UI VF"
font.styleName: "normal"
font.pixelSize: 13
font.letterSpacing: 0.02

View file

@ -43,7 +43,7 @@ TabButton {
anchors.fill: background
height: 24
font.family: "PT Root UI"
font.family: "PT Root UI VF"
font.styleName: "normal"
font.weight: 500
font.pixelSize: 16

View file

@ -136,7 +136,7 @@ RadioButton {
}
Text {
font.family: "PT Root UI"
font.family: "PT Root UI VF"
font.styleName: "normal"
font.pixelSize: 13
font.letterSpacing: 0.02

View file

@ -2,7 +2,10 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import "./"
import "../Pages"
@ -125,11 +128,27 @@ PageBase {
}
RowLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
spacing: 8
SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
filters: [
ValueFilter {
roleName: "service_type_role"
value: ProtocolEnum.Vpn
},
ValueFilter {
roleName: "is_installed_role"
value: true
}
]
}
DropDownType {
id: protocolsDropDown
implicitHeight: 40
borderWidth: 0
@ -138,7 +157,83 @@ PageBase {
defaultColor: "#D7D8DB"
textColor: "#0E0E11"
text: "testtesttest"
headerText: "Протокол подключения"
headerBackButtonImage: "qrc:/images/controls/arrow-left.svg"
menuModel: proxyContainersModel
menuDelegate: Item {
implicitWidth: menuContent.width
implicitHeight: radioButton.implicitHeight
RadioButton {
id: radioButton
implicitWidth: parent.width
implicitHeight: radioButtonContent.implicitHeight
hoverEnabled: true
ButtonGroup.group: radioButtonGroup
indicator: Rectangle {
anchors.fill: parent
color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
}
RowLayout {
id: radioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
z: 1
Text {
id: text
// todo remove dirty hack?
text: {
if (modelData !== null) {
return modelData.name_role
} 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
}
Image {
source: "qrc:/images/controls/check.svg"
visible: radioButton.checked
width: 24
height: 24
Layout.rightMargin: 8
}
}
onClicked: {
protocolsDropDown.text = text.text
protocolsDropDown.menuVisible = false
}
}
Component.onCompleted: {
if (modelData !== null && modelData.default_role) {
protocolsDropDown.text = modelData.name_role
}
}
}
}
BasicButtonType {
@ -149,29 +244,17 @@ PageBase {
}
Header2Type {
Layout.fillWidth: true
Layout.topMargin: 48
Layout.leftMargin: 16
Layout.rightMargin: 16
actionButtonImage: "qrc:/images/controls/plus.svg"
headerText: "Серверы"
}
}
// Header2TextType {
// id: menuHeader
// width: parent.width
// text: "Данные для подключения"
// wrapMode: Text.WordWrap
// anchors.top: parent.top
// anchors.left: parent.left
// anchors.right: parent.right
// anchors.topMargin: 16
// anchors.leftMargin: 16
// anchors.rightMargin: 16
// }
FlickableType {
anchors.top: menuHeader.bottom
anchors.topMargin: 16
@ -257,6 +340,13 @@ PageBase {
Layout.rightMargin: 8
}
}
onClicked: {
console.log(index)
ContainersModel.setSelectedServerIndex(index)
root.currentServerName = desc
root.currentServerDescription = address
}
}
}
}

View file

@ -36,7 +36,7 @@ PageBase {
Layout.fillWidth: true
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Подключение к серверу"
descriptionText: "Не используйте код подключения из публичных источников. Его могли создать, чтобы перехватывать ваши данные.\n

View file

@ -34,7 +34,7 @@ PageBase {
Layout.fillWidth: true
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Подключение к серверу"
}

View file

@ -34,7 +34,7 @@ PageBase {
Layout.fillWidth: true
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Какой уровень контроля интернета в вашем регионе?"
}

View file

@ -36,7 +36,7 @@ PageBase {
Layout.topMargin: 20
//TODO remove later
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Установка"
descriptionText: ContainersModel.getCurrentlyInstalledContainerName()

View file

@ -35,7 +35,7 @@ PageBase {
Layout.fillWidth: true
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Установка " + ContainersModel.getCurrentlyInstalledContainerName()
descriptionText: "Эти настройки можно будет изменить позже"

View file

@ -51,7 +51,7 @@ PageBase {
HeaderType {
width: parent.width
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Протокол подключения"
descriptionText: "Выберите более приоритетный для вас. Позже можно будет установить остальные протоколы и доп сервисы, вроде DNS-прокси и SFTP."

View file

@ -35,7 +35,7 @@ PageBase {
Layout.fillWidth: true
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Ключ для подключения"
descriptionText: "Строка, которая начинается с vpn://..."

View file

@ -29,7 +29,7 @@ PageBase {
Layout.bottomMargin: 32
Layout.fillWidth: true
buttonImage: "qrc:/images/controls/arrow-left.svg"
backButtonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Server 1"
descriptionText: "root 192.168.111.111"
}