diff options
author | Zeno Albisser <zeno.albisser@nokia.com> | 2010-08-17 04:14:56 -0400 |
---|---|---|
committer | Zeno Albisser <zeno.albisser@nokia.com> | 2010-08-17 04:14:56 -0400 |
commit | 67fb52c95ff8925057cd4d1d86a9221af3482a22 (patch) | |
tree | 9a4be64560329771f3d562e08bcac24c2b76359c /multilayer-dashboard/Button.qml | |
parent | d60d1c109d07e5a820afce632a872c31c1a87565 (diff) |
integrated StrokeList into qml-dashboard
Diffstat (limited to 'multilayer-dashboard/Button.qml')
-rw-r--r-- | multilayer-dashboard/Button.qml | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/multilayer-dashboard/Button.qml b/multilayer-dashboard/Button.qml new file mode 100644 index 0000000..0277854 --- /dev/null +++ b/multilayer-dashboard/Button.qml @@ -0,0 +1,155 @@ +import Qt 4.7 +import Qt.labs.gestures 1.0 + +Rectangle { + id: button + + property string text : "Press me, Hold me, Strike me" + property int counter : 0 + property string bgColor: "steelblue" + property bool marked : false + + property bool enabled : state != "disabled" + + width: 160 + height: 40 + radius: 10 + + Rectangle { + id: background + anchors.fill: parent + radius: 10 + opacity: 0.3 + color: parent.bgColor + } + + Rectangle { + id: mark + x: 10 + y: 5 + width: 0 + height: 0 + radius: 30 + color: "black" + opacity: 1.0 + smooth: true + } + + function toggleMark() { + button.marked = !button.marked + if (button.marked) { + mark.width = 30 + mark.height = 30 + } else { + mark.width = 0 + mark.height = 0 + } + } + + function increaseCounter() { + counter = counter + 1 + } + + Text { + id: labelText + text: parent.text + (counter ? " "+counter : "") + anchors.centerIn: parent + } + + Rectangle { + id: stroke + + x: parent.width * 0.3 / 2 + anchors.verticalCenter: parent.verticalCenter + width: 0 + height : 10 + + color: "red" + opacity: 1.0 + } + + + states: [ + State { + name: "" + PropertyChanges { target: background; opacity: 0.3 } + PropertyChanges { target: labelText; opacity: 1.0 } + PropertyChanges { target: stroke; width: 0 } + }, + State { + name: "pressed" + PropertyChanges { target: background; opacity: 1.0 } + }, + State { + name: "disabled" + PropertyChanges { target: background; opacity: 0.3 } + PropertyChanges { target: mark; opacity: 0.3 } + PropertyChanges { target: labelText; opacity: 0.3 } + PropertyChanges { target: stroke; width: stroke.parent.width * 0.7 } + } + ] + transitions: [ + Transition { + from: "*" + to: "disabled" + PropertyAnimation { target: stroke; duration: 1000; property: "width" } + }, + Transition { + from: "disabled" + to: "" + PropertyAnimation { target: stroke; duration: 1000; property: "width" } + } + ] + + property bool handled: false + + function isHorizontalSwipe(angle) { + if (angle > 150 && angle < 210) + return true; + if (angle > 330 || angle < 30) + return true; + return false; + } + + GestureArea { + anchors.fill: parent + + Tap { + when: button.enabled + onStarted: { button.state = "pressed" } + onCanceled: { + if (!button.handled) { + button.state = ""; + } + } + onFinished: { + if (!button.handled) { + button.state = ""; + button.increaseCounter(); + } + button.handled = false; + } + } + + TapAndHold { + when: button.enabled + onFinished: { console.log("tap-and-hold"); button.toggleMark() } + } + + Swipe { + when: gesture.speed > 25 + onStarted: button.handled = true + onFinished: { + if (isHorizontalSwipe(gesture.swipeAngle)) { + if (gesture.horizontalDirection == SwipeGesture.Right) { + button.state = "disabled" + } else if (gesture.horizontalDirection == SwipeGesture.Left) { + script: button.state = "" + } + } + button.handled = false + } + } + } +} + |