added new controls elements (BasicButtonType, ImageButtonType, LabelWithButtonType, TextFieldWithHeaderType)

client/images/controls/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 5L19 12L12 19" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/images/controls/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L15 12L9 6" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/resources.qrc

@@ -165,5 +165,13 @@
         <file>ui/qml/Controls/PopupWithQuestion.qml</file>
         <file>ui/qml/Pages/PageAdvancedServerSettings.qml</file>
         <file>ui/qml/Controls/PopupWarning.qml</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>
+        <file>images/controls/chevron-right.svg</file>
+        <file>ui/qml/Controls2/ImageButtonType.qml</file>
     </qresource>
 </RCC>

client/ui/pages.h

@@ -24,7 +24,7 @@ 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};
+           ProtocolSettings, ProtocolShare, QrDecoder, QrDecoderIos, About, ViewConfig, AdvancedServerSettings, Test};
 Q_ENUM_NS(Page)
 
 static void declareQmlPageEnum() {

client/ui/qml/Controls2/BasicButtonType.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    id: root
+
+    property string hoveredColor: "#C1C2C5"
+    property string defaultColor: "#D7D8DB"
+    property string disabledColor: "#494B50"
+    property string pressedColor: "#979799"
+
+    property string textColor: "#0E0E11"
+
+    property string borderColor: "#D7D8DB"
+    property int borderWidth: 0
+
+    implicitWidth: 328
+    implicitHeight: 56
+
+    hoverEnabled: true
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: 16
+        color: {
+            if (root.enabled) {
+                if(root.pressed) {
+                    return pressedColor
+                }
+                return hovered ? hoveredColor : defaultColor
+            } else {
+                return disabledColor
+            }
+        }
+        border.color: borderColor
+        border.width: borderWidth
+    }
+
+    MouseArea {
+        anchors.fill: background
+        enabled: false
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    contentItem: Text {
+        anchors.fill: background
+        font.family: "PT Root UI"
+        font.styleName: "normal"
+        font.weight: 400
+        font.pixelSize: 16
+        color: textColor
+        text: root.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+}

client/ui/qml/Controls2/ImageButtonType.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Button {
+    id: root
+
+    property string image
+
+    property string hoveredColor: Qt.rgba(255, 255, 255, 0.08)
+    property string defaultColor: Qt.rgba(255, 255, 255, 0)
+    property string pressedColor: Qt.rgba(255, 255, 255, 0.12)
+
+    property string imageColor: "#878B91"
+
+    implicitWidth: 40
+    implicitHeight: 40
+
+    hoverEnabled: true
+
+    icon.source: image
+    icon.color: imageColor
+
+    background: Rectangle {
+        id: background
+
+        anchors.fill: parent
+        radius: 12
+        color: {
+            if (root.enabled) {
+                if(root.pressed) {
+                    return pressedColor
+                }
+                return hovered ? hoveredColor : defaultColor
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: false
+        cursorShape: Qt.PointingHandCursor
+    }
+}

client/ui/qml/Controls2/LabelWithButtonType.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    property string text
+
+    property var onClickedFunc
+    property alias buttonImage : button.image
+
+    implicitWidth: 360
+    implicitHeight: 72
+
+    RowLayout {
+        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
+        }
+
+        ImageButtonType {
+            id: button
+
+            image: buttonImage
+            onClicked: {
+                if (onClickedFunc && typeof onClickedFunc === "function") {
+                    onClickedFunc()
+                }
+            }
+
+            Layout.alignment: Qt.AlignRight
+        }
+    }
+
+}

client/ui/qml/Controls2/TextFieldWithHeaderType.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    property string headerText
+    property string textFieldText
+    property bool textFieldEditable: true
+
+    implicitWidth: 328
+    implicitHeight: 74
+
+    Rectangle {
+        id: backgroud
+        anchors.fill: parent
+        color: "#1c1d21"
+        radius: 16
+        border.color: "#d7d8db"
+        border.width: textField.focus ? 1 : 0
+    }
+
+    ColumnLayout {
+        anchors.fill: backgroud
+
+        Text {
+            text: root.headerText
+            color: "#878b91"
+            font.pixelSize: 13
+            font.weight: 400
+            font.family: "PT Root UI VF"
+            font.letterSpacing: 0.02
+
+            height: 16
+            Layout.fillWidth: true
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
+            Layout.topMargin: 16
+        }
+
+        TextField {
+            id: textField
+
+            enabled: root.textFieldEditable
+            text: root.textFieldText
+            color: "#d7d8db"
+            font.pixelSize: 16
+            font.weight: 400
+            font.family: "PT Root UI VF"
+
+            height: 24
+            Layout.fillWidth: true
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
+            Layout.bottomMargin: 16
+            topPadding: 0
+            rightPadding: 0
+            leftPadding: 0
+            bottomPadding: 0
+
+            background: Rectangle {
+                anchors.fill: parent
+                color: "#1c1d21"
+            }
+        }
+    }
+}

client/ui/qml/Pages/PageTest.qml

@@ -0,0 +1,104 @@
+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 {
+        y: 0
+        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: "#0E0E11"
+                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"
+            }
+        }
+    }
+}

client/ui/qml/Pages/PageVPN.qml

@@ -39,7 +39,7 @@ PageBase {
         label.text: qsTr("Donate")
 
         onClicked: {
-            UiLogic.goToPage(PageEnum.About)
+            UiLogic.goToPage(PageEnum.Test)
         }
     }