AZEN-SGG/amnezia-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added hover and pressed effects for CheckBoxType.qml

Browse source
This commit is contained in:
vladimir.kuznetsov 2023-04-10 06:43:36 +03:00
parent c74c5e0c6d
commit ec96c1b534
1 changed files with 50 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

54
client/ui/qml/Controls2/CheckBoxType.qml
View file

@ -1,10 +1,24 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
Item { Item {
id: root id: root
property string hoveredColor: Qt.rgba(255, 255, 255, 0.05)
property string defaultColor: "transparent"
property string pressedColor: Qt.rgba(255, 255, 255, 0.05)
property string defaultBorderColor: "#D7D8DB"
property string checkedBorderColor: "#FBB26A"
property string checkedImageColor: "#FBB26A"
property string hoveredImageColor: "#A85809"
property string defaultImageColor: "transparent"
property string imageSource: "qrc:/images/controls/check.svg"
implicitWidth: content.implicitWidth implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight implicitHeight: content.implicitHeight
@ -23,22 +37,35 @@ Item {
id: indicator id: indicator
anchors.verticalCenter: checkBox.verticalCenter anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter anchors.horizontalCenter: checkBox.horizontalCenter
source: checkBox.checked ? "qrc:/images/controls/check.svg" : "" ColorOverlay {
id: imageColor
anchors.fill: indicator
source: indicator
}
} }
Rectangle { Rectangle {
id: imageBorder
anchors.verticalCenter: checkBox.verticalCenter anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter anchors.horizontalCenter: checkBox.horizontalCenter
width: 24 width: 24
height: 24 height: 24
color: "transparent" color: "transparent"
border.color: "#FBB26A" border.color: checkBox.checked ? checkedBorderColor : defaultBorderColor
border.width: 1 border.width: 1
radius: 4 radius: 4
} }
background: Rectangle { background: Rectangle {
id: background id: checkBoxBackground
color: Qt.rgba(255, 255, 255, 0.05)
radius: 16 radius: 16
color: "transparent"
Behavior on color {
PropertyAnimation { duration: 200 }
}
} }
} }
@ -70,8 +97,27 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor 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: { onClicked: {
checkBox.checked = !checkBox.checked checkBox.checked = !checkBox.checked
indicator.source = checkBox.checked ? imageSource : ""
imageColor.color = checkBox.checked ? checkedImageColor : defaultImageColor
imageBorder.border.color = checkBox.checked ? checkedBorderColor : defaultBorderColor
} }
} }
} }