|
1 /**************************************************************************** |
|
2 ** |
|
3 ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). |
|
4 ** All rights reserved. |
|
5 ** Contact: Nokia Corporation (qt-info@nokia.com) |
|
6 ** |
|
7 ** This file is part of the Qt Mobility Components. |
|
8 ** |
|
9 ** $QT_BEGIN_LICENSE:BSD$ |
|
10 ** You may use this file under the terms of the BSD license as follows: |
|
11 ** |
|
12 ** "Redistribution and use in source and binary forms, with or without |
|
13 ** modification, are permitted provided that the following conditions are |
|
14 ** met: |
|
15 ** * Redistributions of source code must retain the above copyright |
|
16 ** notice, this list of conditions and the following disclaimer. |
|
17 ** * Redistributions in binary form must reproduce the above copyright |
|
18 ** notice, this list of conditions and the following disclaimer in |
|
19 ** the documentation and/or other materials provided with the |
|
20 ** distribution. |
|
21 ** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor |
|
22 ** the names of its contributors may be used to endorse or promote |
|
23 ** products derived from this software without specific prior written |
|
24 ** permission. |
|
25 ** |
|
26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
|
27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
|
28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
|
29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
|
30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
|
31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
|
32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
|
33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
|
34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
|
35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
|
36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." |
|
37 ** $QT_END_LICENSE$ |
|
38 ** |
|
39 ****************************************************************************/ |
|
40 |
|
41 import Qt 4.7 |
|
42 import QtMobility.contacts 1.0 |
|
43 import "contents" |
|
44 |
|
45 Rectangle { |
|
46 id: topItem |
|
47 width: 360 |
|
48 height: 640 |
|
49 x: 0 |
|
50 y: 0 |
|
51 |
|
52 color: "#080808"; |
|
53 |
|
54 QmlContactModel { |
|
55 id: contactModel |
|
56 manager: "memory" |
|
57 Component.onCompleted : { |
|
58 contactModel.importContacts("contents/example.vcf"); |
|
59 } |
|
60 } |
|
61 |
|
62 Component { |
|
63 id: listdelegate |
|
64 |
|
65 Rectangle { |
|
66 id: wrapper |
|
67 border.width: 2 |
|
68 height: 36; |
|
69 width: mainList.width; |
|
70 |
|
71 property color topColor: "#999999"; |
|
72 property color bottomColor: "#444444"; |
|
73 property real detailsOpacity: 1 |
|
74 property int littleDetailsMode: 0; |
|
75 property int bigDetailsMode: 0; |
|
76 |
|
77 gradient: Gradient { |
|
78 GradientStop { position: 0.0; color: topColor } |
|
79 GradientStop { position: 1.0; color: bottomColor } |
|
80 } |
|
81 |
|
82 MouseArea { |
|
83 id: mr |
|
84 width: topItem.width; |
|
85 height: wrapper.height; |
|
86 anchors.centerIn: parent; |
|
87 onClicked: { littleDetailsMode = !littleDetailsMode; mainList.currentIndex = index; } |
|
88 } |
|
89 |
|
90 Row { |
|
91 spacing: 2 |
|
92 Item { |
|
93 id: mainAvatar; |
|
94 height: wrapper.height; |
|
95 width: height; |
|
96 |
|
97 Rectangle { |
|
98 border.width: 2; |
|
99 radius: 4; |
|
100 anchors.fill: parent; |
|
101 anchors.margins: 2; |
|
102 |
|
103 Image { |
|
104 id: avatar |
|
105 anchors.fill: parent; |
|
106 anchors.margins: 2; |
|
107 |
|
108 pixmap: model.decoration |
|
109 source: model.avatar; |
|
110 fillMode: Image.PreserveAspectFit |
|
111 } |
|
112 } |
|
113 } |
|
114 |
|
115 Column { |
|
116 Item { |
|
117 id: mainLabel; |
|
118 width: nameTxt.width |
|
119 height: nameTxt.height + 16; |
|
120 Text { |
|
121 id: nameTxt |
|
122 y: 8; |
|
123 text: display |
|
124 color: "white" |
|
125 } |
|
126 } |
|
127 |
|
128 Item { |
|
129 id: details |
|
130 property color textColor: "#ffffdd"; |
|
131 opacity: wrapper.detailsOpacity |
|
132 height: childrenRect.height + 6; |
|
133 width: childrenRect.width; |
|
134 |
|
135 Column { |
|
136 Text { |
|
137 text: model.interestLabel + ": " + model.interest |
|
138 color: details.textColor; |
|
139 } |
|
140 Text { |
|
141 text: model.presenceAvailable ? model.presenceText + " [" + model.presenceMessage + "]" : " "; |
|
142 color: details.textColor; |
|
143 } |
|
144 ListView { |
|
145 width: details.width; |
|
146 highlightFollowsCurrentItem: false |
|
147 focus: true |
|
148 //anchors.fill: parent |
|
149 keyNavigationWraps: true |
|
150 |
|
151 model:contactModel.details(contactId) |
|
152 delegate: Component { |
|
153 Item { |
|
154 width: details.width; |
|
155 property QtObject contactDetail : model.modelData; |
|
156 Column { |
|
157 Text { |
|
158 width: details.width; |
|
159 height: 20; |
|
160 text: contactDetail.name; |
|
161 color:details.textColor; |
|
162 } |
|
163 ListView { |
|
164 width: details.width; |
|
165 model:contactDetail.fields(); |
|
166 delegate: Component { |
|
167 Item { |
|
168 property QtObject field: model.modelData; |
|
169 Row { |
|
170 Text { |
|
171 text:field.key; |
|
172 color:details.textColor; |
|
173 width: details.width; |
|
174 height: 20; |
|
175 } |
|
176 TextInput { |
|
177 width: details.width; |
|
178 height: 20; |
|
179 text:field.value; |
|
180 color:details.textColor; |
|
181 } |
|
182 } |
|
183 } |
|
184 }//delegate |
|
185 |
|
186 }//detail fields view |
|
187 |
|
188 } |
|
189 } |
|
190 |
|
191 }//delegate |
|
192 }//detail list view |
|
193 } |
|
194 } |
|
195 } |
|
196 |
|
197 Item { |
|
198 id: buttonBox |
|
199 x: wrapper.width - 6 - childrenRect.width; |
|
200 y: 4; |
|
201 height:childrenRect.height |
|
202 opacity: details.opacity; |
|
203 Column { |
|
204 // Buttons |
|
205 MediaButton { |
|
206 id: dialButton; |
|
207 text: "Dial"; |
|
208 } |
|
209 MediaButton { |
|
210 id: textButton |
|
211 text: "Send Text"; |
|
212 } |
|
213 Item { |
|
214 height:childrenRect.height |
|
215 width: childrenRect.width |
|
216 MediaButton { |
|
217 id: viewButton |
|
218 text: "More..." |
|
219 opacity: 0; |
|
220 onClicked: wrapper.bigDetailsMode = 1; |
|
221 } |
|
222 MediaButton { |
|
223 id: smallAgainButton |
|
224 text: "Back"; |
|
225 anchors.top:viewButton.top; |
|
226 opacity: 0; |
|
227 onClicked: wrapper.bigDetailsMode = 0; |
|
228 } |
|
229 } |
|
230 } |
|
231 } |
|
232 } |
|
233 |
|
234 states: [ |
|
235 State { |
|
236 name: "List"; |
|
237 when: mainList.currentIndex != index || wrapper.littleDetailsMode == 0 |
|
238 PropertyChanges { target: wrapper; detailsOpacity: 0; } |
|
239 PropertyChanges { target: wrapper; topColor: "#333333"; } |
|
240 PropertyChanges { target: wrapper; bottomColor: "#111111"; } |
|
241 PropertyChanges { target: buttonBox; x: wrapper.width + 6; } |
|
242 }, |
|
243 State { |
|
244 name: "MiniDetails" |
|
245 when: (mainList.currentIndex == index) && (wrapper.littleDetailsMode == 1) && (wrapper.bigDetailsMode == 0); |
|
246 PropertyChanges { target: viewButton; opacity: 1; } |
|
247 PropertyChanges { target: smallAgainButton; opacity: 0; } |
|
248 PropertyChanges { target: wrapper; height: Math.max(mainLabel.height + details.height + 4, buttonBox.height + 8); } |
|
249 PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y } // XXX I don't think this should be here |
|
250 }, |
|
251 State { |
|
252 name: "Details" |
|
253 when: (mainList.currentIndex == index) && (wrapper.bigDetailsMode == 1); |
|
254 PropertyChanges { target: wrapper; height: mainList.height; } |
|
255 PropertyChanges { target: viewButton; opacity: 0; } |
|
256 PropertyChanges { target: smallAgainButton; opacity: 1; } |
|
257 PropertyChanges { target: mainAvatar; height: 96; } |
|
258 PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y } |
|
259 PropertyChanges { target: mainList; interactive: false; } |
|
260 } |
|
261 ] |
|
262 |
|
263 transitions: [ |
|
264 Transition { |
|
265 from: "List" |
|
266 to: "MiniDetails" |
|
267 reversible: false |
|
268 SequentialAnimation { |
|
269 NumberAnimation { duration: 100; properties: "detailsOpacity,height" } |
|
270 ParallelAnimation { |
|
271 ColorAnimation { duration: 100; properties: "topColor, bottomColor";} |
|
272 NumberAnimation { duration: 150; properties: "x"; } |
|
273 } |
|
274 } |
|
275 }, |
|
276 Transition { |
|
277 from: "MiniDetails" |
|
278 to: "Details" |
|
279 reversible: false |
|
280 ParallelAnimation { |
|
281 NumberAnimation { duration: 250; properties: "contentY,opacity"; } |
|
282 SequentialAnimation { |
|
283 NumberAnimation { duration: 100; properties: "detailsOpacity,height" } |
|
284 ParallelAnimation { |
|
285 ColorAnimation { duration: 100; properties: "topColor, bottomColor";} |
|
286 NumberAnimation { duration: 150; properties: "x"; } |
|
287 } |
|
288 } |
|
289 } |
|
290 }, |
|
291 Transition { |
|
292 from: "Details" |
|
293 to: "MiniDetails" |
|
294 reversible: false |
|
295 ParallelAnimation { |
|
296 NumberAnimation { duration: 250; properties: "contentY,opacity"; } |
|
297 SequentialAnimation { |
|
298 ParallelAnimation { |
|
299 NumberAnimation { duration: 150; properties: "x"; } |
|
300 ColorAnimation { duration: 200; properties: "topColor, bottomColor";} |
|
301 } |
|
302 NumberAnimation { duration: 200; properties: "detailsOpacity,height" } |
|
303 } |
|
304 } |
|
305 }, |
|
306 Transition { |
|
307 from: "MiniDetails" |
|
308 to: "List" |
|
309 reversible: false |
|
310 SequentialAnimation { |
|
311 NumberAnimation { duration: 100; properties: "x"; } |
|
312 ParallelAnimation{ |
|
313 NumberAnimation { duration: 150; properties: "detailsOpacity,height" } |
|
314 ColorAnimation { duration: 150; properties: "topColor, bottomColor";} |
|
315 } |
|
316 } |
|
317 } |
|
318 ] |
|
319 } |
|
320 } |
|
321 |
|
322 ListView { |
|
323 id: mainList |
|
324 model: contactModel |
|
325 width: parent.width; height: parent.height |
|
326 delegate: listdelegate |
|
327 highlightFollowsCurrentItem: false |
|
328 focus: true |
|
329 anchors.fill: parent |
|
330 keyNavigationWraps: true |
|
331 } |
|
332 |
|
333 // Attach scrollbar to the right edge of the view. |
|
334 ScrollBar { |
|
335 id: verticalScrollBar |
|
336 opacity: 0 |
|
337 orientation: "Vertical" |
|
338 position: mainList.visibleArea.yPosition |
|
339 pageSize: mainList.visibleArea.heightRatio |
|
340 width: 20 |
|
341 height: mainList.height |
|
342 anchors.right: mainList.right |
|
343 fgColor: "white" |
|
344 // Only show the scrollbar when the view is moving. |
|
345 states: [ |
|
346 State { |
|
347 name: "ShowBars"; when: mainList.moving |
|
348 PropertyChanges { target: verticalScrollBar; opacity: 1 } |
|
349 } |
|
350 ] |
|
351 transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ] |
|
352 } |
|
353 } |
|
354 |
|
355 // ![0] |