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
=== added file 'ProfilePage.qml'
--- ProfilePage.qml 1970-01-01 00:00:00 +0000
+++ ProfilePage.qml 2013-02-25 20:38:19 +0000
@@ -0,0 +1,243 @@
1import QtQuick 2.0
2import Ubuntu.Components 0.1
3
4Page {
5 tools: ToolbarActions {
6 Action {
7 objectName: "action"
8 iconSource: Qt.resolvedUrl("avatar.png")
9 text: i18n.tr("Tap me!")
10
11 onTriggered: {
12 label.text = i18n.tr("Toolbar tapped")
13 }
14 }
15 }
16
17
18
19
20 Rectangle {
21 id: topRectangle
22 anchors.top: parent.top
23 anchors.left: parent.left
24 anchors.right: parent.right
25 height: 200
26 color: "lightgray"
27
28
29
30 Image {
31 anchors.top: parent.top
32 anchors.left: parent.left
33 anchors.right: parent.right
34
35 source: "https://ma.twimg.com/profile_banners/223480573/1349351123/mobile"
36 height: parent.height
37 fillMode: Image.PreserveAspectCrop
38 }
39
40 // Maybe using a transparent PNG is a better approach (performance)
41 Rectangle {
42 width: parent.width
43 height: parent.height
44 x: 0
45 y: 0
46 gradient: Gradient {
47 GradientStop {color: "transparent"; position: 0.5}
48 GradientStop {color: "#444"; position: 1}
49 }
50 }
51 UbuntuShape {
52 id: profilePicRectangle
53 anchors.top: parent.top
54 width: 100
55 anchors.topMargin: 40
56 anchors.horizontalCenter: parent.horizontalCenter
57 color: "white"
58 height: 100
59 image: Image {
60 id: picImage
61 source: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
62 }
63 }
64
65 Text {
66 id: realName
67 text: "Fernando M"
68 anchors.horizontalCenter: parent.horizontalCenter
69 anchors.top: profilePicRectangle.bottom
70 anchors.topMargin: 8
71 color: "white"
72 font.pixelSize: 16
73 font.bold: true
74 style: Text.Raised
75
76 }
77
78
79 Text {
80
81 style: Text.Raised
82 font.pixelSize: 14
83 text: "@bef0rd"
84 font.bold: true
85
86 anchors.horizontalCenter: parent.horizontalCenter
87 anchors.top: realName.bottom
88 anchors.topMargin: 2
89 color: "white"
90
91 }
92
93
94
95
96 }
97
98
99 ListModel {
100 id: tweetModel
101
102 ListElement {
103 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 ..."
104 author: "@bef0rd"
105 display: "Fernando M"
106 date: "1h"
107 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
108
109 }
110
111 ListElement {
112 title: "Another example from my self but this time with a slightly longer message."
113 author: "@bef0rd"
114 display: "Fernando M"
115 date: "1d"
116 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
117 favorite: true
118
119
120 }
121 ListElement {
122 title: "I left my bed once. It was awful."
123 author: "@grumpycat"
124 display: "Tard"
125 date: "1d"
126 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
127 retweet: true
128 retweetAuthor: "@bef0rd"
129 favorite: true
130
131 }
132
133
134 ListElement {
135 title: "<a href='#Ubuntu'>#Ubuntu</a> Touch Developer Preview code released soon for developers' spare devices. Not consumer ready just yet!"
136 author: "@Ubuntu"
137 display: "Ubuntu"
138 date: "1d"
139 picture: "https://si0.twimg.com/profile_images/1486153713/cof_orange_hex_bigger.jpg"
140 retweet: true
141 retweetAuthor: "@bef0rd"
142 favorite: true
143
144 }
145
146 ListElement {
147 title: "Worst apocalypse ever."
148 author: "@grumpycat"
149 display: "Tard"
150 date: "1d"
151 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
152 retweet: true
153 retweetAuthor: "@bef0rd"
154
155 }
156
157
158 ListElement {
159 title: "Another example from my self but this time with a slightly longer message."
160 author: "@bef0rd"
161 display: "Fernando M"
162 date: "1d"
163 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
164
165 }
166 ListElement {
167 title: "I like the <a href='#Titanic'>#Titanic</a> movie, my favorite character was the iceberg."
168 author: "@grumpycat"
169 display: "Tard"
170 date: "1d"
171 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
172 retweet: true
173 retweetAuthor: "@bef0rd"
174
175 }
176
177 }
178
179
180 Rectangle {
181 id: rectangleInfo
182 height: units.gu(7)
183 anchors.top: topRectangle.bottom
184 anchors.left: parent.left
185 anchors.right: parent.right
186 color: "white"
187 Text {
188 text: "1,000 TWEETS"
189 anchors.left: parent.left
190 anchors.leftMargin: units.gu(3)
191 width: units.gu(10)
192 wrapMode: Text.WordWrap
193 anchors.verticalCenter: parent.verticalCenter
194
195 }
196 Text {
197 text: "1,222 FOLLOWING"
198 anchors.horizontalCenter: parent.horizontalCenter
199 anchors.verticalCenter: parent.verticalCenter
200 width: units.gu(10)
201 wrapMode: Text.WordWrap
202 }
203
204 Text {
205 anchors.rightMargin: units.gu(3)
206 anchors.verticalCenter: parent.verticalCenter
207
208
209 text: "1,444 FOLLOWERS"
210 width: units.gu(10)
211 wrapMode: Text.WordWrap
212 anchors.right: parent.right
213 }
214 }
215
216 Rectangle {
217 anchors.top: rectangleInfo.bottom
218 anchors.left: parent.left
219 anchors.right: parent.right
220 anchors.bottom: parent.bottom
221
222 ListView {
223 id: listTweets
224 clip: true
225 anchors.fill: parent
226 model: tweetModel
227 delegate: TweetDelegate {
228 onClicked: console.log("tweet clicked: "+ title)
229 onLinkClicked: console.log("link: " + link)
230 onProfileClicked: console.log("profile: " + profile)
231
232 }
233
234
235 }
236 Scrollbar {
237 flickableItem: listTweets
238 align: Qt.AlignTrailing
239 }
240
241 }
242
243}
0244
=== added file 'TimelinePage.qml'
--- TimelinePage.qml 1970-01-01 00:00:00 +0000
+++ TimelinePage.qml 2013-02-25 20:38:19 +0000
@@ -0,0 +1,176 @@
1import QtQuick 2.0
2import Ubuntu.Components 0.1
3
4Page {
5 tools: ToolbarActions {
6 Action {
7 objectName: "action"
8 iconSource: Qt.resolvedUrl("avatar.png")
9 text: i18n.tr("Write")
10
11 onTriggered: {
12 console.log("write new tweet")
13 }
14 }
15 }
16
17
18
19 ListModel {
20 id: tweetModel
21
22 ListElement {
23 title: "<a hreg='#Ubuntu'>#Ubuntu</a> tablet sets new standard: multitasking productivity, effortless navigation & defence-ready security. More here: http://buzz.mw/-FWD_y"
24 author: "@Ubuntu"
25 display: "Ubuntu"
26 date: "4min"
27 picture: "https://si0.twimg.com/profile_images/1486153713/cof_orange_hex_bigger.jpg"
28 }
29
30 ListElement {
31 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 ..."
32 author: "@bef0rd"
33 display: "Fernando M"
34 date: "1h"
35 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
36
37 }
38
39 ListElement {
40 title: "Another example from my self but this time with a slightly longer message."
41 author: "@bef0rd"
42 display: "Fernando M"
43 date: "1d"
44 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
45 favorite: true
46
47
48 }
49 ListElement {
50 title: "I left my bed once. It was awful."
51 author: "@grumpycat"
52 display: "Tard"
53 date: "1d"
54 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
55 retweet: true
56 retweetAuthor: "@bef0rd"
57 favorite: true
58
59 }
60
61
62 ListElement {
63 title: "<a href='#Ubuntu'>#Ubuntu</a> Touch Developer Preview code released soon for developers' spare devices. Not consumer ready just yet!"
64 author: "@Ubuntu"
65 display: "Ubuntu"
66 date: "1d"
67 picture: "https://si0.twimg.com/profile_images/1486153713/cof_orange_hex_bigger.jpg"
68 retweet: true
69 retweetAuthor: "@bef0rd"
70 favorite: true
71
72 }
73
74
75 ListElement {
76 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 ..."
77 author: "@bef0rd"
78 display: "Fernando M"
79 date: "1h"
80 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
81
82 }
83
84
85 ListElement {
86 title: "Worst apocalypse ever."
87 author: "@grumpycat"
88 display: "Tard"
89 date: "1d"
90 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
91 retweet: true
92 retweetAuthor: "@bef0rd"
93
94 }
95
96
97 ListElement {
98 title: "Another example from my self but this time with a slightly longer message."
99 author: "@bef0rd"
100 display: "Fernando M"
101 date: "1d"
102 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
103
104 }
105 ListElement {
106 title: "I like the <a href='#Titanic'>#Titanic</a> movie, my favorite character was the iceberg."
107 author: "@grumpycat"
108 display: "Tard"
109 date: "1d"
110 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
111 retweet: true
112 retweetAuthor: "@juan"
113
114 }
115
116 ListElement {
117 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 ..."
118 author: "@bef0rd"
119 display: "Fernando M"
120 date: "1h"
121 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
122
123 }
124
125
126 ListElement {
127 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 ..."
128 author: "@bef0rd"
129 display: "Fernando M"
130 date: "1h"
131 picture: "https://ma.twimg.com/profile_images/1556542534/image_normal.jpg"
132
133 }
134
135
136
137 ListElement {
138 title: "Worst apocalypse ever."
139 author: "@grumpycat"
140 display: "Tard"
141 date: "1d"
142 picture: "https://si0.twimg.com/profile_images/2842874910/88d2fa4202c6c2013ed5bd5e2882a3dd_bigger.png"
143
144 }
145
146 }
147
148 Rectangle {
149 anchors.top: parent.top
150 anchors.left: parent.left
151 anchors.right: parent.right
152 anchors.bottom: parent.bottom
153
154 ListView {
155 id: listTweets
156 clip: true
157 anchors.fill: parent
158 model: tweetModel
159 delegate: TweetDelegate {
160 onClicked: console.log("tweet clicked: "+ title)
161 onLinkClicked: console.log("link: " + link)
162 onProfileClicked: console.log("profile: " + profile)
163
164 }
165
166
167 }
168 Scrollbar {
169 flickableItem: listTweets
170 align: Qt.AlignTrailing
171 }
172
173
174 }
175
176}
0177
=== added file 'TweetDelegate.qml'
--- TweetDelegate.qml 1970-01-01 00:00:00 +0000
+++ TweetDelegate.qml 2013-02-25 20:38:19 +0000
@@ -0,0 +1,102 @@
1import QtQuick 2.0
2import Ubuntu.Components 0.1
3
4Item {
5 //TODO: handle signals onLink
6 id: listItem
7 signal clicked;
8 signal linkClicked(string link);
9 signal profileClicked(string profile);
10
11 property alias pressed: mouseArea.pressed
12
13
14 height: tweetMessage.paintedHeight + (retweet ? units.gu(10) : units.gu(7) )
15 width: parent.width
16
17 Rectangle {
18 anchors.fill: parent
19
20 // anchors.margins: units.gu(0.5)
21 color: pressed ? "#eeeeee" : "white"
22 border.color: "#efefef"
23 border.width: 1
24
25 UbuntuShape {
26 id: profilePicture
27 anchors.left: parent.left
28 anchors.verticalCenter: parent.verticalCenter
29 anchors.margins: units.gu(0.5)
30 color: "#eeeeee"
31 width: units.gu(8)
32 height: units.gu(8)
33 image: Image {
34 source: picture
35 }
36 }
37
38
39 MouseArea {
40 id: mouseArea
41 anchors.fill: parent
42 onClicked: listItem.clicked()
43
44 }
45
46 Image {
47 anchors.top: parent.top
48 anchors.right: parent.right
49 source: (favorite && retweet) ? "favoretweedted.png" : ( favorite ? "favorited.png" : "retweeted.png")
50 visible: (favorite || retweet)
51 }
52
53
54 Image {
55 visible: retweet
56 source: "./retweet.png"
57 anchors.left: profilePicture.right
58 anchors.top: parent.top
59 anchors.margins: units.gu(0.5)
60 id: retweetImg
61
62 }
63
64 Label {
65 id: retweetLabel
66 text: retweet ? "retweeted by " + retweetAuthor : ""
67 anchors.top: parent.top
68 anchors.margins: units.gu(0.5)
69 anchors.left: retweetImg.right
70 visible: retweet
71 }
72
73 Label {
74 id: authorLabel
75 text: "<b>" + display + " " + author
76 anchors.top: retweet ? retweetLabel.bottom : parent.top
77 anchors.margins: units.gu(1)
78 anchors.left: profilePicture.right
79 MouseArea {
80 anchors.fill: parent
81 onClicked: {
82 listItem.profileClicked(author)
83 console.log("author ca: "+author)
84 }
85 }
86
87 }
88
89 Label {
90 id: tweetMessage
91 text: title
92 wrapMode: Text.Wrap
93 anchors.top: authorLabel.bottom
94 anchors.margins: units.gu(1)
95 anchors.left: profilePicture.right
96 anchors.right: parent.right
97 anchors.bottom: parent.bottom
98 onLinkActivated: { listItem.linkClicked(link) }
99 }
100
101 }
102}
0103
=== modified file 'twitter.qml'
--- twitter.qml 2013-02-12 16:28:49 +0000
+++ twitter.qml 2013-02-25 20:38:19 +0000
@@ -17,29 +17,27 @@
17 Tabs {17 Tabs {
18 id: tabs18 id: tabs
19 anchors.fill: parent19 anchors.fill: parent
20 20
21
21 // First tab begins here22 // First tab begins here
22 Tab {23 Tab {
23 objectName: "Tab1"24 objectName: "timelineTab"
24 25 title: i18n.tr("Timeline")
25 title: i18n.tr("Twitter")26 page: TimelinePage {}
26 27 }
27 // Tab content begins here28
28 page: Page {29 Tab {
29 Column {30 objectName: "profileTab"
30 anchors.centerIn: parent31 title: i18n.tr("Profile")
31 Label {32 page: ProfilePage { }
32 text: i18n.tr("Swipe from right to left to change tab.")33
33 }34 }
34 }35
35 }
36 }
37
38 // Second tab begins here36 // Second tab begins here
39 Tab {37 Tab {
40 objectName: "Tab2"38 objectName: "connectionsTab"
41 39
42 title: i18n.tr("Optional Screen")40 title: i18n.tr("Connections")
43 page: Page {41 page: Page {
44 anchors.margins: units.gu(2)42 anchors.margins: units.gu(2)
45 43
@@ -67,5 +65,12 @@
67 }65 }
68 }66 }
69 }67 }
68
69 Tab {
70 objectName: "dmTab"
71 title: i18n.tr("Direct Messages")
72 }
73
74
70 }75 }
71}76}

Subscribers

People subscribed via source and target branches