diff --git a/client/fonts/pt-root-ui_vf.ttf b/client/fonts/pt-root-ui_vf.ttf new file mode 100644 index 00000000..34e6f1f9 Binary files /dev/null and b/client/fonts/pt-root-ui_vf.ttf differ diff --git a/client/images/controls/arrow-right.svg b/client/images/controls/arrow-right.svg new file mode 100644 index 00000000..69b21b89 --- /dev/null +++ b/client/images/controls/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/images/controls/chevron-right.svg b/client/images/controls/chevron-right.svg new file mode 100644 index 00000000..726eabac --- /dev/null +++ b/client/images/controls/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/resources.qrc b/client/resources.qrc index 67937bda..7a157e5a 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -165,5 +165,13 @@ ui/qml/Controls/PopupWithQuestion.qml ui/qml/Pages/PageAdvancedServerSettings.qml ui/qml/Controls/PopupWarning.qml + ui/qml/Controls2/BasicButtonType.qml + ui/qml/Controls2/TextFieldWithHeaderType.qml + ui/qml/Pages/PageTest.qml + fonts/pt-root-ui_vf.ttf + ui/qml/Controls2/LabelWithButtonType.qml + images/controls/arrow-right.svg + images/controls/chevron-right.svg + ui/qml/Controls2/ImageButtonType.qml diff --git a/client/ui/pages.h b/client/ui/pages.h index dfc9a509..a639d63b 100644 --- a/client/ui/pages.h +++ b/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() { diff --git a/client/ui/qml/Controls2/BasicButtonType.qml b/client/ui/qml/Controls2/BasicButtonType.qml new file mode 100644 index 00000000..7133d236 --- /dev/null +++ b/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 + } +} diff --git a/client/ui/qml/Controls2/ImageButtonType.qml b/client/ui/qml/Controls2/ImageButtonType.qml new file mode 100644 index 00000000..be1bd0e4 --- /dev/null +++ b/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 + } +} diff --git a/client/ui/qml/Controls2/LabelWithButtonType.qml b/client/ui/qml/Controls2/LabelWithButtonType.qml new file mode 100644 index 00000000..c49d1e06 --- /dev/null +++ b/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 + } + } + +} diff --git a/client/ui/qml/Controls2/TextFieldWithHeaderType.qml b/client/ui/qml/Controls2/TextFieldWithHeaderType.qml new file mode 100644 index 00000000..18f62344 --- /dev/null +++ b/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" + } + } + } +} diff --git a/client/ui/qml/Pages/PageTest.qml b/client/ui/qml/Pages/PageTest.qml new file mode 100644 index 00000000..11b3ff1d --- /dev/null +++ b/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" + } + } + } +} diff --git a/client/ui/qml/Pages/PageVPN.qml b/client/ui/qml/Pages/PageVPN.qml index 342fb129..0e6f5078 100644 --- a/client/ui/qml/Pages/PageVPN.qml +++ b/client/ui/qml/Pages/PageVPN.qml @@ -39,7 +39,7 @@ PageBase { label.text: qsTr("Donate") onClicked: { - UiLogic.goToPage(PageEnum.About) + UiLogic.goToPage(PageEnum.Test) } }