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

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

Browse source
This commit is contained in:
vladimir.kuznetsov 2023-03-23 17:49:36 +03:00
parent 7eb1a4b489
commit 8e61d77497
11 changed files with 333 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
client/fonts/pt-root-ui_vf.ttf Normal file
View file

Binary file not shown.

4
client/images/controls/arrow-right.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 316 B

3
client/images/controls/chevron-right.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 212 B

8
client/resources.qrc
View file

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

2
client/ui/pages.h
View file

@ -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() {

57
client/ui/qml/Controls2/BasicButtonType.qml Normal file
View file

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

44
client/ui/qml/Controls2/ImageButtonType.qml Normal file
View file

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

43
client/ui/qml/Controls2/LabelWithButtonType.qml Normal file
View file

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

68
client/ui/qml/Controls2/TextFieldWithHeaderType.qml Normal file
View file

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

104
client/ui/qml/Pages/PageTest.qml Normal file
View file

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

2
client/ui/qml/Pages/PageVPN.qml
View file

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