17 } |
17 } |
18 function gotContacts(c) { |
18 function gotContacts(c) { |
19 if(c == undefined){ |
19 if(c == undefined){ |
20 return; |
20 return; |
21 } |
21 } |
22 /* |
22 |
23 print("Got contacts: " + c.name); |
|
24 print(" Available actions: " + c.availableActions); |
|
25 print(" details: " + c.details);detailsOpacity |
|
26 */ |
|
27 var o = c.values("OnlineAccount"); |
|
28 var q = c.values("Presence"); |
23 var q = c.values("Presence"); |
29 |
24 |
30 nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email, "avatarSource": "qrc:/default.svg"}); |
25 nameModel.append({"name": c.name, |
31 |
26 "presence": "Status: " + q.Presence, |
32 /* |
27 "email": c.email, |
33 var j; |
28 "avatarSource": c.avatar ? c.avatar : "qrc:/default.svg", |
34 for(j in c.details){ |
29 "hasThumbnail" : c.hasThumbnail, |
35 var o = c.values(c.details[j]); |
30 "avatarImage": c.thumbnail, |
36 var i; |
31 "interestLabel" : c.interestLabel, |
37 for(i in o){ |
32 "interest" : c.interest}); |
38 print(" "+ c.details[j] + "/" + i + ": " + o[i]); |
33 |
39 } |
|
40 } |
|
41 */ |
|
42 |
|
43 } |
|
44 function clickedList(index) { |
|
45 mainList.currentIndex = index; |
|
46 } |
34 } |
47 } |
35 } |
48 |
36 |
49 Component.onCompleted: startup(); |
37 Component.onCompleted: startup(); |
50 |
38 |
60 Component { |
48 Component { |
61 id: listdelegate |
49 id: listdelegate |
62 Rectangle { |
50 Rectangle { |
63 id: wrapper |
51 id: wrapper |
64 border.width: 2 |
52 border.width: 2 |
65 height: 30; |
53 height: mainLabel.height; |
|
54 width: mainList.width; |
66 |
55 |
67 property color topColor: "#333333"; |
56 property color topColor: "#333333"; |
68 property color bottomColor: "#111111"; |
57 property color bottomColor: "#111111"; |
69 property real detailsOpacity: 0 |
58 property real detailsOpacity: 0 |
70 |
59 |
71 gradient: Gradient { |
60 gradient: Gradient { |
72 GradientStop { position: 0.0; color: topColor } |
61 GradientStop { position: 0.0; color: topColor } |
73 GradientStop { position: 1.0; color: bottomColor } |
62 GradientStop { position: 1.0; color: bottomColor } |
74 } |
63 } |
75 |
64 |
76 Item { |
65 Row { |
77 id: mainAvatar; |
66 spacing: 2 |
78 anchors.left: parent.left; |
67 Item { |
79 anchors.top: parent.top; |
68 id: mainAvatar; |
80 width: avatarFrame.width; |
69 height: wrapper.height; |
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; |
70 width: height; |
90 x: 3; y: 3; |
71 |
|
72 Rectangle { |
|
73 border.width: 2; |
|
74 radius: 4; |
|
75 anchors.fill: parent; |
|
76 anchors.margins: 3; |
|
77 |
|
78 Image { |
|
79 id: avatar |
|
80 anchors.fill: parent; |
|
81 anchors.margins: 3; |
|
82 |
|
83 pixmap: avatarImage |
|
84 source: hasThumbnail ? "" : avatarSource; |
|
85 fillMode: Image.PreserveAspectFit |
|
86 } |
|
87 } |
91 } |
88 } |
92 |
89 |
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 |
|
117 Text { |
|
118 x:8; y:8; |
|
119 anchors.left: parent.left; |
|
120 anchors.right: parent.right; |
|
121 id: nameTxt |
|
122 text: name |
|
123 color: "white"; |
|
124 } |
|
125 } |
|
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 { |
90 Column { |
140 Text { |
91 Item { |
141 id: emailId |
92 id: mainLabel; |
142 text: email |
93 width: nameTxt.width |
143 color: details.textColor; |
94 height: nameTxt.height + 16; |
144 } |
|
145 Row { |
|
146 spacing: 5 |
|
147 Text { |
95 Text { |
148 id: accountPathId |
96 id: nameTxt |
149 text: accountPath |
97 y: 8; |
150 color: details.textColor; |
98 text: name |
|
99 color: "white"; |
151 } |
100 } |
152 Text { |
101 } |
153 id: presenceId |
102 |
154 text: presence |
103 Item { |
155 color: details.textColor; |
104 id: details |
|
105 property color textColor: "#ffffdd"; |
|
106 opacity: wrapper.detailsOpacity |
|
107 height: childrenRect.height + 6; |
|
108 width: childrenRect.width; |
|
109 Column { |
|
110 Text { |
|
111 text: interestLabel + interest |
|
112 color: details.textColor; |
|
113 } |
|
114 Text { |
|
115 text: presence |
|
116 color: details.textColor; |
|
117 } |
156 } |
118 } |
157 } |
119 } |
158 } |
120 } |
159 } |
121 } |
160 |
122 |
161 states: State { |
123 states: State { |
162 name: "Details" |
124 name: "Details" |
|
125 when: wrapper.ListView.isCurrentItem; |
163 PropertyChanges { target: wrapper; detailsOpacity: 1; } |
126 PropertyChanges { target: wrapper; detailsOpacity: 1; } |
164 PropertyChanges { target: wrapper; topColor: "#666666"; } |
127 PropertyChanges { target: wrapper; topColor: "#999999"; } |
165 PropertyChanges { target: wrapper; bottomColor: "#222222"; } |
128 PropertyChanges { target: wrapper; bottomColor: "#444444"; } |
166 PropertyChanges { target: wrapper; height: mainLabel.height + emailId.height + accountPathId.height + presenceId.height; } |
129 PropertyChanges { target: wrapper; height: mainLabel.height + details.height + 4; } |
167 } |
130 } |
168 |
131 |
169 transitions: Transition { |
132 transitions: [ |
170 from: "" |
133 Transition { |
171 to: "Details" |
134 from: "" |
172 reversible: true |
135 to: "Details" |
173 ParallelAnimation { |
136 reversible: false |
174 ColorAnimation { duration: 150; properties: "topColor, bottomColor";} |
137 SequentialAnimation { |
175 NumberAnimation { duration: 100; properties: "detailsOpacity,height" } |
138 NumberAnimation { duration: 100; properties: "detailsOpacity,height" } |
|
139 ColorAnimation { duration: 100; properties: "topColor, bottomColor";} |
|
140 } |
|
141 }, |
|
142 Transition { |
|
143 to: "" |
|
144 from: "Details" |
|
145 reversible: false |
|
146 SequentialAnimation { |
|
147 NumberAnimation { duration: 100; properties: "detailsOpacity,height" } |
|
148 ColorAnimation { duration: 100; properties: "topColor, bottomColor";} |
|
149 } |
176 } |
150 } |
177 } |
151 ] |
178 MouseArea { |
152 MouseArea { |
179 id: mr |
153 id: mr |
180 width: topItem.width; |
154 width: topItem.width; |
181 height: wrapper.height; |
155 height: wrapper.height; |
182 anchors.centerIn: parent; |
156 anchors.centerIn: parent; |
183 onClicked: wrapper.state == "" ? wrapper.state = "Details" : wrapper.state = ""; |
157 onClicked: mainList.currentIndex = index; |
184 } |
158 } |
185 } |
|
186 } |
|
187 |
|
188 Component { |
|
189 id: listhighlight |
|
190 Rectangle { |
|
191 width: parent.width-8 |
|
192 height: 40 |
|
193 color: "lightsteelblue" |
|
194 radius: 5 |
|
195 } |
159 } |
196 } |
160 } |
197 |
161 |
198 ListView { |
162 ListView { |
199 id: mainList |
163 id: mainList |
200 model: nameModel |
164 model: nameModel |
201 width: parent.width; height: parent.height |
165 width: parent.width; height: parent.height |
202 delegate: listdelegate |
166 delegate: listdelegate |
203 highlight: listhighlight |
167 highlightFollowsCurrentItem: false |
204 highlightFollowsCurrentItem: true |
|
205 focus: true |
168 focus: true |
206 anchors.fill: parent |
169 anchors.fill: parent |
207 highlightMoveSpeed: 5000 |
170 highlightMoveSpeed: 5000 |
|
171 keyNavigationWraps: true |
208 } |
172 } |
209 |
173 |
210 ListModel { |
174 ListModel { |
211 id: nameModel |
175 id: nameModel |
212 } |
176 } |