From c74c5e0c6d137209985baf2ecf735edc70e63171 Mon Sep 17 00:00:00 2001 From: "vladimir.kuznetsov" Date: Fri, 7 Apr 2023 20:50:55 +0300 Subject: [PATCH] added CheckBoxType - added hover effect to LabelWithButtonType --- client/images/controls/check.svg | 3 + client/resources.qrc | 2 + client/ui/qml/Controls2/CardType.qml | 19 ++--- client/ui/qml/Controls2/CheckBoxType.qml | 77 +++++++++++++++++++ client/ui/qml/Controls2/ImageButtonType.qml | 5 +- .../ui/qml/Controls2/LabelWithButtonType.qml | 33 ++++++++ client/ui/qml/Pages/PageTest.qml | 4 + 7 files changed, 133 insertions(+), 10 deletions(-) create mode 100644 client/images/controls/check.svg create mode 100644 client/ui/qml/Controls2/CheckBoxType.qml diff --git a/client/images/controls/check.svg b/client/images/controls/check.svg new file mode 100644 index 00000000..16b4c0da --- /dev/null +++ b/client/images/controls/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/resources.qrc b/client/resources.qrc index 9280e2b2..bda89bf2 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 cd7320be..31b51f31 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 00000000..1cd46143 --- /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 be1bd0e4..b6262906 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 c49d1e06..5da4db5f 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 dc3cc69b..9f820389 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") + } } } }