added SwitcherType and TabButtonType
- change CheckBoxType root type - added PageTest
This commit is contained in:
vladimir.kuznetsov
parent
cfc17cf290
commit
c7acd63ea7
9 changed files with 492 additions and 280 deletions
|
|
@ -3,10 +3,9 @@ import QtQuick.Controls
|
|||
import QtQuick.Layouts
|
||||
import Qt5Compat.GraphicalEffects
|
||||
|
||||
Item {
|
||||
CheckBox {
|
||||
id: root
|
||||
|
||||
property string text
|
||||
property string descriptionText
|
||||
|
||||
property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
|
||||
|
|
@ -22,107 +21,87 @@ Item {
|
|||
|
||||
property string imageSource: "qrc:/images/controls/check.svg"
|
||||
|
||||
implicitWidth: content.implicitWidth
|
||||
implicitHeight: content.implicitHeight
|
||||
hoverEnabled: true
|
||||
|
||||
RowLayout {
|
||||
id: content
|
||||
indicator: Rectangle {
|
||||
id: checkBoxBackground
|
||||
|
||||
anchors.fill: parent
|
||||
implicitWidth: 56
|
||||
implicitHeight: 56
|
||||
radius: 16
|
||||
|
||||
CheckBox {
|
||||
id: checkBox
|
||||
color: {
|
||||
if (root.hovered) {
|
||||
return hoveredColor
|
||||
}
|
||||
return defaultColor
|
||||
}
|
||||
|
||||
implicitWidth: 56
|
||||
implicitHeight: 56
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
|
||||
indicator: Image {
|
||||
Rectangle {
|
||||
id: imageBorder
|
||||
|
||||
anchors.centerIn: parent
|
||||
width: 24
|
||||
height: 24
|
||||
color: "transparent"
|
||||
border.color: root.checked ? checkedBorderColor : defaultBorderColor
|
||||
border.width: 1
|
||||
radius: 4
|
||||
|
||||
Image {
|
||||
id: indicator
|
||||
anchors.verticalCenter: checkBox.verticalCenter
|
||||
anchors.horizontalCenter: checkBox.horizontalCenter
|
||||
anchors.centerIn: parent
|
||||
|
||||
source: root.pressed ? imageSource : root.checked ? imageSource : ""
|
||||
|
||||
ColorOverlay {
|
||||
id: imageColor
|
||||
anchors.fill: indicator
|
||||
source: indicator
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: imageBorder
|
||||
|
||||
anchors.verticalCenter: checkBox.verticalCenter
|
||||
anchors.horizontalCenter: checkBox.horizontalCenter
|
||||
width: 24
|
||||
height: 24
|
||||
color: "transparent"
|
||||
border.color: checkBox.checked ? checkedBorderColor : defaultBorderColor
|
||||
border.width: 1
|
||||
radius: 4
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: checkBoxBackground
|
||||
radius: 16
|
||||
|
||||
color: "transparent"
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
color: root.pressed ? pressedImageColor : root.checked ? checkedImageColor : defaultImageColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Text {
|
||||
text: root.text
|
||||
color: "#D7D8DB"
|
||||
font.pixelSize: 18
|
||||
font.weight: 400
|
||||
font.family: "PT Root UI VF"
|
||||
contentItem: ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 8 + checkBoxBackground.width
|
||||
|
||||
height: 22
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Text {
|
||||
text: root.text
|
||||
color: "#D7D8DB"
|
||||
font.pixelSize: 18
|
||||
font.weight: 400
|
||||
font.family: "PT Root UI VF"
|
||||
|
||||
Text {
|
||||
text: root.descriptionText
|
||||
color: "#878b91"
|
||||
font.pixelSize: 13
|
||||
font.weight: 400
|
||||
font.family: "PT Root UI VF"
|
||||
font.letterSpacing: 0.02
|
||||
height: 22
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
height: 16
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Text {
|
||||
text: root.descriptionText
|
||||
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
|
||||
hoverEnabled: true
|
||||
|
||||
onEntered: {
|
||||
checkBoxBackground.color = hoveredColor
|
||||
}
|
||||
|
||||
onExited: {
|
||||
checkBoxBackground.color = defaultColor
|
||||
}
|
||||
|
||||
onPressedChanged: {
|
||||
indicator.source = pressed ? imageSource : checkBox.checked ? imageSource : ""
|
||||
imageColor.color = pressed ? pressedImageColor : checkBox.checked ? checkedImageColor : 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
|
||||
}
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@ Item {
|
|||
|
||||
image: root.buttonImage
|
||||
imageColor: "#D7D8DB"
|
||||
|
||||
visible: image ? true : false
|
||||
|
||||
onClicked: {
|
||||
UiLogic.closePage()
|
||||
}
|
||||
|
|
@ -58,6 +61,7 @@ Item {
|
|||
wrapMode: Text.WordWrap
|
||||
|
||||
height: 24
|
||||
Layout.topMargin: 16
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
83
client/ui/qml/Controls2/SwitcherType.qml
Normal file
83
client/ui/qml/Controls2/SwitcherType.qml
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
|
||||
Switch {
|
||||
id: root
|
||||
|
||||
property string checkedIndicatorColor: "#412102"
|
||||
property string defaultIndicatorColor: "transparent"
|
||||
property string checkedIndicatorBorderColor: "#412102"
|
||||
property string defaultIndicatorBorderColor: "#494B50"
|
||||
|
||||
property string checkedInnerCircleColor: "#FBB26A"
|
||||
property string defaultInnerCircleColor: "#D7D8DB"
|
||||
|
||||
property string hoveredIndicatorBackgroundColor: Qt.rgba(1, 1, 1, 0.08)
|
||||
property string defaultIndicatorBackgroundColor: "transparent"
|
||||
|
||||
indicator: Rectangle {
|
||||
implicitWidth: 52
|
||||
implicitHeight: 32
|
||||
x: content.width - width
|
||||
radius: 16
|
||||
color: root.checked ? checkedIndicatorColor : defaultIndicatorColor
|
||||
border.color: root.checked ? checkedIndicatorBorderColor : defaultIndicatorBorderColor
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
Behavior on border.color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: innerCircle
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
x: root.checked ? parent.width - width - 4 : 8
|
||||
width: root.checked ? 24 : 16
|
||||
height: root.checked ? 24 : 16
|
||||
radius: 23
|
||||
color: root.checked ? checkedInnerCircleColor : defaultInnerCircleColor
|
||||
|
||||
Behavior on x {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: innerCircle
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 23
|
||||
color: hovered ? hoveredIndicatorBackgroundColor : defaultIndicatorBackgroundColor
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
id: content
|
||||
|
||||
Text {
|
||||
text: root.text
|
||||
color: "#D7D8DB"
|
||||
font.pixelSize: 18
|
||||
font.weight: 400
|
||||
font.family: "PT Root UI VF"
|
||||
|
||||
height: 22
|
||||
Layout.fillWidth: true
|
||||
Layout.bottomMargin: 16
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
56
client/ui/qml/Controls2/TabButtonType.qml
Normal file
56
client/ui/qml/Controls2/TabButtonType.qml
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
|
||||
TabButton {
|
||||
id: root
|
||||
|
||||
property string hoveredColor: "#412102"
|
||||
property string defaultColor: "#2C2D30"
|
||||
property string selectedColor: "#FBB26A"
|
||||
|
||||
property string textColor: "#D7D8DB"
|
||||
|
||||
property bool isSelected: false
|
||||
|
||||
implicitHeight: 48
|
||||
|
||||
hoverEnabled: true
|
||||
|
||||
background: Rectangle {
|
||||
id: background
|
||||
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1
|
||||
y: parent.height - height
|
||||
color: {
|
||||
if(root.isSelected) {
|
||||
return selectedColor
|
||||
}
|
||||
return hovered ? hoveredColor : defaultColor
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
PropertyAnimation { duration: 200 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Text {
|
||||
anchors.fill: background
|
||||
height: 24
|
||||
|
||||
font.family: "PT Root UI"
|
||||
font.styleName: "normal"
|
||||
font.weight: 500
|
||||
font.pixelSize: 16
|
||||
color: textColor
|
||||
text: root.text
|
||||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
|
@ -26,9 +26,6 @@ RadioButton {
|
|||
|
||||
property string defaultInnerCircleColor: "#FBB26A"
|
||||
|
||||
implicitWidth: background.implicitWidth + content.implicitWidth
|
||||
implicitHeight: background.implicitWidth
|
||||
|
||||
hoverEnabled: true
|
||||
|
||||
indicator: Rectangle {
|
||||
|
|
@ -121,14 +118,10 @@ RadioButton {
|
|||
}
|
||||
}
|
||||
|
||||
contentItem: Item {}
|
||||
|
||||
ColumnLayout {
|
||||
contentItem: ColumnLayout {
|
||||
id: content
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 8 + background.width
|
||||
anchors.topMargin: 4
|
||||
anchors.bottomMargin: 4
|
||||
|
||||
Text {
|
||||
text: root.text
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue