added HorizontalRadioButton and VerticalRadioButton components

This commit is contained in:
vladimir.kuznetsov 2023-04-26 08:30:02 +03:00
parent a9ebf534c6
commit 904e173037
12 changed files with 330 additions and 8 deletions

View file

@ -188,15 +188,17 @@
<file>ui/qml/PageLoader.qml</file>
<file>images/amneziaBigLogo.png</file>
<file>images/amneziaBigLogo.svg</file>
<file>ui/qml/Controls2/BodyTextType.qml</file>
<file>ui/qml/Controls2/FlickableType.qml</file>
<file>ui/qml/Controls2/Header2TextType.qml</file>
<file>ui/qml/Pages2/PageSetupWizardCredentials.qml</file>
<file>ui/qml/Controls2/HeaderTextType.qml</file>
<file>ui/qml/Controls2/HeaderType.qml</file>
<file>images/controls/arrow-left.svg</file>
<file>ui/qml/Pages2/PageSetupWizardProtocols.qml</file>
<file>ui/qml/Pages2/PageSetupWizardEasy.qml</file>
<file>images/controls/chevron-down.svg</file>
<file>images/controls/chevron-up.svg</file>
<file>ui/qml/Controls2/TextTypes/BodyTextType.qml</file>
<file>ui/qml/Controls2/TextTypes/Header2TextType.qml</file>
<file>ui/qml/Controls2/HorizontalRadioButton.qml</file>
<file>ui/qml/Controls2/VerticalRadioButton.qml</file>
</qresource>
</RCC>

View file

@ -6,6 +6,9 @@ import Qt5Compat.GraphicalEffects
Item {
id: root
property string text
property string descriptionText
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
property string defaultColor: "transparent"
property string pressedColor: Qt.rgba(1, 1, 1, 0.05)
@ -71,7 +74,7 @@ Item {
ColumnLayout {
Text {
text: "Paragraph"
text: root.text
color: "#D7D8DB"
font.pixelSize: 18
font.weight: 400
@ -82,7 +85,7 @@ Item {
}
Text {
text: "Caption"
text: root.descriptionText
color: "#878b91"
font.pixelSize: 13
font.weight: 400
@ -94,6 +97,7 @@ Item {
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor

View file

@ -2,6 +2,8 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "TextTypes"
Item {
id: root

View file

@ -0,0 +1,95 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RadioButton {
id: root
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
property string defaultColor: Qt.rgba(1, 1, 1, 0)
property string disabledColor: Qt.rgba(1, 1, 1, 0)
property string selectedColor: Qt.rgba(1, 1, 1, 0)
property string textColor: "#0E0E11"
property string pressedBorderColor: "#494B50"
property string selectedBorderColor: "#FBB26A"
property string defaultBodredColor: "transparent"
property int borderWidth: 0
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
hoverEnabled: true
indicator: Rectangle {
anchors.fill: parent
radius: 16
color: {
if (root.enabled) {
if (root.hovered) {
return hoveredColor
} else if (root.checked) {
return selectedColor
}
return defaultColor
} else {
return disabledColor
}
}
border.color: {
if (root.enabled) {
if (root.pressed) {
return pressedBorderColor
} else if (root.checked) {
return selectedBorderColor
}
}
return defaultBodredColor
}
border.width: {
if (root.enabled) {
if(root.checked) {
return 1
}
return root.pressed ? 1 : 0
} else {
return 0
}
}
Behavior on color {
PropertyAnimation { duration: 200 }
}
Behavior on border.color {
PropertyAnimation { duration: 200 }
}
}
ColumnLayout {
id: content
anchors.fill: parent
spacing: 16
Text {
text: root.text
wrapMode: Text.WordWrap
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.topMargin: 16
Layout.bottomMargin: 16
horizontalAlignment: Qt.AlignHCenter
}
}
}

View file

@ -0,0 +1,180 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
RadioButton {
id: root
property string descriptionText
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
property string defaultColor: Qt.rgba(1, 1, 1, 0)
property string disabledColor: Qt.rgba(1, 1, 1, 0)
property string selectedColor: Qt.rgba(1, 1, 1, 0)
property string textColor: "#0E0E11"
property string pressedBorderColor: Qt.rgba(251/255, 178/255, 106/255, 0.3)
property string selectedBorderColor: "#FBB26A"
property string defaultBodredColor: "transparent"
property int borderWidth: 0
property string defaultCircleBorderColor: "#878B91"
property string selectedCircleBorderColor: "#A85809"
property string pressedCircleBorderColor: Qt.rgba(251/255, 178/255, 106/255, 0.3)
property string defaultInnerCircleColor: "#FBB26A"
hoverEnabled: true
indicator: Rectangle {
implicitWidth: 56
implicitHeight: 56
radius: 16
color: {
if (root.enabled) {
if (root.hovered || contentMouseArea.entered) {
return hoveredColor
} else if (root.checked) {
return selectedColor
}
return defaultColor
} else {
return disabledColor
}
}
Behavior on color {
PropertyAnimation { duration: 200 }
}
Rectangle {
width: 24
height: 24
radius: 16
anchors.centerIn: parent
color: "transparent"
border.color: {
if (root.enabled) {
if (root.pressed) {
return pressedCircleBorderColor
} else if (root.checked) {
return selectedCircleBorderColor
}
}
return defaultCircleBorderColor
}
border.width: 1
Behavior on border.color {
PropertyAnimation { duration: 200 }
}
Rectangle {
id: innerCircle
width: 12
height: 12
radius: 16
anchors.centerIn: parent
color: "transparent"
border.color: defaultInnerCircleColor
border.width: {
if (root.enabled) {
if(root.checked) {
return 6
}
return root.pressed ? 6 : 0
} else {
return 0
}
}
Behavior on border.width {
PropertyAnimation { duration: 200 }
}
}
DropShadow {
anchors.fill: innerCircle
horizontalOffset: 0
verticalOffset: 0
radius: 12
samples: 13
color: "#FBB26A"
source: innerCircle
}
}
}
contentItem: ColumnLayout {
id: content
anchors.left: indicator.right
anchors.top: parent.top
anchors.leftMargin: 8
spacing: 16
Text {
text: root.text
wrapMode: Text.WordWrap
color: "#D7D8DB"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
height: 24
Layout.fillWidth: true
}
Text {
font.family: "PT Root UI"
font.styleName: "normal"
font.pixelSize: 13
font.letterSpacing: 0.02
color: "#878B91"
text: root.descriptionText
wrapMode: Text.WordWrap
visible: root.descriptionText !== ""
Layout.fillWidth: true
height: 16
}
}
MouseArea {
id: contentMouseArea
anchors.fill: content
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
// onEntered: {
// checkBoxBackground.color = hoveredColor
// }
// onExited: {
// checkBoxBackground.color = defaultColor
// }
// onPressedChanged: {
// indicator.source = pressed ? imageSource : ""
// imageColor.color = pressed ? hoveredImageColor : defaultImageColor
// checkBoxBackground.color = pressed ? pressedColor : entered ? hoveredColor : defaultColor
// }
// onClicked: {
// checkBox.checked = !checkBox.checked
// indicator.source = checkBox.checked ? imageSource : ""
// imageColor.color = checkBox.checked ? checkedImageColor : defaultImageColor
// imageBorder.border.color = checkBox.checked ? checkedBorderColor : defaultBorderColor
// }
}
}

View file

@ -30,7 +30,7 @@ PageBase {
spacing: 16
HeaderTextType {
HeaderType {
Layout.fillWidth: true
Layout.topMargin: 20

View file

@ -30,7 +30,7 @@ PageBase {
spacing: 16
HeaderTextType {
HeaderType {
Layout.fillWidth: true
Layout.topMargin: 20

View file

@ -49,7 +49,7 @@ PageBase {
spacing: 16
HeaderTextType {
HeaderType {
width: parent.width
buttonImage: "qrc:/images/controls/arrow-left.svg"

View file

@ -8,6 +8,7 @@ import "./"
import "../Pages"
import "../Controls2"
import "../Config"
import "../Controls2/TextTypes"
PageBase {
id: root
@ -99,6 +100,44 @@ PageBase {
qsTr("SHA1")
]
}
CheckBoxType {
// text: qsTr("Auto-negotiate encryption")
}
CheckBoxType {
text: qsTr("Auto-negotiate encryption")
descriptionText: "dssaa"
}
Rectangle {
implicitWidth: buttonGroup.implicitWidth
implicitHeight: buttonGroup.implicitHeight
Layout.leftMargin: 16
Layout.rightMargin: 16
color: "#1C1D21"
radius: 16
RowLayout {
id: buttonGroup
spacing: 0
HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2
text: "ddsasdasd"
}
HorizontalRadioButton {
implicitWidth: (root.width - 32) / 2
text: "ddsasdasd"
}
}
}
VerticalRadioButton {
text: "dsasd"
}
VerticalRadioButton {
text: "dsasd"
}
}
Drawer {