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

added SwitcherType and TabButtonType

Browse source 
- change CheckBoxType root type
- added PageTest
This commit is contained in:
vladimir.kuznetsov 2023-04-29 19:09:16 +03:00
parent cfc17cf290
commit c7acd63ea7
9 changed files with 492 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/resources.qrc
View file

@ -173,7 +173,6 @@
<file>server_scripts/check_user_in_sudo.sh</file>
<file>ui/qml/Controls2/BasicButtonType.qml</file>
<file>ui/qml/Controls2/TextFieldWithHeaderType.qml</file>
<file>ui/qml/Pages/PageTest.qml</file>
<file>fonts/pt-root-ui_vf.ttf</file>
<file>ui/qml/Controls2/LabelWithButtonType.qml</file>
<file>images/controls/arrow-right.svg</file>
@ -200,5 +199,8 @@
<file>ui/qml/Controls2/TextTypes/Header2TextType.qml</file>
<file>ui/qml/Controls2/HorizontalRadioButton.qml</file>
<file>ui/qml/Controls2/VerticalRadioButton.qml</file>
<file>ui/qml/Controls2/SwitcherType.qml</file>
<file>ui/qml/Pages2/PageTest.qml</file>
<file>ui/qml/Controls2/TabButtonType.qml</file>
</qresource>
</RCC>

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

@ -3,10 +3,9 @@ import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
Item {
CheckBox {
id: root
property string text
property string descriptionText
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
@ -22,58 +21,58 @@ Item {
property string imageSource: "qrc:/images/controls/check.svg"
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
hoverEnabled: true
RowLayout {
id: content
anchors.fill: parent
CheckBox {
id: checkBox
indicator: Rectangle {
id: checkBoxBackground
implicitWidth: 56
implicitHeight: 56
radius: 16
indicator: Image {
id: indicator
anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter
ColorOverlay {
id: imageColor
anchors.fill: indicator
source: indicator
color: {
if (root.hovered) {
return hoveredColor
}
return defaultColor
}
Behavior on color {
PropertyAnimation { duration: 200 }
}
Rectangle {
id: imageBorder
anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter
anchors.centerIn: parent
width: 24
height: 24
color: "transparent"
border.color: checkBox.checked ? checkedBorderColor : defaultBorderColor
border.color: root.checked ? checkedBorderColor : defaultBorderColor
border.width: 1
radius: 4
Image {
id: indicator
anchors.centerIn: parent
source: root.pressed ? imageSource : root.checked ? imageSource : ""
ColorOverlay {
id: imageColor
anchors.fill: indicator
source: indicator
color: root.pressed ? pressedImageColor : root.checked ? checkedImageColor : defaultImageColor
}
background: Rectangle {
id: checkBoxBackground
radius: 16
color: "transparent"
Behavior on color {
PropertyAnimation { duration: 200 }
}
}
}
ColumnLayout {
contentItem: ColumnLayout {
anchors.fill: parent
anchors.leftMargin: 8 + checkBoxBackground.width
Text {
text: root.text
color: "#D7D8DB"
@ -97,32 +96,12 @@ Item {
Layout.fillWidth: true
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
checkBoxBackground.color = hoveredColor
}
onExited: {
checkBoxBackground.color = defaultColor
}
onPressedChanged: {
indicator.source = pressed ? imageSource : checkBox.checked ? imageSource : ""
imageColor.color = pressed ? pressedImageColor : checkBox.checked ? checkedImageColor : defaultImageColor
checkBoxBackground.color = pressed ? pressedColor : entered ? hoveredColor : defaultColor
}
onClicked: {
checkBox.checked = !checkBox.checked
indicator.source = checkBox.checked ? imageSource : ""
imageColor.color = checkBox.checked ? checkedImageColor : defaultImageColor
imageBorder.border.color = checkBox.checked ? checkedBorderColor : defaultBorderColor
}
enabled: false
}
}

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

@ -22,6 +22,9 @@ Item {
image: root.buttonImage
imageColor: "#D7D8DB"
visible: image ? true : false
onClicked: {
UiLogic.closePage()
}
@ -58,6 +61,7 @@ Item {
wrapMode: Text.WordWrap
height: 24
Layout.topMargin: 16
Layout.fillWidth: true
}
}

83
client/ui/qml/Controls2/SwitcherType.qml Normal file
View file

@ -0,0 +1,83 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Switch {
id: root
property string checkedIndicatorColor: "#412102"
property string defaultIndicatorColor: "transparent"
property string checkedIndicatorBorderColor: "#412102"
property string defaultIndicatorBorderColor: "#494B50"
property string checkedInnerCircleColor: "#FBB26A"
property string defaultInnerCircleColor: "#D7D8DB"
property string hoveredIndicatorBackgroundColor: Qt.rgba(1, 1, 1, 0.08)
property string defaultIndicatorBackgroundColor: "transparent"
indicator: Rectangle {
implicitWidth: 52
implicitHeight: 32
x: content.width - width
radius: 16
color: root.checked ? checkedIndicatorColor : defaultIndicatorColor
border.color: root.checked ? checkedIndicatorBorderColor : defaultIndicatorBorderColor
Behavior on color {
PropertyAnimation { duration: 200 }
}
Behavior on border.color {
PropertyAnimation { duration: 200 }
}
Rectangle {
id: innerCircle
anchors.verticalCenter: parent.verticalCenter
x: root.checked ? parent.width - width - 4 : 8
width: root.checked ? 24 : 16
height: root.checked ? 24 : 16
radius: 23
color: root.checked ? checkedInnerCircleColor : defaultInnerCircleColor
Behavior on x {
PropertyAnimation { duration: 200 }
}
}
Rectangle {
anchors.centerIn: innerCircle
width: 40
height: 40
radius: 23
color: hovered ? hoveredIndicatorBackgroundColor : defaultIndicatorBackgroundColor
Behavior on color {
PropertyAnimation { duration: 200 }
}
}
}
contentItem: ColumnLayout {
id: content
Text {
text: root.text
color: "#D7D8DB"
font.pixelSize: 18
font.weight: 400
font.family: "PT Root UI VF"
height: 22
Layout.fillWidth: true
Layout.bottomMargin: 16
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
enabled: false
}
}

56
client/ui/qml/Controls2/TabButtonType.qml Normal file
View file

@ -0,0 +1,56 @@
import QtQuick
import QtQuick.Controls
TabButton {
id: root
property string hoveredColor: "#412102"
property string defaultColor: "#2C2D30"
property string selectedColor: "#FBB26A"
property string textColor: "#D7D8DB"
property bool isSelected: false
implicitHeight: 48
hoverEnabled: true
background: Rectangle {
id: background
anchors.fill: parent
color: "transparent"
Rectangle {
width: parent.width
height: 1
y: parent.height - height
color: {
if(root.isSelected) {
return selectedColor
}
return hovered ? hoveredColor : defaultColor
}
Behavior on color {
PropertyAnimation { duration: 200 }
}
}
}
contentItem: Text {
anchors.fill: background
height: 24
font.family: "PT Root UI"
font.styleName: "normal"
font.weight: 500
font.pixelSize: 16
color: textColor
text: root.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}

9
client/ui/qml/Controls2/VerticalRadioButton.qml
View file

@ -26,9 +26,6 @@ RadioButton {
property string defaultInnerCircleColor: "#FBB26A"
implicitWidth: background.implicitWidth + content.implicitWidth
implicitHeight: background.implicitWidth
hoverEnabled: true
indicator: Rectangle {
@ -121,14 +118,10 @@ RadioButton {
}
}
contentItem: Item {}
ColumnLayout {
contentItem: ColumnLayout {
id: content
anchors.fill: parent
anchors.leftMargin: 8 + background.width
anchors.topMargin: 4
anchors.bottomMargin: 4
Text {
text: root.text

125
client/ui/qml/Pages/PageTest.qml
View file

@ -1,125 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import PageEnum 1.0
import "./"
import "../Controls"
import "../Controls2"
import "../Config"
PageBase {
id: root
page: PageEnum.Test
logic: ViewConfigLogic
Rectangle {
anchors.fill: parent
color: "#0E0E11"
}
FlickableType {
id: fl
anchors.top: root.top
anchors.bottom: root.bottom
contentHeight: content.height
ColumnLayout {
id: content
enabled: true
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 15
BasicButtonType {
Layout.fillWidth: true
Layout.topMargin: 10
text: qsTr("Forget this server")
// onClicked: {
// UiLogic.goToPage(PageEnum.Start)
// }
}
BasicButtonType {
Layout.fillWidth: true
Layout.topMargin: 10
defaultColor: "transparent"
hoveredColor: Qt.rgba(255, 255, 255, 0.08)
pressedColor: Qt.rgba(255, 255, 255, 0.12)
disabledColor: "#878B91"
textColor: "#D7D8DB"
borderWidth: 1
text: qsTr("Forget this server")
// onClicked: {
// UiLogic.goToPage(PageEnum.Start)
// }
}
TextFieldWithHeaderType {
Layout.fillWidth: true
Layout.topMargin: 10
headerText: "Server IP adress [:port]"
}
LabelWithButtonType {
id: ip
Layout.fillWidth: true
Layout.topMargin: 10
text: "IP, логин и пароль от сервера"
buttonImage: "qrc:/images/controls/chevron-right.svg"
// onClickedFunc: function() {
// UiLogic.goToPage(PageEnum.Start)
// }
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
LabelWithButtonType {
Layout.fillWidth: true
Layout.topMargin: 10
text: "QR-код, ключ или файл настроек"
buttonImage: "qrc:/images/controls/chevron-right.svg"
// onClickedFunc: function() {
// UiLogic.goToPage(PageEnum.Start)
// }
}
Rectangle {
Layout.fillWidth: true
height: 1
color: "#2C2D30"
}
CardType {
Layout.fillWidth: true
Layout.topMargin: 10
headerText: "Высокий"
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
footerText: "футер"
}
CardType {
Layout.fillWidth: true
Layout.topMargin: 10
headerText: "Высокий"
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
footerText: "футер"
}
CheckBoxType {
// text: qsTr("Auto-negotiate encryption")
}
}
}
}

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

@ -76,74 +76,9 @@ PageBase {
text: qsTr("У меня ничего нет")
// onClicked: {
// UiLogic.goToPage(PageEnum.Start)
// }
onClicked: {
UiLogic.goToPage(PageEnum.Test)
}
DropDownType {
Layout.fillWidth: true
text: "IP, логин и пароль от сервера"
descriptionText: "IP, логин и пароль от сервера"
menuModel: [
qsTr("SHA512"),
qsTr("SHA384"),
qsTr("SHA256"),
qsTr("SHA3-512"),
qsTr("SHA3-384"),
qsTr("SHA3-256"),
qsTr("whirlpool"),
qsTr("BLAKE2b512"),
qsTr("BLAKE2s256"),
qsTr("SHA1")
]
}
CheckBoxType {
// text: qsTr("Auto-negotiate encryption")
}
CheckBoxType {
text: qsTr("Auto-negotiate encryption")
descriptionText: "dssaa"
}
Rectangle {
implicitWidth: buttonGroup.implicitWidth
implicitHeight: buttonGroup.implicitHeight
Layout.leftMargin: 16
Layout.rightMargin: 16
color: "#1C1D21"
radius: 16
RowLayout {
id: buttonGroup
spacing: 0
HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2
text: "ddsasdasd"
}
HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2
text: "ddsasdasd"
}
}
}
VerticalRadioButton {
text: "dsasd"
descriptionText: "asd"
checked: true
Layout.fillWidth: true
}
VerticalRadioButton {
text: "dsasd"
Layout.fillWidth: true
}
}

285
client/ui/qml/Pages2/PageTest.qml Normal file
View file

@ -0,0 +1,285 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import PageEnum 1.0
import "./"
import "../Pages"
import "../Controls2"
import "../Config"
import "../Controls2/TextTypes"
PageBase {
id: root
page: PageEnum.Test
logic: ViewConfigLogic
ColumnLayout {
id: content
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
HeaderType {
id: header
Layout.rightMargin: 16
Layout.leftMargin: 16
Layout.topMargin: 20
Layout.bottomMargin: 32
Layout.fillWidth: true
buttonImage: "qrc:/images/controls/arrow-left.svg"
headerText: "Server 1"
descriptionText: "root 192.168.111.111"
}
Item {
Layout.fillWidth: true
TabBar {
id: tabBar
anchors {
top: parent.top
right: parent.right
left: parent.left
}
background: Rectangle {
color: "transparent"
}
TabButtonType {
id: bb
isSelected: tabBar.currentIndex === 0
text: qsTr("Протоколы")
}
TabButtonType {
isSelected: tabBar.currentIndex === 1
text: qsTr("Сервисы")
}
TabButtonType {
isSelected: tabBar.currentIndex === 2
text: qsTr("Данные")
}
}
StackLayout {
id: stackLayout
currentIndex: tabBar.currentIndex
anchors.top: tabBar.bottom
anchors.topMargin: 16
width: parent.width
height: root.height - header.implicitHeight - tabBar.implicitHeight - 100
Item {
id: protocolsTab
FlickableType {
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: protocolsTabContent.height
ColumnLayout {
id: protocolsTabContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
BasicButtonType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
text: qsTr("Forget this server")
}
BasicButtonType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
defaultColor: "transparent"
hoveredColor: Qt.rgba(255, 255, 255, 0.08)
pressedColor: Qt.rgba(255, 255, 255, 0.12)
disabledColor: "#878B91"
textColor: "#D7D8DB"
borderWidth: 1
text: qsTr("Forget this server")
}
TextFieldWithHeaderType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
headerText: "Server IP adress [:port]"
}
LabelWithButtonType {
id: ip
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
text: "IP, логин и пароль от сервера"
buttonImage: "qrc:/images/controls/chevron-right.svg"
}
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
height: 1
color: "#2C2D30"
}
LabelWithButtonType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
text: "QR-код, ключ или файл настроек"
buttonImage: "qrc:/images/controls/chevron-right.svg"
}
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
height: 1
color: "#2C2D30"
}
CardType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
headerText: "Высокий"
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
footerText: "футер"
}
CardType {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
headerText: "Высокий"
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
footerText: "футер"
}
DropDownType {
Layout.fillWidth: true
text: "IP, логин и пароль от сервера"
descriptionText: "IP, логин и пароль от сервера"
menuModel: [
qsTr("SHA512"),
qsTr("SHA384"),
qsTr("SHA256"),
qsTr("SHA3-512"),
qsTr("SHA3-384"),
qsTr("SHA3-256"),
qsTr("whirlpool"),
qsTr("BLAKE2b512"),
qsTr("BLAKE2s256"),
qsTr("SHA1")
]
}
}
}
}
Item {
id: servicesTab
FlickableType {
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: servicesTabContent.height
ColumnLayout {
id: servicesTabContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
CheckBoxType {
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.fillWidth: true
text: qsTr("Auto-negotiate encryption")
}
CheckBoxType {
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.fillWidth: true
text: qsTr("Auto-negotiate encryption")
descriptionText: qsTr("Auto-negotiate encryption")
}
Rectangle {
implicitWidth: buttonGroup.implicitWidth
implicitHeight: buttonGroup.implicitHeight
Layout.leftMargin: 16
Layout.rightMargin: 16
color: "#1C1D21"
radius: 16
RowLayout {
id: buttonGroup
spacing: 0
HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2
text: "UDP"
}
HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2
text: "TCP"
}
}
}
VerticalRadioButton {
text: "Раздельное туннелирование"
descriptionText: "Позволяет подключаться к одним сайтам через защищенное соединение, а к другим в обход него"
checked: true
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
}
VerticalRadioButton {
text: "Раздельное туннелирование"
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
}
SwitcherType {
text: "Auto-negotiate encryption"
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
}
}
}
}
}
}
}
}