--- a/qtmobility/examples/qmlcontacts/example.qml Fri Apr 16 15:51:22 2010 +0300
+++ b/qtmobility/examples/qmlcontacts/example.qml Mon May 03 13:18:40 2010 +0300
@@ -6,34 +6,30 @@
id: topItem
width: 320
height: 480
-// border.color: "bg
-// border.width: 5
-// radius: 10
x: 0
y: 0
+ color: "#080808";
+
Script {
function startup() {
- print("Hello");
-
- print("Num contacts: " + blah.numContacts);
- blah.contacts();
+ manager.contacts();
}
function gotContacts(c) {
if(c == undefined){
- //print("Error, got null object for gotContacts");
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, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email});
-
+/*
var j;
for(j in c.details){
var o = c.values(c.details[j]);
@@ -42,15 +38,18 @@
print(" "+ c.details[j] + "/" + i + ": " + o[i]);
}
}
+*/
+
}
function clickedList(index) {
mainList.currentIndex = index;
}
}
+
Component.onCompleted: startup();
QMLContactManagerAsync {
- id: "blah"
+ id: "manager"
manager: "memory"
onDataChanged: print("Data changed!");
@@ -63,53 +62,108 @@
Rectangle {
id: wrapper
border.width: 2
- radius: 5
- height: 40
- width: topItem.width-2;
+ height: 30;
+
+ property color topColor: "#333333";
+ property color bottomColor: "#111111";
property real detailsOpacity: 0
- Row {
- Item {
- property real contactId: 0
+
+ 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;
+
Text {
+ x:8; y:8;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
id: nameTxt
text: name
+ color: "white";
}
- Item {
- id: details
- opacity: wrapper.detailsOpacity
+ }
+
+ 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
+
+ Column {
Text {
- y: nameTxt.height
id: emailId
text: email
- }
- Text {
- y: emailId.y + emailId.height
- id: accountPathId
- text: accountPath
- }
- Text {
- y: accountPathId.y
- x: accountPathId.x + accountPathId.width + 5
- id: presenceId
- text: presence
+ color: details.textColor;
}
- }
+ Row {
+ spacing: 5
+ Text {
+ id: accountPathId
+ text: accountPath
+ color: details.textColor;
+ }
+ Text {
+ id: presenceId
+ text: presence
+ color: details.textColor;
+ }
+ }
+ }
}
- /*
- Image {
- id: avatar
- height: wrapper.height-6
- source: avatarsource
- x: wrapper.width - avatar.width - 3
- y: 3
- opacity: details.opacity
- fillMode: Image.PreserveAspectFit
- }*/
+
states: State {
name: "Details"
- PropertyChanges { target: wrapper; height: presenceId.y + presenceId.height }
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; }
}
transitions: Transition {
@@ -117,13 +171,11 @@
to: "Details"
reversible: true
ParallelAnimation {
- NumberAnimation {
- duration: 300; property: "detailsOpacity" }
- NumberAnimation {
- duration: 300; property: "height" }
+ ColorAnimation { duration: 150; properties: "topColor, bottomColor";}
+ NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
}
}
- MouseRegion {
+ MouseArea {
id: mr
width: topItem.width;
height: wrapper.height;
@@ -149,13 +201,12 @@
width: parent.width; height: parent.height
delegate: listdelegate
highlight: listhighlight
- //highlightFollowsCurrentItem: true
+ highlightFollowsCurrentItem: true
focus: true
anchors.fill: parent
highlightMoveSpeed: 5000
}
-
ListModel {
id: nameModel
}
@@ -163,13 +214,14 @@
// Attach scrollbar to the right edge of the view.
ScrollBar {
id: verticalScrollBar
- opacity: 0.1
+ opacity: 0
orientation: "Vertical"
position: mainList.visibleArea.yPosition
pageSize: mainList.visibleArea.heightRatio
- width: 40
+ width: 20
height: mainList.height
anchors.right: mainList.right
+ fgColor: "white"
// Only show the scrollbar when the view is moving.
states: [
State {
@@ -179,9 +231,6 @@
]
transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
}
-
-
-
}