mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-09 10:09:05 +02:00
button glow on hover
This commit is contained in:
parent
ad905ac6dc
commit
5b8e80654d
2 changed files with 47 additions and 9 deletions
|
@ -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: {
|
||||||
|
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue