added CheckBoxType
- added hover effect to LabelWithButtonType
This commit is contained in:
parent
167d57408d
commit
c74c5e0c6d
7 changed files with 133 additions and 10 deletions
|
@ -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"
|
||||
|
|
77
client/ui/qml/Controls2/CheckBoxType.qml
Normal file
77
client/ui/qml/Controls2/CheckBoxType.qml
Normal file
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue