diff options
Diffstat (limited to 'examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml')
-rw-r--r-- | examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml new file mode 100644 index 0000000..ad488c1 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml @@ -0,0 +1,80 @@ +<Rect id="removeButton" + width="30" height="30" + color="red" + radius="5"> + <properties> + <Property name="expandedWidth" value="230"/> + </properties> + <signals> + <Signal name="confirmed"/> + </signals> + <resources> + <Script> + function toggle() { + print('removeButton.toggle()'); + if (removeButton.state == 'opened') { + removeButton.state = ''; + contacts.mouseGrabbed=false; + } else { + if (!contacts.mouseGrabbed) { + removeButton.state = 'opened'; + contacts.mouseGrabbed=true; + } + } + } + </Script> + </resources> + <Image id="trashIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/trash.png" + opacity="1"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/cancel.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/ok.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle(); removeButton.confirmed.emit()"/> + </Image> + <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"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="opened" reversible="true"> + <NumericAnimation properties="opacity,x,width" duration="200"/> + </Transition> + </transitions> +</Rect> |