overte/interface/resources/qml/hifi/tablet/TabletButton.qml
2016-12-13 16:04:25 -08:00

93 lines
2.1 KiB
QML

import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
id: tabletButton
property string color: "#1080B8"
property string text: "EDIT"
property string icon: "icons/edit-icon.svg"
width: 132
height: 132
Rectangle {
id: buttonBg
color: tabletButton.color
border.width: 0
border.color: "#00000000"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
Image {
id: icon
width: 60
height: 60
anchors.bottom: text.top
anchors.bottomMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.Stretch
source: "../../../" + tabletButton.icon
}
Text {
id: text
color: "#ffffff"
text: tabletButton.text
font.bold: true
font.pixelSize: 18
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
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"
}
}
]
}