added HorizontalRadioButton and VerticalRadioButton components
This commit is contained in:
parent
a9ebf534c6
commit
904e173037
12 changed files with 330 additions and 8 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -2,6 +2,8 @@ import QtQuick
|
|||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
|
||||
import "TextTypes"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
|
|
95
client/ui/qml/Controls2/HorizontalRadioButton.qml
Normal file
95
client/ui/qml/Controls2/HorizontalRadioButton.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
180
client/ui/qml/Controls2/VerticalRadioButton.qml
Normal file
180
client/ui/qml/Controls2/VerticalRadioButton.qml
Normal 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
|
||||
// }
|
||||
}
|
||||
}
|
|
@ -30,7 +30,7 @@ PageBase {
|
|||
|
||||
spacing: 16
|
||||
|
||||
HeaderTextType {
|
||||
HeaderType {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@ PageBase {
|
|||
|
||||
spacing: 16
|
||||
|
||||
HeaderTextType {
|
||||
HeaderType {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
|
||||
|
|
|
@ -49,7 +49,7 @@ PageBase {
|
|||
|
||||
spacing: 16
|
||||
|
||||
HeaderTextType {
|
||||
HeaderType {
|
||||
width: parent.width
|
||||
buttonImage: "qrc:/images/controls/arrow-left.svg"
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue