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

added PageSetupWizardCredentials and PageSetupWizardProtocols

Browse source 
- fixed hover and pressed effects for controls
This commit is contained in:
vladimir.kuznetsov 2023-04-14 19:31:10 +03:00
parent 905a3a30f3
commit 3d63d6c0f2
12 changed files with 314 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/resources.qrc
View file

@ -185,8 +185,10 @@
<file>ui/qml/Controls2/BodyTextType.qml</file>
<file>ui/qml/Controls2/FlickableType.qml</file>
<file>ui/qml/Controls2/Header2TextType.qml</file>
<file>ui/qml/Pages2/PageCredentials.qml</file>
<file>ui/qml/Pages2/PageSetupWizardCredentials.qml</file>
<file>ui/qml/Controls2/HeaderTextType.qml</file>
<file>images/controls/arrow-left.svg</file>
<file>ui/qml/Pages2/PageSetupWizardProtocols.qml</file>
<file>ui/qml/Pages2/PageSetupWizardEasy.qml</file>
</qresource>
</RCC>

4
client/ui/pages.h
View file

@ -24,7 +24,9 @@ enum class Page {Start = 0, NewServer, NewServerProtocols, Vpn,
Wizard, WizardLow, WizardMedium, WizardHigh, WizardVpnMode, ServerConfiguringProgress,
GeneralSettings, AppSettings, NetworkSettings, ServerSettings,
ServerContainers, ServersList, ShareConnection, Sites,
ProtocolSettings, ProtocolShare, QrDecoder, QrDecoderIos, About, ViewConfig, AdvancedServerSettings, Test, Credentials};
ProtocolSettings, ProtocolShare, QrDecoder, QrDecoderIos, About, ViewConfig, AdvancedServerSettings,
Test, WizardCredentials, WizardProtocols, WizardEasySetup};
Q_ENUM_NS(Page)
static void declareQmlPageEnum() {

38
client/ui/qml/Controls2/CardType.qml
View file

@ -9,16 +9,17 @@ RadioButton {
property string bodyText
property string footerText
property string hoveredColor: Qt.rgba(255, 255, 255, 0.05)
property string defaultColor: Qt.rgba(255, 255, 255, 0)
property string disabledColor: Qt.rgba(255, 255, 255, 0)
property string pressedColor: Qt.rgba(255, 255, 255, 0.05)
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
property string defaultColor: Qt.rgba(1, 1, 1, 0)
property string disabledColor: Qt.rgba(1, 1, 1, 0)
property string pressedColor: Qt.rgba(1, 1, 1, 0.05)
property string selectedColor: Qt.rgba(1, 1, 1, 0)
property string textColor: "#0E0E11"
property string pressedBorderColor: Qt.rgba(251, 178, 106, 0.3)
property string hoveredBorderColor: "transparent"
property string defaultBodredColor: "#FBB26A"
property string pressedBorderColor: Qt.rgba(251/255, 178/255, 106/255, 0.3)
property string selectedBorderColor: "#FBB26A"
property string defaultBodredColor: "transparent"
property int borderWidth: 0
implicitWidth: content.implicitWidth
@ -32,30 +33,34 @@ RadioButton {
color: {
if (root.enabled) {
if(root.checked) {
return pressedColor
if (root.hovered) {
return hoveredColor
} else if (root.checked) {
return selectedColor
}
return hovered ? hoveredColor : defaultColor
return defaultColor
} else {
return disabledColor
}
}
border.color: {
if (root.enabled) {
if(root.checked) {
if (root.pressed) {
return pressedBorderColor
} else if (root.checked) {
return selectedBorderColor
}
return hovered ? hoveredBorderColor : defaultBodredColor
} else {
return defaultBodredColor
}
return defaultBodredColor
}
border.width: {
if (root.enabled) {
if(root.checked) {
return 1
}
return hovered ? 0 : 1
return root.pressed ? 1 : 0
} else {
return 0
}
@ -64,6 +69,9 @@ RadioButton {
Behavior on color {
PropertyAnimation { duration: 200 }
}
Behavior on border.color {
PropertyAnimation { duration: 200 }
}
}
ColumnLayout {

4
client/ui/qml/Controls2/CheckBoxType.qml
View file

@ -6,9 +6,9 @@ import Qt5Compat.GraphicalEffects
Item {
id: root
property string hoveredColor: Qt.rgba(255, 255, 255, 0.05)
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
property string defaultColor: "transparent"
property string pressedColor: Qt.rgba(255, 255, 255, 0.05)
property string pressedColor: Qt.rgba(1, 1, 1, 0.05)
property string defaultBorderColor: "#D7D8DB"
property string checkedBorderColor: "#FBB26A"

66
client/ui/qml/Controls2/HeaderTextType.qml
View file

@ -1,40 +1,64 @@
import QtQuick
import QtQuick.Layouts
ColumnLayout {
Item {
id: root
property string buttonImage
property string headerText
property var wrapMode
property string descriptionText
ImageButtonType {
id: button
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
Layout.leftMargin: -6
ColumnLayout {
id: content
anchors.fill: parent
hoverEnabled: false
image: root.buttonImage
onClicked: {
if (onClickedFunc && typeof onClickedFunc === "function") {
onClickedFunc()
ImageButtonType {
id: backButton
Layout.leftMargin: -6
image: root.buttonImage
imageColor: "#D7D8DB"
onClicked: {
UiLogic.closePage()
}
}
}
Text {
id: header
Text {
id: header
text: root.headerText
text: root.headerText
color: "#D7D8DB"
font.pixelSize: 36
font.weight: 700
font.family: "PT Root UI VF"
font.letterSpacing: -0.03
color: "#D7D8DB"
font.pixelSize: 36
font.weight: 700
font.family: "PT Root UI VF"
font.letterSpacing: -0.03
wrapMode: Text.WordWrap
wrapMode: Text.WordWrap
height: 38
height: 38
Layout.fillWidth: true
}
Text {
id: description
text: root.descriptionText
color: "#878B91"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
font.letterSpacing: -0.03
wrapMode: Text.WordWrap
height: 24
Layout.fillWidth: true
}
}
}

4
client/ui/qml/Controls2/ImageButtonType.qml
View file

@ -7,9 +7,9 @@ Button {
property string image
property string hoveredColor: Qt.rgba(255, 255, 255, 0.08)
property string hoveredColor: Qt.rgba(1, 1, 1, 0.08)
property string defaultColor: "transparent"
property string pressedColor: Qt.rgba(255, 255, 255, 0.12)
property string pressedColor: Qt.rgba(1, 1, 1, 0.12)
property string imageColor: "#878B91"

44
client/ui/qml/Controls2/LabelWithButtonType.qml
View file

@ -6,24 +6,48 @@ Item {
id: root
property string text
property string descriptionText
property var onClickedFunc
property alias buttonImage : button.image
implicitWidth: 360
implicitHeight: 72
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
RowLayout {
id: content
anchors.fill: parent
Text {
font.family: "PT Root UI"
font.styleName: "normal"
font.pixelSize: 18
color: "#d7d8db"
text: root.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
ColumnLayout {
Text {
font.family: "PT Root UI"
font.styleName: "normal"
font.pixelSize: 18
color: "#d7d8db"
text: root.text
Layout.fillWidth: true
height: 22
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
Text {
font.family: "PT Root UI"
font.styleName: "normal"
font.pixelSize: 13
font.letterSpacing: 0.02
color: "#878B91"
text: root.descriptionText
wrapMode: Text.WordWrap
Layout.fillWidth: true
height: 16
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
ImageButtonType {

8
client/ui/qml/Controls2/TextFieldWithHeaderType.qml
View file

@ -18,8 +18,12 @@ Item {
anchors.fill: parent
color: "#1c1d21"
radius: 16
border.color: "#d7d8db"
border.width: textField.focus ? 1 : 0
border.color: textField.focus ? "#d7d8db" : "#2C2D30"
border.width: 1
Behavior on border.color {
PropertyAnimation { duration: 200 }
}
}
ColumnLayout {

24
client/ui/qml/Pages2/PageCredentials.qml → client/ui/qml/Pages2/PageSetupWizardCredentials.qml
View file

@ -11,7 +11,7 @@ import "../Config"
PageBase {
id: root
page: PageEnum.Credentials
page: PageEnum.WizardCredentials
FlickableType {
id: fl
@ -32,15 +32,11 @@ PageBase {
HeaderTextType {
Layout.fillWidth: true
Layout.bottomMargin: 16
Layout.topMargin: 66
Layout.preferredWidth: 328
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Подключение к серверу"
wrapMode: Text.WordWrap
}
TextFieldWithHeaderType {
@ -60,23 +56,31 @@ PageBase {
BasicButtonType {
Layout.fillWidth: true
Layout.topMargin: 40
Layout.topMargin: 24
text: qsTr("Настроить сервер простым образом")
onClicked: function() {
UiLogic.goToPage(PageEnum.WizardEasySetup)
}
}
BasicButtonType {
Layout.fillWidth: true
Layout.topMargin: 8
Layout.topMargin: -8
defaultColor: "transparent"
hoveredColor: Qt.rgba(255, 255, 255, 0.08)
pressedColor: Qt.rgba(255, 255, 255, 0.12)
hoveredColor: Qt.rgba(1, 1, 1, 0.08)
pressedColor: Qt.rgba(1, 1, 1, 0.12)
disabledColor: "#878B91"
textColor: "#D7D8DB"
borderWidth: 1
text: qsTr("Выбрать протокол для установки")
onClicked: function() {
UiLogic.goToPage(PageEnum.WizardProtocols)
}
}
}
}

74
client/ui/qml/Pages2/PageSetupWizardEasy.qml Normal file
View file

@ -0,0 +1,74 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import PageEnum 1.0
import "./"
import "../Pages"
import "../Controls2"
import "../Config"
PageBase {
id: root
page: PageEnum.WizardEasySetup
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
contentHeight: content.height
ColumnLayout {
id: content
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 16
anchors.leftMargin: 16
spacing: 16
HeaderTextType {
Layout.fillWidth: true
Layout.topMargin: 20
buttonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Какой уровень контроля интернета в вашем регионе?"
}
CardType {
Layout.fillWidth: true
headerText: "Высокий"
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
}
CardType {
Layout.fillWidth: true
checked: true
headerText: "Средний"
bodyText: "Некоторые иностранные сайты заблокированы, но VPN-провайдеры не блокируются"
}
CardType {
Layout.fillWidth: true
headerText: "Низкий"
bodyText: "Хочу просто повысить уровень приватности"
}
BasicButtonType {
Layout.fillWidth: true
Layout.topMargin: 24
Layout.bottomMargin: 32
text: qsTr("Продолжить")
}
}
}
}

102
client/ui/qml/Pages2/PageSetupWizardProtocols.qml Normal file
View file

@ -0,0 +1,102 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import "./"
import "../Pages"
import "../Controls2"
import "../Config"
PageBase {
id: root
page: PageEnum.WizardProtocols
SortFilterProxyModel {
id: containersModel
sourceModel: UiLogic.containersModel
filters: [
ValueFilter {
roleName: "is_installed_role"
value: false
},
ValueFilter {
roleName: "service_type_role"
value: ProtocolEnum.Vpn
}
]
}
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
contentHeight: content.height
Column {
id: content
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 16
anchors.leftMargin: 16
anchors.topMargin: 20
spacing: 16
HeaderTextType {
width: parent.width
buttonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Протокол подключения"
descriptionText: "Выберите более приоритетный для вас. Позже можно будет установить остальные протоколы и доп сервисы, вроде DNS-прокси и SFTP."
}
ListView {
id: containers
width: parent.width
height: containers.contentItem.height
currentIndex: -1
clip: true
interactive: false
model: containersModel
delegate: Item {
implicitWidth: containers.width
implicitHeight: delegateContent.implicitHeight
ColumnLayout {
id: delegateContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
LabelWithButtonType {
id: container
Layout.fillWidth: true
Layout.topMargin: 16
Layout.bottomMargin: 16
text: name_role
descriptionText: desc_role
buttonImage: "qrc:/images/controls/chevron-right.svg"
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
}
}
}
}
}
}

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

@ -31,7 +31,7 @@ PageBase {
source: "qrc:/images/amneziaBigLogo.png"
Layout.alignment: Qt.AlignCenter
Layout.topMargin: 80
Layout.topMargin: 32
Layout.leftMargin: 8
Layout.rightMargin: 8
Layout.preferredWidth: 344
@ -67,8 +67,8 @@ PageBase {
Layout.rightMargin: 16
defaultColor: "transparent"
hoveredColor: Qt.rgba(255, 255, 255, 0.08)
pressedColor: Qt.rgba(255, 255, 255, 0.12)
hoveredColor: Qt.rgba(1, 1, 1, 0.08)
pressedColor: Qt.rgba(1, 1, 1, 0.12)
disabledColor: "#878B91"
textColor: "#D7D8DB"
borderWidth: 1
@ -123,6 +123,7 @@ PageBase {
Layout.alignment: Qt.AlignHCenter
text: "Данные для подключения"
wrapMode: Text.WordWrap
}
LabelWithButtonType {
@ -134,7 +135,8 @@ PageBase {
buttonImage: "qrc:/images/controls/chevron-right.svg"
onClickedFunc: function() {
UiLogic.goToPage(PageEnum.Credentials)
UiLogic.goToPage(PageEnum.WizardCredentials)
drawer.visible = false
}
}
Rectangle {