button glow on hover

This commit is contained in:
Faye Li 2016-12-13 16:01:50 -08:00
parent ad905ac6dc
commit 5b8e80654d
2 changed files with 47 additions and 9 deletions

View file

@ -61,10 +61,13 @@ Item {
onEntered: { onEntered: {
console.log("Mute Botton Hovered!"); console.log("Mute Botton Hovered!");
parent.color = "#2d2d2d"; parent.color = "#2d2d2d";
parent.border.width = 2;
parent.border.color = "#ffffff";
} }
onExited: { onExited: {
console.log("Mute Botton Unhovered!"); console.log("Mute Botton Unhovered!");
parent.color = "#464646"; parent.color = "#464646";
parent.border.width = 0;
} }
onClicked: { onClicked: {

View file

@ -12,6 +12,8 @@ Item {
Rectangle { Rectangle {
id: buttonBg id: buttonBg
color: tabletButton.color color: tabletButton.color
border.width: 0
border.color: "#00000000"
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 0 anchors.rightMargin: 0
anchors.left: parent.left anchors.left: parent.left
@ -20,15 +22,6 @@ Item {
anchors.bottomMargin: 0 anchors.bottomMargin: 0
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 0 anchors.topMargin: 0
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 3
color: "#aa000000"
radius: 20
samples: 41
}
} }
Image { Image {
@ -53,6 +46,48 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
DropShadow {
id: dropshadow
anchors.fill: parent
horizontalOffset: 0
verticalOffset: 3
color: "#aa000000"
radius: 20
z: -1
samples: 41
source: buttonBg
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
console.log("Tablet Button Hovered!");
tabletButton.state = "hover state";
}
onExited: {
console.log("Tablet Button Unhovered!");
tabletButton.state = "base state";
}
}
states: [
State {
name: "hover state"
PropertyChanges {
target: buttonBg
border.width: 2
border.color: "#ffffff"
}
PropertyChanges {
target: dropshadow
verticalOffset: 0
color: "#ffffff"
}
}
]
} }