Merge lp:~fmunozs/ubuntu-twitter-app/profileview into lp:ubuntu-twitter-app

Proposed by Fernando Muñoz on 2013-02-25
Status: Needs review
Proposed branch: lp:~fmunozs/ubuntu-twitter-app/profileview
Merge into: lp:ubuntu-twitter-app
Diff against target: 598 lines (+544/-18)
4 files modified
ProfilePage.qml (+243/-0)
TimelinePage.qml (+176/-0)
TweetDelegate.qml (+102/-0)
twitter.qml (+23/-18)
To merge this branch: bzr merge lp:~fmunozs/ubuntu-twitter-app/profileview
Reviewer Review Type Date Requested Status
Ubuntu Phone Apps Jenkins Bot continuous-integration Needs Fixing on 2013-02-25
Ubuntu Twitter Developers 2013-02-25 Pending
Review via email: mp+150429@code.launchpad.net

Description of the change

This branch implements an initial TweetDelegate that can be used in several places of the application.

It also includes the initial sketch for the ProfilePage that can be used to show your own profile+tweets and also others profiles+tweets.

To post a comment you must log in.

FAILED: Continuous integration, rev:3
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~fmunozs/ubuntu-twitter-app/profileview/+merge/150429/+edit-commit-message

http://91.189.93.125:8080/job/ubuntu-twitter-app-ci/1/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-twitter-app-ci/./build=pbuilder,distribution=quantal,flavor=amd64/1/console

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-twitter-app-ci/1//rebuild/?

review: Needs Fixing (continuous-integration)

Unmerged revisions

3. By Fernando Muñoz on 2013-02-25

Initial list delegate and profile page

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'ProfilePage.qml'
2--- ProfilePage.qml 1970-01-01 00:00:00 +0000
3+++ ProfilePage.qml 2013-02-25 20:38:19 +0000
4@@ -0,0 +1,243 @@
5+import QtQuick 2.0
6+import Ubuntu.Components 0.1
7+
8+Page {
9+ tools: ToolbarActions {
10+ Action {
11+ objectName: "action"
12+ iconSource: Qt.resolvedUrl("avatar.png")
13+ text: i18n.tr("Tap me!")
14+
15+ onTriggered: {
16+ label.text = i18n.tr("Toolbar tapped")
17+ }
18+ }
19+ }
20+
21+
22+
23+
24+ Rectangle {
25+ id: topRectangle
26+ anchors.top: parent.top
27+ anchors.left: parent.left
28+ anchors.right: parent.right
29+ height: 200
30+ color: "lightgray"
31+
32+
33+
34+ Image {
35+ anchors.top: parent.top
36+ anchors.left: parent.left
37+ anchors.right: parent.right
38+
39+ source: "https://ma.twimg.com/profile_banners/223480573/1349351123/mobile"
40+ height: parent.height
41+ fillMode: Image.PreserveAspectCrop
42+ }
43+
44+ // Maybe using a transparent PNG is a better approach (performance)
45+ Rectangle {
46+ width: parent.width
47+ height: parent.height
48+ x: 0
49+ y: 0
50+ gradient: Gradient {
51+ GradientStop {color: "transparent"; position: 0.5}
52+ GradientStop {color: "#444"; position: 1}
53+ }
54+ }
55+ UbuntuShape {
56+ id: profilePicRectangle
57+ anchors.top: parent.top
58+ width: 100
59+ anchors.topMargin: 40
60+ anchors.horizontalCenter: parent.horizontalCenter
61+ color: "white"
62+ height: 100
63+ image: Image {
64+ id: picImage
65+ source: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
66+ }
67+ }
68+
69+ Text {
70+ id: realName
71+ text: "Fernando M"
72+ anchors.horizontalCenter: parent.horizontalCenter
73+ anchors.top: profilePicRectangle.bottom
74+ anchors.topMargin: 8
75+ color: "white"
76+ font.pixelSize: 16
77+ font.bold: true
78+ style: Text.Raised
79+
80+ }
81+
82+
83+ Text {
84+
85+ style: Text.Raised
86+ font.pixelSize: 14
87+ text: "@bef0rd"
88+ font.bold: true
89+
90+ anchors.horizontalCenter: parent.horizontalCenter
91+ anchors.top: realName.bottom
92+ anchors.topMargin: 2
93+ color: "white"
94+
95+ }
96+
97+
98+
99+
100+ }
101+
102+
103+ ListModel {
104+ id: tweetModel
105+
106+ ListElement {
107+ title: "We’re all used to the 140-character limit by now, but do you know how it started? Here’s a little history lesson for anyone wondering why ..."
108+ author: "@bef0rd"
109+ display: "Fernando M"
110+ date: "1h"
111+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
112+
113+ }
114+
115+ ListElement {
116+ title: "Another example from my self but this time with a slightly longer message."
117+ author: "@bef0rd"
118+ display: "Fernando M"
119+ date: "1d"
120+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
121+ favorite: true
122+
123+
124+ }
125+ ListElement {
126+ title: "I left my bed once. It was awful."
127+ author: "@grumpycat"
128+ display: "Tard"
129+ date: "1d"
130+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
131+ retweet: true
132+ retweetAuthor: "@bef0rd"
133+ favorite: true
134+
135+ }
136+
137+
138+ ListElement {
139+ title: "<a href='#Ubuntu'>#Ubuntu</a> Touch Developer Preview code released soon for developers' spare devices. Not consumer ready just yet!"
140+ author: "@Ubuntu"
141+ display: "Ubuntu"
142+ date: "1d"
143+ picture: "https://si0.twimg.com/profile_images/1486153713/cof_orange_hex_bigger.jpg"
144+ retweet: true
145+ retweetAuthor: "@bef0rd"
146+ favorite: true
147+
148+ }
149+
150+ ListElement {
151+ title: "Worst apocalypse ever."
152+ author: "@grumpycat"
153+ display: "Tard"
154+ date: "1d"
155+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
156+ retweet: true
157+ retweetAuthor: "@bef0rd"
158+
159+ }
160+
161+
162+ ListElement {
163+ title: "Another example from my self but this time with a slightly longer message."
164+ author: "@bef0rd"
165+ display: "Fernando M"
166+ date: "1d"
167+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
168+
169+ }
170+ ListElement {
171+ title: "I like the <a href='#Titanic'>#Titanic</a> movie, my favorite character was the iceberg."
172+ author: "@grumpycat"
173+ display: "Tard"
174+ date: "1d"
175+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
176+ retweet: true
177+ retweetAuthor: "@bef0rd"
178+
179+ }
180+
181+ }
182+
183+
184+ Rectangle {
185+ id: rectangleInfo
186+ height: units.gu(7)
187+ anchors.top: topRectangle.bottom
188+ anchors.left: parent.left
189+ anchors.right: parent.right
190+ color: "white"
191+ Text {
192+ text: "1,000 TWEETS"
193+ anchors.left: parent.left
194+ anchors.leftMargin: units.gu(3)
195+ width: units.gu(10)
196+ wrapMode: Text.WordWrap
197+ anchors.verticalCenter: parent.verticalCenter
198+
199+ }
200+ Text {
201+ text: "1,222 FOLLOWING"
202+ anchors.horizontalCenter: parent.horizontalCenter
203+ anchors.verticalCenter: parent.verticalCenter
204+ width: units.gu(10)
205+ wrapMode: Text.WordWrap
206+ }
207+
208+ Text {
209+ anchors.rightMargin: units.gu(3)
210+ anchors.verticalCenter: parent.verticalCenter
211+
212+
213+ text: "1,444 FOLLOWERS"
214+ width: units.gu(10)
215+ wrapMode: Text.WordWrap
216+ anchors.right: parent.right
217+ }
218+ }
219+
220+ Rectangle {
221+ anchors.top: rectangleInfo.bottom
222+ anchors.left: parent.left
223+ anchors.right: parent.right
224+ anchors.bottom: parent.bottom
225+
226+ ListView {
227+ id: listTweets
228+ clip: true
229+ anchors.fill: parent
230+ model: tweetModel
231+ delegate: TweetDelegate {
232+ onClicked: console.log("tweet clicked: "+ title)
233+ onLinkClicked: console.log("link: " + link)
234+ onProfileClicked: console.log("profile: " + profile)
235+
236+ }
237+
238+
239+ }
240+ Scrollbar {
241+ flickableItem: listTweets
242+ align: Qt.AlignTrailing
243+ }
244+
245+ }
246+
247+}
248
249=== added file 'TimelinePage.qml'
250--- TimelinePage.qml 1970-01-01 00:00:00 +0000
251+++ TimelinePage.qml 2013-02-25 20:38:19 +0000
252@@ -0,0 +1,176 @@
253+import QtQuick 2.0
254+import Ubuntu.Components 0.1
255+
256+Page {
257+ tools: ToolbarActions {
258+ Action {
259+ objectName: "action"
260+ iconSource: Qt.resolvedUrl("avatar.png")
261+ text: i18n.tr("Write")
262+
263+ onTriggered: {
264+ console.log("write new tweet")
265+ }
266+ }
267+ }
268+
269+
270+
271+ ListModel {
272+ id: tweetModel
273+
274+ ListElement {
275+ title: "<a hreg='#Ubuntu'>#Ubuntu</a> tablet sets new standard: multitasking productivity, effortless navigation & defence-ready security. More here: http://buzz.mw/-FWD_y"
276+ author: "@Ubuntu"
277+ display: "Ubuntu"
278+ date: "4min"
279+ picture: "https://si0.twimg.com/profile_images/1486153713/cof_orange_hex_bigger.jpg"
280+ }
281+
282+ ListElement {
283+ title: "We’re all used to the 140-character limit by now, but do you know how it started? Here’s a little history lesson for anyone wondering why ..."
284+ author: "@bef0rd"
285+ display: "Fernando M"
286+ date: "1h"
287+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
288+
289+ }
290+
291+ ListElement {
292+ title: "Another example from my self but this time with a slightly longer message."
293+ author: "@bef0rd"
294+ display: "Fernando M"
295+ date: "1d"
296+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
297+ favorite: true
298+
299+
300+ }
301+ ListElement {
302+ title: "I left my bed once. It was awful."
303+ author: "@grumpycat"
304+ display: "Tard"
305+ date: "1d"
306+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
307+ retweet: true
308+ retweetAuthor: "@bef0rd"
309+ favorite: true
310+
311+ }
312+
313+
314+ ListElement {
315+ title: "<a href='#Ubuntu'>#Ubuntu</a> Touch Developer Preview code released soon for developers' spare devices. Not consumer ready just yet!"
316+ author: "@Ubuntu"
317+ display: "Ubuntu"
318+ date: "1d"
319+ picture: "https://si0.twimg.com/profile_images/1486153713/cof_orange_hex_bigger.jpg"
320+ retweet: true
321+ retweetAuthor: "@bef0rd"
322+ favorite: true
323+
324+ }
325+
326+
327+ ListElement {
328+ title: "We’re all used to the 140-character limit by now, but do you know how it started? Here’s a little history lesson for anyone wondering why ..."
329+ author: "@bef0rd"
330+ display: "Fernando M"
331+ date: "1h"
332+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
333+
334+ }
335+
336+
337+ ListElement {
338+ title: "Worst apocalypse ever."
339+ author: "@grumpycat"
340+ display: "Tard"
341+ date: "1d"
342+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
343+ retweet: true
344+ retweetAuthor: "@bef0rd"
345+
346+ }
347+
348+
349+ ListElement {
350+ title: "Another example from my self but this time with a slightly longer message."
351+ author: "@bef0rd"
352+ display: "Fernando M"
353+ date: "1d"
354+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
355+
356+ }
357+ ListElement {
358+ title: "I like the <a href='#Titanic'>#Titanic</a> movie, my favorite character was the iceberg."
359+ author: "@grumpycat"
360+ display: "Tard"
361+ date: "1d"
362+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
363+ retweet: true
364+ retweetAuthor: "@juan"
365+
366+ }
367+
368+ ListElement {
369+ title: "We’re all used to the 140-character limit by now, but do you know how it started? Here’s a little history lesson for anyone wondering why ..."
370+ author: "@bef0rd"
371+ display: "Fernando M"
372+ date: "1h"
373+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
374+
375+ }
376+
377+
378+ ListElement {
379+ title: "We’re all used to the 140-character limit by now, but do you know how it started? Here’s a little history lesson for anyone wondering why ..."
380+ author: "@bef0rd"
381+ display: "Fernando M"
382+ date: "1h"
383+ picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
384+
385+ }
386+
387+
388+
389+ ListElement {
390+ title: "Worst apocalypse ever."
391+ author: "@grumpycat"
392+ display: "Tard"
393+ date: "1d"
394+ picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
395+
396+ }
397+
398+ }
399+
400+ Rectangle {
401+ anchors.top: parent.top
402+ anchors.left: parent.left
403+ anchors.right: parent.right
404+ anchors.bottom: parent.bottom
405+
406+ ListView {
407+ id: listTweets
408+ clip: true
409+ anchors.fill: parent
410+ model: tweetModel
411+ delegate: TweetDelegate {
412+ onClicked: console.log("tweet clicked: "+ title)
413+ onLinkClicked: console.log("link: " + link)
414+ onProfileClicked: console.log("profile: " + profile)
415+
416+ }
417+
418+
419+ }
420+ Scrollbar {
421+ flickableItem: listTweets
422+ align: Qt.AlignTrailing
423+ }
424+
425+
426+ }
427+
428+}
429
430=== added file 'TweetDelegate.qml'
431--- TweetDelegate.qml 1970-01-01 00:00:00 +0000
432+++ TweetDelegate.qml 2013-02-25 20:38:19 +0000
433@@ -0,0 +1,102 @@
434+import QtQuick 2.0
435+import Ubuntu.Components 0.1
436+
437+Item {
438+ //TODO: handle signals onLink
439+ id: listItem
440+ signal clicked;
441+ signal linkClicked(string link);
442+ signal profileClicked(string profile);
443+
444+ property alias pressed: mouseArea.pressed
445+
446+
447+ height: tweetMessage.paintedHeight + (retweet ? units.gu(10) : units.gu(7) )
448+ width: parent.width
449+
450+ Rectangle {
451+ anchors.fill: parent
452+
453+ // anchors.margins: units.gu(0.5)
454+ color: pressed ? "#eeeeee" : "white"
455+ border.color: "#efefef"
456+ border.width: 1
457+
458+ UbuntuShape {
459+ id: profilePicture
460+ anchors.left: parent.left
461+ anchors.verticalCenter: parent.verticalCenter
462+ anchors.margins: units.gu(0.5)
463+ color: "#eeeeee"
464+ width: units.gu(8)
465+ height: units.gu(8)
466+ image: Image {
467+ source: picture
468+ }
469+ }
470+
471+
472+ MouseArea {
473+ id: mouseArea
474+ anchors.fill: parent
475+ onClicked: listItem.clicked()
476+
477+ }
478+
479+ Image {
480+ anchors.top: parent.top
481+ anchors.right: parent.right
482+ source: (favorite && retweet) ? "favoretweedted.png" : ( favorite ? "favorited.png" : "retweeted.png")
483+ visible: (favorite || retweet)
484+ }
485+
486+
487+ Image {
488+ visible: retweet
489+ source: "./retweet.png"
490+ anchors.left: profilePicture.right
491+ anchors.top: parent.top
492+ anchors.margins: units.gu(0.5)
493+ id: retweetImg
494+
495+ }
496+
497+ Label {
498+ id: retweetLabel
499+ text: retweet ? "retweeted by " + retweetAuthor : ""
500+ anchors.top: parent.top
501+ anchors.margins: units.gu(0.5)
502+ anchors.left: retweetImg.right
503+ visible: retweet
504+ }
505+
506+ Label {
507+ id: authorLabel
508+ text: "<b>" + display + " " + author
509+ anchors.top: retweet ? retweetLabel.bottom : parent.top
510+ anchors.margins: units.gu(1)
511+ anchors.left: profilePicture.right
512+ MouseArea {
513+ anchors.fill: parent
514+ onClicked: {
515+ listItem.profileClicked(author)
516+ console.log("author ca: "+author)
517+ }
518+ }
519+
520+ }
521+
522+ Label {
523+ id: tweetMessage
524+ text: title
525+ wrapMode: Text.Wrap
526+ anchors.top: authorLabel.bottom
527+ anchors.margins: units.gu(1)
528+ anchors.left: profilePicture.right
529+ anchors.right: parent.right
530+ anchors.bottom: parent.bottom
531+ onLinkActivated: { listItem.linkClicked(link) }
532+ }
533+
534+ }
535+}
536
537=== modified file 'twitter.qml'
538--- twitter.qml 2013-02-12 16:28:49 +0000
539+++ twitter.qml 2013-02-25 20:38:19 +0000
540@@ -17,29 +17,27 @@
541 Tabs {
542 id: tabs
543 anchors.fill: parent
544-
545+
546+
547 // First tab begins here
548 Tab {
549- objectName: "Tab1"
550-
551- title: i18n.tr("Twitter")
552-
553- // Tab content begins here
554- page: Page {
555- Column {
556- anchors.centerIn: parent
557- Label {
558- text: i18n.tr("Swipe from right to left to change tab.")
559- }
560- }
561- }
562- }
563-
564+ objectName: "timelineTab"
565+ title: i18n.tr("Timeline")
566+ page: TimelinePage {}
567+ }
568+
569+ Tab {
570+ objectName: "profileTab"
571+ title: i18n.tr("Profile")
572+ page: ProfilePage { }
573+
574+ }
575+
576 // Second tab begins here
577 Tab {
578- objectName: "Tab2"
579+ objectName: "connectionsTab"
580
581- title: i18n.tr("Optional Screen")
582+ title: i18n.tr("Connections")
583 page: Page {
584 anchors.margins: units.gu(2)
585
586@@ -67,5 +65,12 @@
587 }
588 }
589 }
590+
591+ Tab {
592+ objectName: "dmTab"
593+ title: i18n.tr("Direct Messages")
594+ }
595+
596+
597 }
598 }

Subscribers

People subscribed via source and target branches