added CheckBoxType

- added hover effect to LabelWithButtonType
This commit is contained in:
vladimir.kuznetsov 2023-04-07 20:50:55 +03:00
parent 167d57408d
commit c74c5e0c6d
7 changed files with 133 additions and 10 deletions

View file

@ -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"

View 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
}
}
}

View file

@ -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 {

View file

@ -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()
}
}
}