4 |
4 |
5 Rectangle { |
5 Rectangle { |
6 id: topItem |
6 id: topItem |
7 width: 320 |
7 width: 320 |
8 height: 480 |
8 height: 480 |
9 // border.color: "bg |
|
10 // border.width: 5 |
|
11 // radius: 10 |
|
12 x: 0 |
9 x: 0 |
13 y: 0 |
10 y: 0 |
14 |
11 |
|
12 color: "#080808"; |
|
13 |
15 Script { |
14 Script { |
16 function startup() { |
15 function startup() { |
17 print("Hello"); |
16 manager.contacts(); |
18 |
|
19 print("Num contacts: " + blah.numContacts); |
|
20 blah.contacts(); |
|
21 } |
17 } |
22 function gotContacts(c) { |
18 function gotContacts(c) { |
23 if(c == undefined){ |
19 if(c == undefined){ |
24 //print("Error, got null object for gotContacts"); |
|
25 return; |
20 return; |
26 } |
21 } |
|
22 /* |
27 print("Got contacts: " + c.name); |
23 print("Got contacts: " + c.name); |
28 print(" Available actions: " + c.availableActions); |
24 print(" Available actions: " + c.availableActions); |
29 print(" details: " + c.details);detailsOpacity |
25 print(" details: " + c.details);detailsOpacity |
30 |
26 */ |
31 var o = c.values("OnlineAccount"); |
27 var o = c.values("OnlineAccount"); |
32 var q = c.values("Presence"); |
28 var q = c.values("Presence"); |
33 |
29 |
34 |
30 nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email, "avatarSource": "qrc:/default.svg"}); |
35 nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email}); |
31 |
36 |
32 /* |
37 var j; |
33 var j; |
38 for(j in c.details){ |
34 for(j in c.details){ |
39 var o = c.values(c.details[j]); |
35 var o = c.values(c.details[j]); |
40 var i; |
36 var i; |
41 for(i in o){ |
37 for(i in o){ |
42 print(" "+ c.details[j] + "/" + i + ": " + o[i]); |
38 print(" "+ c.details[j] + "/" + i + ": " + o[i]); |
43 } |
39 } |
44 } |
40 } |
|
41 */ |
|
42 |
45 } |
43 } |
46 function clickedList(index) { |
44 function clickedList(index) { |
47 mainList.currentIndex = index; |
45 mainList.currentIndex = index; |
48 } |
46 } |
49 } |
47 } |
|
48 |
50 Component.onCompleted: startup(); |
49 Component.onCompleted: startup(); |
51 |
50 |
52 QMLContactManagerAsync { |
51 QMLContactManagerAsync { |
53 id: "blah" |
52 id: "manager" |
54 |
53 |
55 manager: "memory" |
54 manager: "memory" |
56 onDataChanged: print("Data changed!"); |
55 onDataChanged: print("Data changed!"); |
57 onContactsAdded: print("Contacts added: " + contactIds); |
56 onContactsAdded: print("Contacts added: " + contactIds); |
58 onContactsLoaded: gotContacts(contact); |
57 onContactsLoaded: gotContacts(contact); |
61 Component { |
60 Component { |
62 id: listdelegate |
61 id: listdelegate |
63 Rectangle { |
62 Rectangle { |
64 id: wrapper |
63 id: wrapper |
65 border.width: 2 |
64 border.width: 2 |
66 radius: 5 |
65 height: 30; |
67 height: 40 |
66 |
68 width: topItem.width-2; |
67 property color topColor: "#333333"; |
|
68 property color bottomColor: "#111111"; |
69 property real detailsOpacity: 0 |
69 property real detailsOpacity: 0 |
70 Row { |
70 |
71 Item { |
71 gradient: Gradient { |
72 property real contactId: 0 |
72 GradientStop { position: 0.0; color: topColor } |
73 } |
73 GradientStop { position: 1.0; color: bottomColor } |
|
74 } |
|
75 |
|
76 Item { |
|
77 id: mainAvatar; |
|
78 anchors.left: parent.left; |
|
79 anchors.top: parent.top; |
|
80 width: avatarFrame.width; |
|
81 height: avatarFrame.height; |
|
82 anchors.leftMargin:4; |
|
83 |
|
84 Rectangle { |
|
85 id: avatarFrame; |
|
86 border.width: 2; |
|
87 radius: 4; |
|
88 height: wrapper.height-6 |
|
89 width: height; |
|
90 x: 3; y: 3; |
|
91 } |
|
92 |
|
93 Image { |
|
94 id: avatar |
|
95 anchors.fill: avatarFrame; |
|
96 anchors.leftMargin: 3; |
|
97 anchors.rightMargin: 3; |
|
98 anchors.topMargin: 3; |
|
99 anchors.bottomMargin: 3; |
|
100 |
|
101 source: avatarSource |
|
102 fillMode: Image.PreserveAspectFit |
|
103 } |
|
104 } |
|
105 |
|
106 Item { |
|
107 id: mainLabel; |
|
108 height: nameTxt.height + 16; |
|
109 property real contactId: 0; |
|
110 anchors.left: mainAvatar.right; |
|
111 anchors.right: parent.right; |
|
112 anchors.leftMargin:8; |
|
113 anchors.rightMargin: 4; |
|
114 anchors.topMargin: 4; |
|
115 anchors.bottomMargin: 4; |
|
116 |
74 Text { |
117 Text { |
|
118 x:8; y:8; |
|
119 anchors.left: parent.left; |
|
120 anchors.right: parent.right; |
75 id: nameTxt |
121 id: nameTxt |
76 text: name |
122 text: name |
77 } |
123 color: "white"; |
78 Item { |
124 } |
79 id: details |
125 } |
80 opacity: wrapper.detailsOpacity |
126 |
|
127 Item { |
|
128 id: details |
|
129 property color textColor: "#ffffdd"; |
|
130 anchors.top: mainLabel.bottom; |
|
131 anchors.bottom: parent.bottom; |
|
132 anchors.left: mainAvatar.right; |
|
133 anchors.right: parent.right; |
|
134 anchors.leftMargin:8; |
|
135 anchors.rightMargin: 4; |
|
136 anchors.bottomMargin: 4; |
|
137 opacity: wrapper.detailsOpacity |
|
138 |
|
139 Column { |
81 Text { |
140 Text { |
82 y: nameTxt.height |
|
83 id: emailId |
141 id: emailId |
84 text: email |
142 text: email |
|
143 color: details.textColor; |
85 } |
144 } |
86 Text { |
145 Row { |
87 y: emailId.y + emailId.height |
146 spacing: 5 |
88 id: accountPathId |
147 Text { |
89 text: accountPath |
148 id: accountPathId |
|
149 text: accountPath |
|
150 color: details.textColor; |
|
151 } |
|
152 Text { |
|
153 id: presenceId |
|
154 text: presence |
|
155 color: details.textColor; |
|
156 } |
90 } |
157 } |
91 Text { |
158 } |
92 y: accountPathId.y |
159 } |
93 x: accountPathId.x + accountPathId.width + 5 |
160 |
94 id: presenceId |
|
95 text: presence |
|
96 } |
|
97 } |
|
98 } |
|
99 /* |
|
100 Image { |
|
101 id: avatar |
|
102 height: wrapper.height-6 |
|
103 source: avatarsource |
|
104 x: wrapper.width - avatar.width - 3 |
|
105 y: 3 |
|
106 opacity: details.opacity |
|
107 fillMode: Image.PreserveAspectFit |
|
108 }*/ |
|
109 states: State { |
161 states: State { |
110 name: "Details" |
162 name: "Details" |
111 PropertyChanges { target: wrapper; height: presenceId.y + presenceId.height } |
|
112 PropertyChanges { target: wrapper; detailsOpacity: 1; } |
163 PropertyChanges { target: wrapper; detailsOpacity: 1; } |
|
164 PropertyChanges { target: wrapper; topColor: "#666666"; } |
|
165 PropertyChanges { target: wrapper; bottomColor: "#222222"; } |
|
166 PropertyChanges { target: wrapper; height: mainLabel.height + emailId.height + accountPathId.height + presenceId.height; } |
113 } |
167 } |
114 |
168 |
115 transitions: Transition { |
169 transitions: Transition { |
116 from: "" |
170 from: "" |
117 to: "Details" |
171 to: "Details" |
118 reversible: true |
172 reversible: true |
119 ParallelAnimation { |
173 ParallelAnimation { |
120 NumberAnimation { |
174 ColorAnimation { duration: 150; properties: "topColor, bottomColor";} |
121 duration: 300; property: "detailsOpacity" } |
175 NumberAnimation { duration: 100; properties: "detailsOpacity,height" } |
122 NumberAnimation { |
176 } |
123 duration: 300; property: "height" } |
177 } |
124 } |
178 MouseArea { |
125 } |
|
126 MouseRegion { |
|
127 id: mr |
179 id: mr |
128 width: topItem.width; |
180 width: topItem.width; |
129 height: wrapper.height; |
181 height: wrapper.height; |
130 anchors.centerIn: parent; |
182 anchors.centerIn: parent; |
131 onClicked: wrapper.state == "" ? wrapper.state = "Details" : wrapper.state = ""; |
183 onClicked: wrapper.state == "" ? wrapper.state = "Details" : wrapper.state = ""; |
147 id: mainList |
199 id: mainList |
148 model: nameModel |
200 model: nameModel |
149 width: parent.width; height: parent.height |
201 width: parent.width; height: parent.height |
150 delegate: listdelegate |
202 delegate: listdelegate |
151 highlight: listhighlight |
203 highlight: listhighlight |
152 //highlightFollowsCurrentItem: true |
204 highlightFollowsCurrentItem: true |
153 focus: true |
205 focus: true |
154 anchors.fill: parent |
206 anchors.fill: parent |
155 highlightMoveSpeed: 5000 |
207 highlightMoveSpeed: 5000 |
156 } |
208 } |
157 |
209 |
158 |
|
159 ListModel { |
210 ListModel { |
160 id: nameModel |
211 id: nameModel |
161 } |
212 } |
162 |
213 |
163 // Attach scrollbar to the right edge of the view. |
214 // Attach scrollbar to the right edge of the view. |
164 ScrollBar { |
215 ScrollBar { |
165 id: verticalScrollBar |
216 id: verticalScrollBar |
166 opacity: 0.1 |
217 opacity: 0 |
167 orientation: "Vertical" |
218 orientation: "Vertical" |
168 position: mainList.visibleArea.yPosition |
219 position: mainList.visibleArea.yPosition |
169 pageSize: mainList.visibleArea.heightRatio |
220 pageSize: mainList.visibleArea.heightRatio |
170 width: 40 |
221 width: 20 |
171 height: mainList.height |
222 height: mainList.height |
172 anchors.right: mainList.right |
223 anchors.right: mainList.right |
|
224 fgColor: "white" |
173 // Only show the scrollbar when the view is moving. |
225 // Only show the scrollbar when the view is moving. |
174 states: [ |
226 states: [ |
175 State { |
227 State { |
176 name: "ShowBars"; when: mainList.moving |
228 name: "ShowBars"; when: mainList.moving |
177 PropertyChanges { target: verticalScrollBar; opacity: 1 } |
229 PropertyChanges { target: verticalScrollBar; opacity: 1 } |
178 } |
230 } |
179 ] |
231 ] |
180 transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ] |
232 transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ] |
181 } |
233 } |
182 |
|
183 |
|
184 |
|
185 } |
234 } |
186 |
235 |
187 |
236 |
188 |
237 |
189 // ![0] |
238 // ![0] |