diff options
Diffstat (limited to 'examples/sensors/maze/Button.qml')
-rw-r--r-- | examples/sensors/maze/Button.qml | 82 |
1 files changed, 14 insertions, 68 deletions
diff --git a/examples/sensors/maze/Button.qml b/examples/sensors/maze/Button.qml index 96ed2d7..2ae8f77 100644 --- a/examples/sensors/maze/Button.qml +++ b/examples/sensors/maze/Button.qml @@ -45,85 +45,31 @@ import QtQuick 2.0 Item { id: button width: 30 - height: 30 - property alias buttonText: innerText.text; - property color color: "white" - property color hoverColor: "#aaaaaa" - property color pressColor: "slategray" - property int fontSize: 10 - property int borderWidth: 1 - property int borderRadius: 2 - scale: state === "Pressed" ? 0.96 : 1.0 - onEnabledChanged: state = "" + height: 100 + property alias text: innerText.text signal clicked - //define a scale animation - Behavior on scale { - NumberAnimation { - duration: 100 - easing.type: Easing.InOutQuad - } - } - - //Rectangle to draw the button - Rectangle { - id: rectangleButton + Image { + id: backgroundImage anchors.fill: parent - radius: borderRadius - color: button.enabled ? button.color : "grey" - border.width: borderWidth - border.color: "black" - - Text { - id: innerText - font.pointSize: fontSize - anchors.centerIn: parent - } + source: (button.enabled ? "images/button_background_normal.png" : "images/button_background_disabled.png") } - //change the color of the button in differen button states - states: [ - State { - name: "Hovering" - PropertyChanges { - target: rectangleButton - color: hoverColor - } - }, - State { - name: "Pressed" - PropertyChanges { - target: rectangleButton - color: pressColor - } - } - ] - - //define transmission for the states - transitions: [ - Transition { - from: ""; to: "Hovering" - ColorAnimation { duration: 200 } - }, - Transition { - from: "*"; to: "Pressed" - ColorAnimation { duration: 10 } - } - ] + Text { + id: innerText + anchors.centerIn: parent + color: "white" + font.bold: true + } //Mouse area to react on click events MouseArea { - hoverEnabled: true anchors.fill: button - onEntered: { button.state='Hovering'} - onExited: { button.state=''} onClicked: { button.clicked();} - onPressed: { button.state="Pressed" } + onPressed: { + backgroundImage.source = "images/button_background_pressed.png" } onReleased: { - if (containsMouse) - button.state="Hovering"; - else - button.state=""; + backgroundImage.source = (button.enabled ? "images/button_background_normal.png" : "images/button_background_disabled.png") } } } |