modifications to searchbox example

2 files changed, 24 insertions, 11 deletions

diff --git a/examples/declarative/searchbox/SearchBox.qml b/examples/declarative/searchbox/SearchBox.qml
index 90d4367..7077a11 100644
--- a/examples/declarative/searchbox/SearchBox.qml
+++ b/examples/declarative/searchbox/SearchBox.qml
@@ -7,41 +7,54 @@ FocusScope {
     BorderImage {
         source: "images/lineedit-bg.png"
         width: parent.width; height: parent.height
-        border.left: 4; border.top: 4; border.right: 4; border.bottom: 4
+        border { left: 4; top: 4; right: 4; bottom: 4 }
     }
 
     BorderImage {
         source: "images/lineedit-bg-focus.png"
         width: parent.width; height: parent.height
-        border.left: 4; border.top: 4; border.right: 4; border.bottom: 4
+        border { left: 4; top: 4; right: 4; bottom: 4 }
         visible: parent.wantsFocus ? true : false
     }
 
     Text {
-        anchors.fill: parent; anchors.leftMargin: 8
+        id: typeSomething; anchors.fill: parent; anchors.leftMargin: 8
         verticalAlignment: Text.AlignVCenter
         text: "Type something..."; color: "gray"; font.italic: true
-        opacity: textInput.text == "" ? 1 : 0
-        //opacity: Behavior { NumberAnimation { duration: 200 } }
     }
 
     MouseRegion { anchors.fill: parent; onClicked: focusScope.focus = true }
 
-
     TextInput {
         id: textInput
         anchors.left: parent.left; anchors.leftMargin: 8
-        //anchors.right: clear.left
         anchors.verticalCenter: parent.verticalCenter
-        focus: if(1) true
+        focus: if (1) true
     }
+
     Image {
         id: clear
         anchors.right: parent.right; anchors.rightMargin: 8
         anchors.verticalCenter: parent.verticalCenter
-        source: "images/edit-clear-locationbar-rtl.png"
-        opacity: textInput.text == "" ? 0 : 1
-        //opacity: Behavior { NumberAnimation { duration: 200 } }
+        source: "images/edit-clear-locationbar-rtl.png"; opacity: 0
+
         MouseRegion { anchors.fill: parent; onClicked: { textInput.text = ''; focusScope.focus = true } }
     }
+
+    states: State {
+        name: "hasText"; when: textInput.text != ''
+        PropertyChanges { target: typeSomething; opacity: 0 }
+        PropertyChanges { target: clear; opacity: 1 }
+    }
+
+    transitions: [
+        Transition {
+            from: ""; to: "hasText"
+            NumberAnimation { exclude: typeSomething; properties: "opacity" }
+        },
+        Transition {
+            from: "hasText"; to: ""
+            NumberAnimation { properties: "opacity" }
+        }
+    ]
 }
diff --git a/examples/declarative/searchbox/images/edit-clear-locationbar-rtl.png b/examples/declarative/searchbox/images/edit-clear-locationbar-rtl.png
index 45ae477..91eb270 100644
--- a/examples/declarative/searchbox/images/edit-clear-locationbar-rtl.png
+++ b/examples/declarative/searchbox/images/edit-clear-locationbar-rtl.png