1 files changed, 128 insertions, 0 deletions
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
new file mode 100644
index 0000000..b57a95b
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
@@ -0,0 +1,128 @@
+Rect {
+    id: removeButton
+    width: 30
+    height: 30
+    color: "red"
+    radius: 5
+    properties: Property {
+        name: "expandedWidth"
+        value: 230
+    }
+    signals: Signal {
+        name: "confirmed"
+    }
+    resources: [
+//! [grab]
+        Script {
+            function toggle() {
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    contactDetails.mouseGrabbed=false;
+                } else {
+                    if (!contactDetails.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        contactDetails.mouseGrabbed=true;
+                    }
+                }
+            }
+        
+        }
+//! [grab]
+    ]
+    Image {
+        id: trashIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../shared/pics/trash.png"
+        opacity: 1
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { toggle() }
+        }
+    }
+    Image {
+        id: cancelIcon
+        width: 22
+        height: 22
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../shared/pics/cancel.png"
+        opacity: 0
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { toggle() }
+        }
+    }
+    Image {
+        id: confirmIcon
+        width: 22
+        height: 22
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        source: "../../shared/pics/ok.png"
+        opacity: 0
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { toggle(); removeButton.confirmed.emit() }
+        }
+    }
+    Text {
+        id: text
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: confirmIcon.right
+        anchors.leftMargin: 4
+        anchors.right: cancelIcon.left
+        anchors.rightMargin: 4
+        font.bold: true
+        color: "white"
+        hAlign: "AlignHCenter"
+        text: "Remove"
+        opacity: 0
+    }
+    states: [
+        State {
+            name: "opened"
+            SetProperty {
+                target: removeButton
+                property: "width"
+                value: removeButton.expandedWidth
+            }
+            SetProperty {
+                target: text
+                property: "opacity"
+                value: 1
+            }
+            SetProperty {
+                target: confirmIcon
+                property: "opacity"
+                value: 1
+            }
+            SetProperty {
+                target: cancelIcon
+                property: "opacity"
+                value: 1
+            }
+            SetProperty {
+                target: trashIcon
+                property: "opacity"
+                value: 0
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "opened"
+            reversible: true
+            NumericAnimation {
+                properties: "opacity,x,width"
+                duration: 200
+            }
+        }
+    ]
+}