diff --git a/client/images/controls/check.svg b/client/images/controls/check.svg
new file mode 100644
index 000000000..16b4c0da4
--- /dev/null
+++ b/client/images/controls/check.svg
@@ -0,0 +1,3 @@
+
diff --git a/client/resources.qrc b/client/resources.qrc
index 9280e2b29..bda89bf28 100644
--- a/client/resources.qrc
+++ b/client/resources.qrc
@@ -174,5 +174,7 @@
images/controls/chevron-right.svg
ui/qml/Controls2/ImageButtonType.qml
ui/qml/Controls2/CardType.qml
+ ui/qml/Controls2/CheckBoxType.qml
+ images/controls/check.svg
diff --git a/client/ui/qml/Controls2/CardType.qml b/client/ui/qml/Controls2/CardType.qml
index cd7320be8..31b51f311 100644
--- a/client/ui/qml/Controls2/CardType.qml
+++ b/client/ui/qml/Controls2/CardType.qml
@@ -9,15 +9,16 @@ RadioButton {
property string bodyText
property string footerText
- property string hoveredColor: Qt.rgba(255, 255, 255, 0)
- property string defaultColor: Qt.rgba(255, 255, 255, 0.05)
+ property string hoveredColor: Qt.rgba(255, 255, 255, 0.05)
+ property string defaultColor: Qt.rgba(255, 255, 255, 0)
property string disabledColor: Qt.rgba(255, 255, 255, 0)
property string pressedColor: Qt.rgba(255, 255, 255, 0.05)
property string textColor: "#0E0E11"
property string pressedBorderColor: Qt.rgba(251, 178, 106, 0.3)
- property string hoveredBorderColor: Qt.rgba(251, 178, 106, 1)
+ property string hoveredBorderColor: "transparent"
+ property string defaultBodredColor: "#FBB26A"
property int borderWidth: 0
implicitWidth: content.implicitWidth
@@ -44,9 +45,9 @@ RadioButton {
if(root.checked) {
return pressedBorderColor
}
- return hovered ? hoveredBorderColor : defaultColor
+ return hovered ? hoveredBorderColor : defaultBodredColor
} else {
- return disabledColor
+ return defaultBodredColor
}
}
border.width: {
@@ -54,7 +55,7 @@ RadioButton {
if(root.checked) {
return 1
}
- return hovered ? 1 : 0
+ return hovered ? 0 : 1
} else {
return 0
}
@@ -72,7 +73,7 @@ RadioButton {
Text {
text: root.headerText
- color: "#878b91"
+ color: "#D7D8DB"
font.pixelSize: 25
font.weight: 700
font.family: "PT Root UI VF"
@@ -87,7 +88,7 @@ RadioButton {
Text {
text: root.bodyText
wrapMode: Text.WordWrap
- color: "#878b91"
+ color: "#D7D8DB"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
@@ -103,7 +104,7 @@ RadioButton {
text: root.footerText
visible: root.footerText !== ""
enabled: root.footerText !== ""
- color: "#878b91"
+ color: "#878B91"
font.pixelSize: 13
font.weight: 400
font.family: "PT Root UI VF"
diff --git a/client/ui/qml/Controls2/CheckBoxType.qml b/client/ui/qml/Controls2/CheckBoxType.qml
new file mode 100644
index 000000000..1cd461433
--- /dev/null
+++ b/client/ui/qml/Controls2/CheckBoxType.qml
@@ -0,0 +1,77 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+ id: root
+
+ implicitWidth: content.implicitWidth
+ implicitHeight: content.implicitHeight
+
+ RowLayout {
+ id: content
+
+ anchors.fill: parent
+
+ CheckBox {
+ id: checkBox
+
+ implicitWidth: 56
+ implicitHeight: 56
+
+ indicator: Image {
+ id: indicator
+ anchors.verticalCenter: checkBox.verticalCenter
+ anchors.horizontalCenter: checkBox.horizontalCenter
+ source: checkBox.checked ? "qrc:/images/controls/check.svg" : ""
+ }
+ Rectangle {
+ anchors.verticalCenter: checkBox.verticalCenter
+ anchors.horizontalCenter: checkBox.horizontalCenter
+ width: 24
+ height: 24
+ color: "transparent"
+ border.color: "#FBB26A"
+ border.width: 1
+ radius: 4
+ }
+ background: Rectangle {
+ id: background
+ color: Qt.rgba(255, 255, 255, 0.05)
+ radius: 16
+ }
+ }
+
+ ColumnLayout {
+ Text {
+ text: "Paragraph"
+ color: "#D7D8DB"
+ font.pixelSize: 18
+ font.weight: 400
+ font.family: "PT Root UI VF"
+
+ height: 22
+ Layout.fillWidth: true
+ }
+
+ Text {
+ text: "Caption"
+ 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
+ onClicked: {
+ checkBox.checked = !checkBox.checked
+ }
+ }
+}
diff --git a/client/ui/qml/Controls2/ImageButtonType.qml b/client/ui/qml/Controls2/ImageButtonType.qml
index be1bd0e44..b6262906e 100644
--- a/client/ui/qml/Controls2/ImageButtonType.qml
+++ b/client/ui/qml/Controls2/ImageButtonType.qml
@@ -8,7 +8,7 @@ Button {
property string image
property string hoveredColor: Qt.rgba(255, 255, 255, 0.08)
- property string defaultColor: Qt.rgba(255, 255, 255, 0)
+ property string defaultColor: "transparent"
property string pressedColor: Qt.rgba(255, 255, 255, 0.12)
property string imageColor: "#878B91"
@@ -34,6 +34,9 @@ Button {
return hovered ? hoveredColor : defaultColor
}
}
+ Behavior on color {
+ PropertyAnimation { duration: 200 }
+ }
}
MouseArea {
diff --git a/client/ui/qml/Controls2/LabelWithButtonType.qml b/client/ui/qml/Controls2/LabelWithButtonType.qml
index c49d1e069..5da4db5f5 100644
--- a/client/ui/qml/Controls2/LabelWithButtonType.qml
+++ b/client/ui/qml/Controls2/LabelWithButtonType.qml
@@ -29,6 +29,7 @@ Item {
ImageButtonType {
id: button
+ hoverEnabled: false
image: buttonImage
onClicked: {
if (onClickedFunc && typeof onClickedFunc === "function") {
@@ -37,7 +38,39 @@ Item {
}
Layout.alignment: Qt.AlignRight
+
+ Rectangle {
+ id: imageBackground
+ anchors.fill: button
+ radius: 12
+ color: "transparent"
+
+
+ Behavior on color {
+ PropertyAnimation { duration: 200 }
+ }
+ }
}
}
+ MouseArea {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ hoverEnabled: true
+ onEntered: {
+ imageBackground.color = button.hoveredColor
+ }
+
+ onExited: {
+ imageBackground.color = button.defaultColor
+ }
+
+ onPressedChanged: {
+ imageBackground.color = pressed ? button.pressedColor : entered ? button.hoveredColor : button.defaultColor
+ }
+
+ onClicked: {
+ button.clicked()
+ }
+ }
}
diff --git a/client/ui/qml/Pages/PageTest.qml b/client/ui/qml/Pages/PageTest.qml
index dc3cc69b7..9f820389e 100644
--- a/client/ui/qml/Pages/PageTest.qml
+++ b/client/ui/qml/Pages/PageTest.qml
@@ -117,6 +117,10 @@ PageBase {
bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
footerText: "футер"
}
+
+ CheckBoxType {
+// text: qsTr("Auto-negotiate encryption")
+ }
}
}
}