Merge commit 'upstream/1.1' into 1.1.0

Conflicts:
	examples/declarative-location/flickr/flickr-90.qml
	examples/declarative-location/flickr/flickr.qml
	examples/declarative-location/flickr/flickrcommon/Progress.qml
	examples/declarative-location/flickr/flickrcommon/RestModel.qml
	examples/declarative-location/flickr/flickrcommon/ScrollBar.qml
	examples/declarative-location/flickr/flickrcommon/Slider.qml
	examples/declarative-location/flickr/flickrmobile/Button.qml
	examples/declarative-location/flickr/flickrmobile/GeoTab.qml
	examples/declarative-location/flickr/flickrmobile/GridDelegate.qml
	examples/declarative-location/flickr/flickrmobile/ImageDetails.qml
	examples/declarative-location/flickr/flickrmobile/ListDelegate.qml
	examples/declarative-location/flickr/flickrmobile/TitleBar.qml
	examples/declarative-location/flickr/flickrmobile/ToolBar.qml
	examples/declarative-location/flickr/qmllocationflickr.cpp
	examples/declarative-location/landmarkmap/landmarkmap.qml
	examples/declarative-location/landmarkmap/landmarkmapcommon/ScrollBar.qml
	examples/declarative-location/landmarkmap/landmarkmapcommon/Slider.qml
	examples/declarative-location/landmarkmap/landmarkmapmobile/Button.qml
	examples/declarative-location/landmarkmap/landmarkmapmobile/Floater.qml
	examples/declarative-location/landmarkmap/landmarkmapmobile/ListDelegate.qml
	examples/declarative-location/landmarkmap/landmarkmapmobile/StatusBar.qml
	examples/declarative-location/landmarkmap/landmarkmapmobile/TitleBar.qml
	examples/declarative-location/landmarkmap/landmarkmapmobile/ToolBar.qml
	examples/declarative-location/landmarkmap/qmllandmarkmap.cpp
	examples/declarative-location/mapviewer/mapviewer.qml
	examples/declarative-location/mapviewer/qmlmapviewer.cpp
	plugins/contacts/symbian/plugin/src/filtering/cntfilterdetaildisplaylabel.cpp

19 files changed, 668 insertions, 643 deletions

diff --git a/demos/qmlcontacts/contacts-90.qml b/demos/qmlcontacts/contacts-90.qml
new file mode 100644
index 0000000000..994fbf6709
--- /dev/null
+++ b/demos/qmlcontacts/contacts-90.qml
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt 4.7
+
+Item {
+    width: 640; height: 360
+
+    Loader {
+        y: 360; rotation: -90
+        transformOrigin: Item.TopLeft
+        source: "contacts.qml"
+    }
+}
+
diff --git a/demos/qmlcontacts/contacts-vcard.qml b/demos/qmlcontacts/contacts-vcard.qml
deleted file mode 100644
index 02902769d6..0000000000
--- a/demos/qmlcontacts/contacts-vcard.qml
+++ /dev/null
@@ -1,372 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the Qt Mobility Components.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-**     the names of its contributors may be used to endorse or promote
-**     products derived from this software without specific prior written
-**     permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import Qt 4.7
-import QtMobility.contacts 1.1
-import "contents"
-
-Rectangle {
-    id: topItem
-    width: 360
-    height: 640
-    x: 0
-    y: 0
-
-    color: "#080808";
-
-    ContactModel {
-        id: contactModel 
-        manager: "memory"
-        Component.onCompleted : {
-            contactModel.importContacts("contents/example.vcf");
-        }
-
-    }
-
-    Component {
-        id: listdelegate
-
-        Rectangle {
-            id: wrapper            
-            border.width: 2
-            height: 36;
-            width: mainList.width;
-
-            property color topColor: "#999999";
-            property color bottomColor: "#444444";
-            property real detailsOpacity: 1
-            property int littleDetailsMode: 0;
-            property int bigDetailsMode: 0;
-
-            gradient: Gradient {
-                 GradientStop { position: 0.0; color: topColor }
-                 GradientStop { position: 1.0; color: bottomColor }
-            }
-
-            MouseArea {
-                id: mr
-                width: topItem.width;
-                height: wrapper.height;
-                anchors.centerIn: parent;
-                onClicked: { littleDetailsMode = !littleDetailsMode; mainList.currentIndex = index; }
-            }
-            Column {
-                Row {
-                    spacing: 2
-                    Item {
-                        id: mainAvatar;
-                        height: wrapper.height;
-                        width: height;
-
-                        Rectangle {
-                            border.width: 2;
-                            radius: 4;
-                            anchors.fill: parent;
-                            anchors.margins: 2;
-
-                            Image {
-                                id: avatar
-                                anchors.fill: parent;
-                                anchors.margins: 2;
-
-                                source: model.avatar;
-                                fillMode: Image.PreserveAspectFit
-                            }
-                            Image {
-                                anchors.fill: parent;
-                                anchors.margins: 2;
-                                source: "contents/default.svg";
-                                opacity: avatar.status == Image.Ready ? 0 : 1;
-                            }
-                        }
-                    }
-
-                    Column {
-                        Item {
-                            id: mainLabel;
-                            width: nameTxt.width
-                            height: nameTxt.height + 16;
-                            Text {
-                                id: nameTxt
-                                y: 8;
-                                text: model.display
-                                color: "white"
-                            }
-                        }
-
-                        Item {
-                            id: details
-                            property color textColor: "#ffffdd";
-                            opacity: wrapper.detailsOpacity
-                            height: childrenRect.height + 6;
-                            width: childrenRect.width;
-
-                            Column {
-                                Text {
-                                    text: model.interestLabel + ": " + model.interest
-                                    color: details.textColor;
-                                }
-                                Text {
-                                    text: model.presenceAvailable ? model.presenceText + " [" + model.presenceMessage + "]" : " ";
-                                    color: details.textColor;
-                                }
-                            }
-                        }
-                    }
-
-                    Item {
-                        id: buttonBox
-                        x: wrapper.width - 6 - childrenRect.width;
-                        y: 4;
-                        height:childrenRect.height
-                        opacity: details.opacity;
-                        Column {
-                            // Buttons
-                            MediaButton {
-                                id: dialButton;
-                                text: "Dial";
-                            }
-                            MediaButton {
-                                id: textButton
-                                text: "Send Text";
-                            }
-                            Item {
-                                height:childrenRect.height
-                                width: childrenRect.width
-                                MediaButton {
-                                    id: viewButton
-                                    text: "More..."
-                                    opacity: 0;
-                                    onClicked: wrapper.bigDetailsMode = 1;
-                                }
-                                MediaButton {
-                                    id: smallAgainButton
-                                    text: "Back";
-                                    anchors.top:viewButton.top;
-                                    opacity: 0;
-                                    onClicked: wrapper.bigDetailsMode = 0;
-                                }
-                            }
-                        }
-                    }
-                }
-                ListView {
-                    id: detailView
-                    snapMode:ListView.SnapToItem
-                    width: wrapper.width;
-                    focus: true
-                    opacity: 0
-                    keyNavigationWraps: true
-
-
-                    model:contact.details
-                    delegate: Component {
-                        Item {
-                            width: detailView.width;
-                            height:100;
-
-
-                            Column {
-                                spacing: 5
-                                Text {
-                                   text:  definitionName;
-                                   color:"white";
-                                   width: detailView.width;
-                                   height: 20;
-                                }
-                                ListView {
-                                    id:fieldView
-                                    snapMode:ListView.SnapToItem
-                                    width: detailView.width;
-                                    height: 40
-
-                                    model: fieldNames
-                                    property ContactDetail detail: modelData
-
-                                    delegate: Item {
-                                        height: parent.height
-                                        width: parent.width
-                                        Row {
-                                            Text {
-                                                text: modelData
-                                                width: detailView.width * 0.5;
-                                                height: 20;
-                                            }
-                                            TextEdit {
-                                               width: detailView.width * 0.5;
-                                               height: 20;
-                                               text:fieldView.detail.value(modelData).toString();
-                                               color:"yellow";
-                                               //onTextChanged: {field.value = text;}
-                                            }
-                                        } //row
-                                    } //delegate
-                                }
-                            }
-                        }
-                    }//delegate
-                }//detail list view
-            }
-            states: [
-                    State {
-                        name: "List";
-                        when: mainList.currentIndex != index || wrapper.littleDetailsMode == 0
-                        PropertyChanges { target: wrapper; detailsOpacity: 0; }
-                        PropertyChanges { target: wrapper; topColor: "#333333"; }
-                        PropertyChanges { target: wrapper; bottomColor: "#111111"; }
-                        PropertyChanges { target: buttonBox; x: wrapper.width + 6; }
-                        PropertyChanges { target: detailView; opacity:0 }
-                    },
-                    State {
-                        name: "MiniDetails"
-                        when: (mainList.currentIndex == index) && (wrapper.littleDetailsMode == 1) && (wrapper.bigDetailsMode == 0);
-                        PropertyChanges { target: viewButton; opacity: 1; }
-                        PropertyChanges { target: smallAgainButton; opacity: 0; }
-                        PropertyChanges { target: wrapper; height: Math.max(mainLabel.height + details.height + 4, buttonBox.height + 8); }
-                        PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y } // XXX I don't think this should be here
-                        PropertyChanges { target: detailView; opacity:0 }
-                    },
-                    State {
-                        name: "Details"
-                        when: (mainList.currentIndex == index) && (wrapper.bigDetailsMode == 1);
-                        PropertyChanges { target: wrapper; height: mainList.height; }
-                        PropertyChanges { target: viewButton; opacity: 0; }
-                        PropertyChanges { target: smallAgainButton; opacity: 1; }
-                        PropertyChanges { target: mainAvatar; height: 96; }
-                        PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y }
-                        PropertyChanges { target: mainList; interactive: false; }
-                        PropertyChanges { target: detailView; opacity:1;}
-                        PropertyChanges { target: detailView; height:wrapper.height - 100;}
-                    }
-            ]
-
-            transitions:  [
-                Transition {
-                    from: "List"
-                    to: "MiniDetails"
-                    reversible: false
-                    SequentialAnimation {
-                        NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
-                        ParallelAnimation {
-                            ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
-                            NumberAnimation { duration: 150; properties: "x"; }
-                        }
-                    }
-                },
-                Transition {
-                    from: "MiniDetails"
-                    to: "Details"
-                    reversible: false
-                    ParallelAnimation {
-                        NumberAnimation { duration: 250; properties: "contentY,opacity"; }
-                        SequentialAnimation {
-                            NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
-                            ParallelAnimation {
-                                ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
-                                NumberAnimation { duration: 150; properties: "x"; }
-                            }
-                        }
-                    }
-                },
-                Transition {
-                    from: "Details"
-                    to: "MiniDetails"
-                    reversible: false
-                    ParallelAnimation {
-                        NumberAnimation { duration: 250; properties: "contentY,opacity"; }
-                        SequentialAnimation {
-                            ParallelAnimation {
-                                NumberAnimation { duration: 150; properties: "x"; }
-                                ColorAnimation { duration: 200; properties: "topColor, bottomColor";}
-                            }
-                            NumberAnimation { duration: 200; properties: "detailsOpacity,height" }
-                        }
-                    }
-                },
-                Transition {
-                    from: "MiniDetails"
-                    to: "List"
-                    reversible: false
-                    SequentialAnimation {
-                        NumberAnimation { duration: 100; properties: "x"; }
-                        ParallelAnimation{
-                            NumberAnimation { duration: 150; properties: "detailsOpacity,height" }
-                            ColorAnimation { duration: 150; properties: "topColor, bottomColor";}
-                        }
-                    }
-                }
-            ]
-        }
-    }
-
-    ListView {
-        id: mainList
-        model: contactModel
-        width: parent.width; height: parent.height
-        delegate: listdelegate
-        highlightFollowsCurrentItem: false
-        focus: true
-        anchors.fill: parent
-        keyNavigationWraps: true
-    }
-
-    // Attach scrollbar to the right edge of the view.
-    ScrollBar {
-        id: verticalScrollBar
-        opacity: 0
-        orientation: "Vertical"
-        position: mainList.visibleArea.yPosition
-        pageSize: mainList.visibleArea.heightRatio
-        width: 20
-        height: mainList.height
-        anchors.right: mainList.right
-        fgColor: "white"
-        // Only show the scrollbar when the view is moving.
-        states: [
-            State {
-                name: "ShowBars"; when: mainList.moving
-                PropertyChanges { target: verticalScrollBar; opacity: 1 }
-            }
-        ]
-        transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
-    }
-}
-
-// ![0]
diff --git a/demos/qmlcontacts/contacts.qml b/demos/qmlcontacts/contacts.qml
index c061d13af7..f21cdc3f3a 100644
--- a/demos/qmlcontacts/contacts.qml
+++ b/demos/qmlcontacts/contacts.qml
@@ -41,256 +41,277 @@
 import Qt 4.7
 import QtMobility.contacts 1.1
 import "contents"
+Item {
+    id: screen; width: 360; height: 640
+    property string viewType : "contactListView"
 
-Rectangle {
-    id: topItem
-    width: 360
-    height: 640
-    x: 0
-    y: 0
+    Rectangle {
+        id: background
+        anchors.fill: parent;
 
-    color: "#080808";
+        color: "#343434";
+        Image { source: "contents/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 1 }
 
-    ContactModel {
-        id: contactModel 
-    }
+        ContactModel {
+            id: contactModel
+            Component.onCompleted : {
+                if (manager == "memory")
+                    contactModel.importContacts("contents/example.vcf");
+            }
+        }
+        TitleBar { id: titleBar; width: parent.width; height: 40; opacity: 0.9
+                   managerName:contactModel.manager
+                   contactsCount:mainList.count
+                   statusString:contactModel.error
+        }
 
-    Component {
-        id: listdelegate
+        ToolBar {
+            id: toolBar
+            height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
+            button1Label: "Change manager"
+            button2Label: "New contact"
+            onButton1Clicked: {
+                messageBox.messageString = "Not implemented :("
+                if (viewType == "contactListView")
+                    viewType = "managerListView";
+                else if (viewType == "detailListView") {
+                    //Delete contact
+                }
 
-        Rectangle {
-            id: wrapper            
-            border.width: 2
-            height: 36;
-            width: mainList.width;
-
-            property color topColor: "#999999";
-            property color bottomColor: "#444444";
-            property real detailsOpacity: 1
-            property int littleDetailsMode: 0;
-            property int bigDetailsMode: 0;
-
-            gradient: Gradient {
-                 GradientStop { position: 0.0; color: topColor }
-                 GradientStop { position: 1.0; color: bottomColor }
-            }
 
-            MouseArea {
-                id: mr
-                width: topItem.width;
-                height: wrapper.height;
-                anchors.centerIn: parent;
-                onClicked: { littleDetailsMode = !littleDetailsMode; mainList.currentIndex = index; }
             }
-            Column {
-                Row {
-                    spacing: 2
-                    Item {
-                        id: mainAvatar;
-                        height: wrapper.height;
-                        width: height;
-
-                        Rectangle {
-                            border.width: 2;
-                            radius: 4;
-                            anchors.fill: parent;
-                            anchors.margins: 2;
-
-                            Image {
-                                id: avatar
-                                anchors.fill: parent;
-                                anchors.margins: 2;
+            onButton2Clicked: {
+                messageBox.messageString = "Not implemented :("
+                if (viewType = "contactListView") {
+                    //add new contact
+                } else if (viewType == "detailListView") {
+                    //add new detail
+                }
+            }
+        }
+        Component {
+            id: listdelegate
 
-                                source: model.avatar;
-                                fillMode: Image.PreserveAspectFit
-                            }
-                            Image {
-                                anchors.fill: parent;
-                                anchors.margins: 2;
-                                source: "contents/default.svg";
-                                opacity: avatar.status == Image.Ready ? 0 : 1;
-                            }
-                        }
-                    }
+            Rectangle {
+                id: wrapper
+                border.width: 2
+                height: 36;
+                width: mainList.width;
 
-                    Column {
-                        Item {
-                            id: mainLabel;
-                            width: nameTxt.width
-                            height: nameTxt.height + 16;
-                            Text {
-                                id: nameTxt
-                                y: 8;
-                                text: model.display
-                                color: "white"
-                            }
-                        }
+                property color topColor: "#999999";
+                property color bottomColor: "#444444";
+                property real detailsOpacity: 1
+                property int littleDetailsMode: 0;
+                property int bigDetailsMode: 0;
 
+                gradient: Gradient {
+                     GradientStop { position: 0.0; color: topColor }
+                     GradientStop { position: 1.0; color: bottomColor }
+                }
+
+                MouseArea {
+                    id: mr
+                    width: screen.width;
+                    height: wrapper.height;
+                    anchors.centerIn: parent;
+                    onClicked: { littleDetailsMode = !littleDetailsMode; mainList.currentIndex = index; }
+                }
+                Column {
+                    Row {
+                        spacing: 2
                         Item {
-                            id: details
-                            property color textColor: "#ffffdd";
-                            opacity: wrapper.detailsOpacity
-                            height: childrenRect.height + 6;
-                            width: childrenRect.width;
+                            id: mainAvatar;
+                            height: wrapper.height;
+                            width: height;
 
-                            Column {
-                                Text {
-                                    text: model.interestLabel + ": " + model.interest
-                                    color: details.textColor;
+                            Rectangle {
+                                border.width: 2;
+                                radius: 4;
+                                anchors.fill: parent;
+                                anchors.margins: 2;
+
+                                Image {
+                                    id: avatar
+                                    anchors.fill: parent;
+                                    anchors.margins: 2;
+
+                                    source: model.avatar;
+                                    fillMode: Image.PreserveAspectFit
+                                    smooth:true
                                 }
-                                Text {
-                                    text: model.presenceAvailable ? model.presenceText + " [" + model.presenceMessage + "]" : " ";
-                                    color: details.textColor;
+                                Image {
+                                    anchors.fill: parent;
+                                    anchors.margins: 2;
+                                    source: "contents/images/default.svg";
+                                    opacity: avatar.status == Image.Ready ? 0 : 1;
                                 }
                             }
                         }
-                    }
 
-                    Item {
-                        id: buttonBox
-                        x: wrapper.width - 6 - childrenRect.width;
-                        y: 4;
-                        height:childrenRect.height
-                        opacity: details.opacity;
                         Column {
-                            // Buttons
-                            MediaButton {
-                                id: dialButton;
-                                text: "Dial";
-                            }
-                            MediaButton {
-                                id: textButton
-                                text: "Send Text";
+                            Item {
+                                id: mainLabel;
+                                width: nameTxt.width
+                                height: nameTxt.height + 16;
+                                Text {
+                                    id: nameTxt
+                                    y: 8;
+                                    text: model.display
+                                    color: "white"
+                                }
                             }
+
                             Item {
-                                height:childrenRect.height
-                                width: childrenRect.width
+                                id: details
+                                property color textColor: "#ffffdd";
+                                opacity: wrapper.detailsOpacity
+                                height: childrenRect.height + 6;
+                                width: childrenRect.width;
+
+                                Column {
+                                    Text {
+                                        text: model.interestLabel + ": " + model.interest
+                                        color: details.textColor;
+                                    }
+                                    Text {
+                                        text: model.presenceAvailable ? model.presenceText + " [" + model.presenceMessage + "]" : " ";
+                                        color: details.textColor;
+                                    }
+                                }
+                            }
+                        }
+
+                        Item {
+                            id: buttonBox
+                            x: wrapper.width - 6 - childrenRect.width;
+                            y: 4;
+                            height:childrenRect.height
+                            opacity: details.opacity;
+                            Column {
+                                // Buttons
                                 MediaButton {
-                                    id: viewButton
-                                    text: "More..."
-                                    opacity: 0;
-                                    onClicked: wrapper.bigDetailsMode = 1;
+                                    id: dialButton;
+                                    text: "Dial";
                                 }
                                 MediaButton {
-                                    id: smallAgainButton
-                                    text: "Back";
-                                    anchors.top:viewButton.top;
-                                    opacity: 0;
-                                    onClicked: wrapper.bigDetailsMode = 0;
+                                    id: textButton
+                                    text: "Send Text";
+                                }
+                                Item {
+                                    height:childrenRect.height
+                                    width: childrenRect.width
+                                    MediaButton {
+                                        id: viewButton
+                                        text: "More..."
+                                        opacity: 0;
+                                        onClicked: wrapper.bigDetailsMode = 1;
+                                    }
+                                    MediaButton {
+                                        id: smallAgainButton
+                                        text: "Back";
+                                        anchors.top:viewButton.top;
+                                        opacity: 0;
+                                        onClicked: wrapper.bigDetailsMode = 0;
+                                    }
                                 }
                             }
                         }
                     }
-                }
-                ListView {
-                    id: detailView
-                    snapMode:ListView.SnapToItem
-                    width: wrapper.width;
-                    focus: true
-                    opacity: 0
-                    keyNavigationWraps: true
+                    ListView {
+                        id: detailView
+                        snapMode:ListView.SnapToItem
+                        width: wrapper.width;
+                        focus: true
+                        opacity: 0
+                        keyNavigationWraps: true
 
 
-                    model:contact.details
-                    delegate: Component {
-                        Item {
-                            width: detailView.width;
-                            height:100;
+                        model:contact.details
+                        delegate: Component {
+                            Item {
+                                width: detailView.width;
+                                height:100;
 
 
-                            Column {
-                                spacing: 5
-                                Text {
-                                   text:  definitionName;
-                                   color:"white";
-                                   width: detailView.width;
-                                   height: 20;
-                                }
-                                ListView {
-                                    id:fieldView
-                                    snapMode:ListView.SnapToItem
-                                    width: detailView.width;
-                                    height: 40
-
-                                    model: fieldNames
-                                    property ContactDetail detail: modelData
-
-                                    delegate: Item {
-                                        height: parent.height
-                                        width: parent.width
-                                        Row {
-                                            Text {
-                                                text: modelData
-                                                width: detailView.width * 0.5;
-                                                height: 20;
-                                            }
-                                            TextEdit {
-                                               width: detailView.width * 0.5;
-                                               height: 20;
-                                               text:fieldView.detail.value(modelData).toString();
-                                               color:"yellow";
-                                               //onTextChanged: {field.value = text;}
-                                            }
-                                        } //row
-                                    } //delegate
+                                Column {
+                                    spacing: 5
+                                    Text {
+                                       text:  definitionName;
+                                       color:"white";
+                                       width: detailView.width;
+                                       height: 20;
+                                    }
+                                    ListView {
+                                        id:fieldView
+                                        snapMode:ListView.SnapToItem
+                                        width: detailView.width;
+                                        height: 40
+
+                                        model: fieldNames
+                                        property ContactDetail detail: modelData
+
+                                        delegate: Item {
+                                            height: parent.height
+                                            width: parent.width
+                                            Row {
+                                                Text {
+                                                    text: modelData
+                                                    width: detailView.width * 0.5;
+                                                    height: 20;
+                                                }
+                                                TextEdit {
+                                                   width: detailView.width * 0.5;
+                                                   height: 20;
+                                                   text:fieldView.detail.value(modelData).toString();
+                                                   color:"yellow";
+                                                   //onTextChanged: {field.value = text;}
+                                                }
+                                            } //row
+                                        } //delegate
+                                    }
                                 }
                             }
+                        }//delegate
+                    }//detail list view
+                }
+                states: [
+                        State {
+                            name: "List";
+                            when: mainList.currentIndex != index || wrapper.littleDetailsMode == 0
+                            PropertyChanges { target: wrapper; detailsOpacity: 0; }
+                            PropertyChanges { target: wrapper; topColor: "#333333"; }
+                            PropertyChanges { target: wrapper; bottomColor: "#111111"; }
+                            PropertyChanges { target: buttonBox; x: wrapper.width + 6; }
+                            PropertyChanges { target: detailView; opacity:0 }
+                        },
+                        State {
+                            name: "MiniDetails"
+                            when: (mainList.currentIndex == index) && (wrapper.littleDetailsMode == 1) && (wrapper.bigDetailsMode == 0);
+                            PropertyChanges { target: viewButton; opacity: 1; }
+                            PropertyChanges { target: smallAgainButton; opacity: 0; }
+                            PropertyChanges { target: wrapper; height: Math.max(mainLabel.height + details.height + 4, buttonBox.height + 8); }
+                            PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y } // XXX I don't think this should be here
+                            PropertyChanges { target: detailView; opacity:0 }
+                        },
+                        State {
+                            name: "Details"
+                            when: (mainList.currentIndex == index) && (wrapper.bigDetailsMode == 1);
+                            PropertyChanges { target: wrapper; height: mainList.height; }
+                            PropertyChanges { target: viewButton; opacity: 0; }
+                            PropertyChanges { target: smallAgainButton; opacity: 1; }
+                            PropertyChanges { target: mainAvatar; height: 96; }
+                            PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y }
+                            PropertyChanges { target: mainList; interactive: false; }
+                            PropertyChanges { target: detailView; opacity:1;}
+                            PropertyChanges { target: detailView; height:wrapper.height - 100;}
                         }
-                    }//delegate
-                }//detail list view
-            }
-            states: [
-                    State {
-                        name: "List";
-                        when: mainList.currentIndex != index || wrapper.littleDetailsMode == 0
-                        PropertyChanges { target: wrapper; detailsOpacity: 0; }
-                        PropertyChanges { target: wrapper; topColor: "#333333"; }
-                        PropertyChanges { target: wrapper; bottomColor: "#111111"; }
-                        PropertyChanges { target: buttonBox; x: wrapper.width + 6; }
-                        PropertyChanges { target: detailView; opacity:0 }
-                    },
-                    State {
-                        name: "MiniDetails"
-                        when: (mainList.currentIndex == index) && (wrapper.littleDetailsMode == 1) && (wrapper.bigDetailsMode == 0);
-                        PropertyChanges { target: viewButton; opacity: 1; }
-                        PropertyChanges { target: smallAgainButton; opacity: 0; }
-                        PropertyChanges { target: wrapper; height: Math.max(mainLabel.height + details.height + 4, buttonBox.height + 8); }
-                        PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y } // XXX I don't think this should be here
-                        PropertyChanges { target: detailView; opacity:0 }
-                    },
-                    State {
-                        name: "Details"
-                        when: (mainList.currentIndex == index) && (wrapper.bigDetailsMode == 1);
-                        PropertyChanges { target: wrapper; height: mainList.height; }
-                        PropertyChanges { target: viewButton; opacity: 0; }
-                        PropertyChanges { target: smallAgainButton; opacity: 1; }
-                        PropertyChanges { target: mainAvatar; height: 96; }
-                        PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y }
-                        PropertyChanges { target: mainList; interactive: false; }
-                        PropertyChanges { target: detailView; opacity:1;}
-                        PropertyChanges { target: detailView; height:wrapper.height - 100;}
-                    }
-            ]
+                ]
 
-            transitions:  [
-                Transition {
-                    from: "List"
-                    to: "MiniDetails"
-                    reversible: false
-                    SequentialAnimation {
-                        NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
-                        ParallelAnimation {
-                            ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
-                            NumberAnimation { duration: 150; properties: "x"; }
-                        }
-                    }
-                },
-                Transition {
-                    from: "MiniDetails"
-                    to: "Details"
-                    reversible: false
-                    ParallelAnimation {
-                        NumberAnimation { duration: 250; properties: "contentY,opacity"; }
+                transitions:  [
+                    Transition {
+                        from: "List"
+                        to: "MiniDetails"
+                        reversible: false
                         SequentialAnimation {
                             NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
                             ParallelAnimation {
@@ -298,70 +319,146 @@ Rectangle {
                                 NumberAnimation { duration: 150; properties: "x"; }
                             }
                         }
-                    }
-                },
-                Transition {
-                    from: "Details"
-                    to: "MiniDetails"
-                    reversible: false
-                    ParallelAnimation {
-                        NumberAnimation { duration: 250; properties: "contentY,opacity"; }
-                        SequentialAnimation {
-                            ParallelAnimation {
-                                NumberAnimation { duration: 150; properties: "x"; }
-                                ColorAnimation { duration: 200; properties: "topColor, bottomColor";}
+                    },
+                    Transition {
+                        from: "MiniDetails"
+                        to: "Details"
+                        reversible: false
+                        ParallelAnimation {
+                            NumberAnimation { duration: 250; properties: "contentY,opacity"; }
+                            SequentialAnimation {
+                                NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
+                                ParallelAnimation {
+                                    ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
+                                    NumberAnimation { duration: 150; properties: "x"; }
+                                }
                             }
-                            NumberAnimation { duration: 200; properties: "detailsOpacity,height" }
                         }
-                    }
-                },
-                Transition {
-                    from: "MiniDetails"
-                    to: "List"
-                    reversible: false
-                    SequentialAnimation {
-                        NumberAnimation { duration: 100; properties: "x"; }
-                        ParallelAnimation{
-                            NumberAnimation { duration: 150; properties: "detailsOpacity,height" }
-                            ColorAnimation { duration: 150; properties: "topColor, bottomColor";}
+                    },
+                    Transition {
+                        from: "Details"
+                        to: "MiniDetails"
+                        reversible: false
+                        ParallelAnimation {
+                            NumberAnimation { duration: 250; properties: "contentY,opacity"; }
+                            SequentialAnimation {
+                                ParallelAnimation {
+                                    NumberAnimation { duration: 150; properties: "x"; }
+                                    ColorAnimation { duration: 200; properties: "topColor, bottomColor";}
+                                }
+                                NumberAnimation { duration: 200; properties: "detailsOpacity,height" }
+                            }
+                        }
+                    },
+                    Transition {
+                        from: "MiniDetails"
+                        to: "List"
+                        reversible: false
+                        SequentialAnimation {
+                            NumberAnimation { duration: 100; properties: "x"; }
+                            ParallelAnimation{
+                                NumberAnimation { duration: 150; properties: "detailsOpacity,height" }
+                                ColorAnimation { duration: 150; properties: "topColor, bottomColor";}
+                            }
                         }
                     }
+                ]
+            }
+        }
+        Item {
+            id: views
+            width: parent.width
+            anchors.top: titleBar.bottom; anchors.bottom: toolBar.top
+            ListView {
+                id: mainList
+                model: contactModel
+                width: views.width; height: views.height
+                delegate: listdelegate
+                highlightFollowsCurrentItem: false
+                focus: true
+                anchors.fill: parent
+                keyNavigationWraps: true
+                opacity: 0.8
+            }
+        }
+
+
+        // Attach scrollbar to the right edge of the view.
+        ScrollBar {
+            id: verticalScrollBar
+            opacity: 0
+            orientation: "Vertical"
+            position: mainList.visibleArea.yPosition
+            pageSize: mainList.visibleArea.heightRatio
+            width: 20
+            height: mainList.height
+            anchors.right: views.right
+            fgColor: "white"
+            // Only show the scrollbar when the view is moving.
+            states: [
+                State {
+                    name: "ShowBars"; when: mainList.moving
+                    PropertyChanges { target: verticalScrollBar; opacity: 1 }
                 }
             ]
+            transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
         }
-    }
 
-    ListView {
-        id: mainList
-        model: contactModel
-        width: parent.width; height: parent.height
-        delegate: listdelegate
-        highlightFollowsCurrentItem: false
-        focus: true
-        anchors.fill: parent
-        keyNavigationWraps: true
-    }
+        Rectangle {
+            id:messageBox
+            property string messageString: ""
+            opacity:0
+            height:50
+            width:parent.width
+            anchors.top:parent.top
+            anchors.topMargin:200
+            border.width: 0
+            radius: 10
+
+            color:"white"
+            Text {
+                text:messageBox.messageString
+                color:"red"
+                font.pointSize:20
+                horizontalAlignment:Text.AlignHCenter
+            }
 
-    // Attach scrollbar to the right edge of the view.
-    ScrollBar {
-        id: verticalScrollBar
-        opacity: 0
-        orientation: "Vertical"
-        position: mainList.visibleArea.yPosition
-        pageSize: mainList.visibleArea.heightRatio
-        width: 20
-        height: mainList.height
-        anchors.right: mainList.right
-        fgColor: "white"
-        // Only show the scrollbar when the view is moving.
-        states: [
-            State {
-                name: "ShowBars"; when: mainList.moving
-                PropertyChanges { target: verticalScrollBar; opacity: 1 }
+            // Only show the messageBox when messageString is not empty.
+            states: [
+                State {
+                    name: "ShowMessage"; when: messageBox.messageString != ""
+                    PropertyChanges { target: messageBox; opacity: 1 }
+                    PropertyChanges { target: timer; running: true }
+                }
+            ]
+            transitions: [
+                Transition {
+                    NumberAnimation { property: "opacity"; duration: 500; to:0 }
+                }
+            ]
+            Timer {
+                id:timer
+                interval: 1000; running: false; repeat: false
+                onTriggered: {
+                    messageBox.messageString = ""
+                    running = false
+                }
             }
-        ]
-        transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
+
+        }
+
+    //    ListView {
+    //        id:managerList
+    //        model:contactModel.availableManagers
+    //        delegate: {
+
+    //        }
+    //        width: parent.width; height: parent.height
+    //        highlightFollowsCurrentItem: true
+    //        focus: true
+    //        anchors.fill: parent
+    //        keyNavigationWraps: true
+    //    }
     }
 }
-
 // ![0]
diff --git a/demos/qmlcontacts/contents/Button.qml b/demos/qmlcontacts/contents/Button.qml
new file mode 100644
index 0000000000..6228606ee8
--- /dev/null
+++ b/demos/qmlcontacts/contents/Button.qml
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt 4.7
+
+Item {
+    id: container
+
+    signal clicked
+
+    property string text
+
+    BorderImage {
+        id: buttonImage
+        source: "images/toolbutton.sci"
+        width: container.width; height: container.height
+    }
+    BorderImage {
+        id: pressed
+        opacity: 0
+        source: "images/toolbutton.sci"
+        width: container.width; height: container.height
+    }
+    MouseArea {
+        id: mouseRegion
+        anchors.fill: buttonImage
+        onClicked: { container.clicked(); }
+    }
+    Text {
+        color: "white"
+        anchors.centerIn: buttonImage; font.bold: true; font.pixelSize: 15
+        text: container.text; style: Text.Raised; styleColor: "black"
+    }
+    states: [
+        State {
+            name: "Pressed"
+            when: mouseRegion.pressed == true
+            PropertyChanges { target: pressed; opacity: 1 }
+        }
+    ]
+}
diff --git a/demos/qmlcontacts/contents/MediaButton.qml b/demos/qmlcontacts/contents/MediaButton.qml
index 76a972bf82..2c4d554a35 100644
--- a/demos/qmlcontacts/contents/MediaButton.qml
+++ b/demos/qmlcontacts/contents/MediaButton.qml
@@ -47,12 +47,12 @@ Item {
     id: container
     Image {
         id: normal
-        source: "pics/button.png"
+        source: "images/button.png"
     }
     Image {
         id: pressed
         opacity: 0
-        source: "pics/button-pressed.png"
+        source: "images/button-pressed.png"
     }
     MouseArea {
         id: clickRegion
diff --git a/demos/qmlcontacts/contents/TitleBar.qml b/demos/qmlcontacts/contents/TitleBar.qml
new file mode 100644
index 0000000000..4c895b238a
--- /dev/null
+++ b/demos/qmlcontacts/contents/TitleBar.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt 4.7
+
+Item {
+    id: titleBar
+    property string managerName: ""
+    property int contactsCount: 0
+    property string statusString: ""
+
+
+    BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Item {
+        id: container
+        width: (parent.width * 2) - 55 ; height: parent.height
+
+        Image {
+            id: quitButton
+            anchors.left: parent.left//; anchors.leftMargin: 0
+            anchors.verticalCenter: parent.verticalCenter
+            source: "images/quit.png"
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Qt.quit()
+            }
+        }
+
+        Text {
+            id: categoryText
+            anchors {
+                left: quitButton.right; right: parent.right; //leftMargin: 10; rightMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+            elide: Text.ElideLeft
+            text: "[" + managerName + "] Total:" + contactsCount + " " + statusString
+            font.bold: true; font.pixelSize: 15; color: "White"; style: Text.Raised; styleColor: "Black"
+        }
+
+    }
+
+}
diff --git a/demos/qmlcontacts/contents/ToolBar.qml b/demos/qmlcontacts/contents/ToolBar.qml
new file mode 100644
index 0000000000..2f790a1b21
--- /dev/null
+++ b/demos/qmlcontacts/contents/ToolBar.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** Commercial Usage
+** Licensees holding valid Qt Commercial licenses may use this file in
+** accordance with the Qt Solutions Commercial License Agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and Nokia.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+** Please note Third Party Software included with Qt Solutions may impose
+** additional restrictions and it is the user's responsibility to ensure
+** that they have met the licensing requirements of the GPL, LGPL, or Qt
+** Solutions Commercial license and the relevant license of the Third
+** Party Software they are using.
+**
+** If you are unsure which license is appropriate for your use, please
+** contact the sales department at qt-sales@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt 4.7
+
+Item {
+    id: toolbar
+
+    property alias button1Label: button1.text
+    property alias button2Label: button2.text
+    signal button1Clicked
+    signal button2Clicked
+
+    BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Button {
+        id: button1
+        anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32
+        onClicked: toolbar.button1Clicked()
+    }
+
+    Button {
+        id: button2
+        anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32
+        onClicked: toolbar.button2Clicked()
+    }
+
+}
diff --git a/demos/qmlcontacts/contents/pics/button-pressed.png b/demos/qmlcontacts/contents/images/button-pressed.png
index e434d327f2..e434d327f2 100644
--- a/demos/qmlcontacts/contents/pics/button-pressed.png
+++ b/demos/qmlcontacts/contents/images/button-pressed.png
diff --git a/demos/qmlcontacts/contents/pics/button.png b/demos/qmlcontacts/contents/images/button.png
index 56a63ce641..56a63ce641 100644
--- a/demos/qmlcontacts/contents/pics/button.png
+++ b/demos/qmlcontacts/contents/images/button.png
diff --git a/demos/qmlcontacts/contents/default.svg b/demos/qmlcontacts/contents/images/default.svg
index 248199cc4e..248199cc4e 100644
--- a/demos/qmlcontacts/contents/default.svg
+++ b/demos/qmlcontacts/contents/images/default.svg
diff --git a/demos/qmlcontacts/contents/images/gloss.png b/demos/qmlcontacts/contents/images/gloss.png
new file mode 100755
index 0000000000..5d370cd93d
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/gloss.png
diff --git a/demos/qmlcontacts/contents/images/lineedit.png b/demos/qmlcontacts/contents/images/lineedit.png
new file mode 100755
index 0000000000..2cc38dc35b
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/lineedit.png
diff --git a/demos/qmlcontacts/contents/images/lineedit.sci b/demos/qmlcontacts/contents/images/lineedit.sci
new file mode 100644
index 0000000000..054bff78be
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/lineedit.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 10
+border.bottom: 10
+border.right: 10
+source: lineedit.png
diff --git a/demos/qmlcontacts/contents/images/quit.png b/demos/qmlcontacts/contents/images/quit.png
new file mode 100755
index 0000000000..5bda1b6e0d
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/quit.png
diff --git a/demos/qmlcontacts/contents/images/stripes.png b/demos/qmlcontacts/contents/images/stripes.png
new file mode 100755
index 0000000000..9f36727ea4
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/stripes.png
diff --git a/demos/qmlcontacts/contents/images/titlebar.png b/demos/qmlcontacts/contents/images/titlebar.png
new file mode 100755
index 0000000000..51c90082d0
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/titlebar.png
diff --git a/demos/qmlcontacts/contents/images/titlebar.sci b/demos/qmlcontacts/contents/images/titlebar.sci
new file mode 100644
index 0000000000..0418d94cd6
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/titlebar.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 12
+border.bottom: 12
+border.right: 10
+source: titlebar.png
diff --git a/demos/qmlcontacts/contents/images/toolbutton.png b/demos/qmlcontacts/contents/images/toolbutton.png
new file mode 100755
index 0000000000..11310013ee
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/toolbutton.png
diff --git a/demos/qmlcontacts/contents/images/toolbutton.sci b/demos/qmlcontacts/contents/images/toolbutton.sci
new file mode 100644
index 0000000000..9e4f965307
--- /dev/null
+++ b/demos/qmlcontacts/contents/images/toolbutton.sci
@@ -0,0 +1,5 @@
+border.left: 15
+border.top: 4
+border.bottom: 4
+border.right: 15
+source: toolbutton.png