hover states

This commit is contained in:
howard-stearns 2016-07-01 12:18:26 -07:00
parent 43c7fd1e27
commit 02cc6cc567

View file

@ -8,6 +8,7 @@ Item {
property var subImage;
property int yOffset: 0
property int buttonState: 0
property int hoverOffset: 0
property var toolbar;
property real size: 50 // toolbar ? toolbar.buttonSize : 50
width: size; height: size
@ -36,9 +37,15 @@ Item {
}
}
function updateOffset() {
yOffset = size * (buttonState + hoverOffset);
}
onButtonStateChanged: {
yOffset = size * buttonState
hoverOffset = 0; // subtle: show the new state without hover. don't wait for mouse to be moved away
// The above is per UX design, but ALSO avoid a subtle issue that would be a problem because
// the hand controllers don't move the mouse when not triggered, so releasing the trigger would
// never show unhovered.
updateOffset();
}
Component.onCompleted: {
@ -58,8 +65,18 @@ Item {
}
MouseArea {
id: mouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: button.clicked();
onEntered: {
hoverOffset = 2;
updateOffset();
}
onExited: {
hoverOffset = 0;
updateOffset();
}
}
}