added SwitcherType and TabButtonType

- change CheckBoxType root type
- added PageTest

client/resources.qrc

@@ -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>

client/ui/qml/Controls2/CheckBoxType.qml

@@ -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,107 +21,87 @@ Item {
 
     property string imageSource: "qrc:/images/controls/check.svg"
 
-    implicitWidth: content.implicitWidth
+    hoverEnabled: true
-    implicitHeight: content.implicitHeight
 
-    RowLayout {
+    indicator: Rectangle {
-        id: content
+        id: checkBoxBackground
 
-        anchors.fill: parent
+        implicitWidth: 56
+        implicitHeight: 56
+        radius: 16
 
-        CheckBox {
+        color:  {
-            id: checkBox
+            if (root.hovered) {
+                return hoveredColor
+            }
+            return defaultColor
+        }
 
-            implicitWidth: 56
+        Behavior on color {
-            implicitHeight: 56
+            PropertyAnimation { duration: 200 }
+        }
 
-            indicator: Image {
+        Rectangle {
+            id: imageBorder
+
+            anchors.centerIn: parent
+            width: 24
+            height: 24
+            color: "transparent"
+            border.color: root.checked ? checkedBorderColor : defaultBorderColor
+            border.width: 1
+            radius: 4
+
+            Image {
                 id: indicator
-                anchors.verticalCenter: checkBox.verticalCenter
+                anchors.centerIn: parent
-                anchors.horizontalCenter: checkBox.horizontalCenter
+
+                source: root.pressed ? imageSource : root.checked ? imageSource : ""
 
                 ColorOverlay {
                     id: imageColor
                     anchors.fill: indicator
                     source: indicator
-                }
-            }
 
-            Rectangle {
+                    color: root.pressed ? pressedImageColor : root.checked ? checkedImageColor : defaultImageColor
-                id: imageBorder
-
-                anchors.verticalCenter: checkBox.verticalCenter
-                anchors.horizontalCenter: checkBox.horizontalCenter
-                width: 24
-                height: 24
-                color: "transparent"
-                border.color: checkBox.checked ? checkedBorderColor : defaultBorderColor
-                border.width: 1
-                radius: 4
-            }
-
-            background: Rectangle {
-                id: checkBoxBackground
-                radius: 16
-
-                color: "transparent"
-
-                Behavior on color {
-                    PropertyAnimation { duration: 200 }
                 }
             }
         }
+    }
 
-        ColumnLayout {
+    contentItem: ColumnLayout {
-            Text {
+        anchors.fill: parent
-                text: root.text
+        anchors.leftMargin: 8 + checkBoxBackground.width
-                color: "#D7D8DB"
-                font.pixelSize: 18
-                font.weight: 400
-                font.family: "PT Root UI VF"
 
-                height: 22
+        Text {
-                Layout.fillWidth: true
+            text: root.text
-            }
+            color: "#D7D8DB"
+            font.pixelSize: 18
+            font.weight: 400
+            font.family: "PT Root UI VF"
 
-            Text {
+            height: 22
-                text: root.descriptionText
+            Layout.fillWidth: true
-                color: "#878b91"
+        }
-                font.pixelSize: 13
-                font.weight: 400
-                font.family: "PT Root UI VF"
-                font.letterSpacing: 0.02
 
-                height: 16
+        Text {
-                Layout.fillWidth: true
+            text: root.descriptionText
-            }
+            color: "#878b91"
+            font.pixelSize: 13
+            font.weight: 400
+            font.family: "PT Root UI VF"
+            font.letterSpacing: 0.02
+
+            height: 16
+            Layout.fillWidth: true
         }
     }
 
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        hoverEnabled: true
+        enabled: false
-
-        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
-        }
     }
 }
+
+

client/ui/qml/Controls2/HeaderType.qml

@@ -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
         }
     }

client/ui/qml/Controls2/SwitcherType.qml

@@ -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
+    }
+}

client/ui/qml/Controls2/TabButtonType.qml

@@ -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
+    }
+}

client/ui/qml/Controls2/VerticalRadioButton.qml

@@ -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 {}
+    contentItem: ColumnLayout {
-
-    ColumnLayout {
         id: content
         anchors.fill: parent
         anchors.leftMargin: 8 + background.width
-        anchors.topMargin: 4
-        anchors.bottomMargin: 4
 
         Text {
             text: root.text

client/ui/qml/Pages/PageTest.qml

@@ -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")
-            }
-        }
-    }
-}

client/ui/qml/Pages2/PageStart.qml

@@ -76,75 +76,10 @@ PageBase {
 
                 text: qsTr("У меня ничего нет")
 
-//                onClicked: {
+                onClicked: {
-//                    UiLogic.goToPage(PageEnum.Start)
+                    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
-            }
         }
 
         Drawer {

client/ui/qml/Pages2/PageTest.qml

@@ -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
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}