diff -r 453da2cfceef -r 71781823f776 qtmobility/examples/qmlcontacts/example.qml
--- a/qtmobility/examples/qmlcontacts/example.qml	Fri May 14 16:41:33 2010 +0300
+++ b/qtmobility/examples/qmlcontacts/example.qml	Thu May 27 13:42:11 2010 +0300
@@ -19,30 +19,18 @@
             if(c == undefined){
                 return;
             }
-/*
-            print("Got contacts: " + c.name);
-            print(" Available actions: " + c.availableActions);
-            print(" details: " + c.details);detailsOpacity
-*/
-            var o = c.values("OnlineAccount");
+
             var q = c.values("Presence");
 
-            nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email, "avatarSource": "qrc:/default.svg"});
+            nameModel.append({"name": c.name,
+                                "presence": "Status: " + q.Presence,
+                                "email": c.email,
+                                "avatarSource": c.avatar ? c.avatar : "qrc:/default.svg",
+                                "hasThumbnail" : c.hasThumbnail,
+                                "avatarImage": c.thumbnail,
+                                "interestLabel" : c.interestLabel,
+                                "interest" : c.interest});
 
-/*
-            var j;
-            for(j in c.details){                
-                var o = c.values(c.details[j]);
-                var i;
-                for(i in o){
-                    print(" "+ c.details[j] + "/" + i + ": " + o[i]);
-                }
-            }
-*/
-
-        }
-        function clickedList(index) {
-            mainList.currentIndex = index;
         }
     }
 
@@ -62,7 +50,8 @@
         Rectangle {
             id: wrapper            
             border.width: 2
-            height: 30;
+            height: mainLabel.height;
+            width: mainList.width;
 
             property color topColor: "#333333";
             property color bottomColor: "#111111";
@@ -71,88 +60,61 @@
             gradient: Gradient {
                  GradientStop { position: 0.0; color: topColor }
                  GradientStop { position: 1.0; color: bottomColor }
-             }
-
-            Item {
-                id: mainAvatar;
-                anchors.left: parent.left;
-                anchors.top: parent.top;
-                width: avatarFrame.width;
-                height: avatarFrame.height;
-                anchors.leftMargin:4;
-
-                Rectangle {
-                    id: avatarFrame;
-                    border.width: 2;
-                    radius: 4;
-                    height: wrapper.height-6
-                    width: height;
-                    x: 3; y: 3;
-                }
-
-                Image {
-                    id: avatar
-                    anchors.fill: avatarFrame;
-                    anchors.leftMargin: 3;
-                    anchors.rightMargin: 3;
-                    anchors.topMargin: 3;
-                    anchors.bottomMargin: 3;
-
-                    source: avatarSource
-                    fillMode: Image.PreserveAspectFit
-                }
             }
 
-            Item {
-                id: mainLabel;
-                height: nameTxt.height + 16;
-                property real contactId: 0;
-                anchors.left: mainAvatar.right;
-                anchors.right: parent.right;
-                anchors.leftMargin:8;
-                anchors.rightMargin: 4;
-                anchors.topMargin: 4;
-                anchors.bottomMargin: 4;
+            Row {
+                spacing: 2
+                Item {
+                    id: mainAvatar;
+                    height: wrapper.height;
+                    width: height;
 
-                Text {
-                    x:8; y:8;
-                    anchors.left: parent.left;
-                    anchors.right: parent.right;
-                    id: nameTxt
-                    text: name
-                    color: "white";
-                }
-            }
+                    Rectangle {
+                        border.width: 2;
+                        radius: 4;
+                        anchors.fill: parent;
+                        anchors.margins: 3;
 
-            Item {
-                id: details
-                property color textColor: "#ffffdd";
-                anchors.top: mainLabel.bottom;
-                anchors.bottom: parent.bottom;
-                anchors.left: mainAvatar.right;
-                anchors.right: parent.right;
-                anchors.leftMargin:8;
-                anchors.rightMargin: 4;
-                anchors.bottomMargin: 4;
-                opacity: wrapper.detailsOpacity
+                        Image {
+                            id: avatar
+                            anchors.fill: parent;
+                            anchors.margins: 3;
+
+                            pixmap: avatarImage
+                            source: hasThumbnail ? "" : avatarSource;
+                            fillMode: Image.PreserveAspectFit
+                        }
+                    }
+                }
 
                 Column {
-                    Text {
-                        id: emailId
-                        text: email
-                        color: details.textColor;
-                    }
-                    Row {
-                        spacing: 5
+                    Item {
+                        id: mainLabel;
+                        width: nameTxt.width
+                        height: nameTxt.height + 16;
                         Text {
-                            id: accountPathId
-                            text: accountPath
-                            color: details.textColor;
+                            id: nameTxt
+                            y: 8;
+                            text: name
+                            color: "white";
                         }
-                        Text {
-                            id: presenceId
-                            text: presence
-                            color: details.textColor;
+                    }
+
+                    Item {
+                        id: details
+                        property color textColor: "#ffffdd";
+                        opacity: wrapper.detailsOpacity
+                        height: childrenRect.height + 6;
+                        width: childrenRect.width;
+                        Column {
+                            Text {
+                                text: interestLabel + interest
+                                color: details.textColor;
+                            }
+                            Text {
+                                text: presence
+                                color: details.textColor;
+                            }
                         }
                     }
                 }
@@ -160,51 +122,53 @@
 
             states: State {
                 name: "Details"
+                when: wrapper.ListView.isCurrentItem;
                 PropertyChanges { target: wrapper; detailsOpacity: 1; }
-                PropertyChanges { target: wrapper; topColor: "#666666"; }
-                PropertyChanges { target: wrapper; bottomColor: "#222222"; }
-                PropertyChanges { target: wrapper; height: mainLabel.height + emailId.height + accountPathId.height + presenceId.height; }
+                PropertyChanges { target: wrapper; topColor: "#999999"; }
+                PropertyChanges { target: wrapper; bottomColor: "#444444"; }
+                PropertyChanges { target: wrapper; height: mainLabel.height + details.height + 4; }
             }
 
-            transitions: Transition {
-                from: ""
-                to: "Details"
-                reversible: true
-                ParallelAnimation {
-                    ColorAnimation { duration: 150; properties: "topColor, bottomColor";}
-                    NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
+            transitions:  [
+                Transition {
+                    from: ""
+                    to: "Details"
+                    reversible: false
+                    SequentialAnimation {
+                        NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
+                        ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
+                    }
+                },
+                Transition {
+                    to: ""
+                    from: "Details"
+                    reversible: false
+                    SequentialAnimation {
+                        NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
+                        ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
+                    }
                 }
-            }
+            ]
             MouseArea {
                 id: mr
                 width: topItem.width;
                 height: wrapper.height;
                 anchors.centerIn: parent;
-                onClicked: wrapper.state == "" ? wrapper.state = "Details" :  wrapper.state = "";
+                onClicked: mainList.currentIndex = index;
             }
         }
     }
 
-    Component {
-        id: listhighlight
-        Rectangle {
-            width: parent.width-8
-            height: 40
-            color: "lightsteelblue"
-            radius: 5
-        }
-    }
-
     ListView {
         id: mainList
         model: nameModel
         width: parent.width; height: parent.height
         delegate: listdelegate
-        highlight: listhighlight
-        highlightFollowsCurrentItem: true
+        highlightFollowsCurrentItem: false
         focus: true
         anchors.fill: parent
         highlightMoveSpeed: 5000
+        keyNavigationWraps: true
     }
 
     ListModel {
@@ -233,6 +197,4 @@
     }
 }
 
-
-
 // ![0]