Merge lp:~boiko/messaging-app/fix_bubble into lp:messaging-app

Proposed by Gustavo Pichorim Boiko
Status: Merged
Merged at revision: 499
Proposed branch: lp:~boiko/messaging-app/fix_bubble
Merge into: lp:messaging-app
Prerequisite: lp:~tiagosh/messaging-app/checkmarks
Diff against target: 364 lines (+127/-95)
10 files modified
src/qml/DeliveryStatus.qml (+3/-2)
src/qml/MMS/MMSContact.qml (+2/-2)
src/qml/MessageBubble.qml (+58/-88)
src/qml/assets/blue_bubble@27.sci (+5/-0)
src/qml/assets/double_tick.svg (+21/-0)
src/qml/assets/green_bubble@27.sci (+5/-0)
src/qml/assets/red_bubble@27.sci (+5/-0)
src/qml/assets/single_tick.svg (+20/-0)
src/qml/assets/white_bubble@27.sci (+5/-0)
tests/qml/tst_MessageBubble.qml (+3/-3)
To merge this branch: bzr merge lp:~boiko/messaging-app/fix_bubble
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Needs Fixing
Tiago Salem Herrmann Pending
Review via email: mp+280015@code.launchpad.net

This proposal supersedes a proposal from 2015-11-24.

Commit message

Update the bubble to match the designs.

Description of the change

Update the bubble to match the designs.

To post a comment you must log in.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote : Posted in a previous version of this proposal
review: Needs Fixing (continuous-integration)
Revision history for this message
Tiago Salem Herrmann (tiagosh) wrote : Posted in a previous version of this proposal

Looks good, one small remark.

review: Needs Information
Revision history for this message
Gustavo Pichorim Boiko (boiko) : Posted in a previous version of this proposal
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote : Posted in a previous version of this proposal
review: Needs Fixing (continuous-integration)
Revision history for this message
Tiago Salem Herrmann (tiagosh) wrote : Posted in a previous version of this proposal

Looks good now.
Thanks.

review: Approve
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
lp:~boiko/messaging-app/fix_bubble updated
482. By Gustavo Pichorim Boiko

Update the bubbles according to the designs.

483. By Gustavo Pichorim Boiko

Fix tests.

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'src/qml/DeliveryStatus.qml'
--- src/qml/DeliveryStatus.qml 2015-12-16 13:18:12 +0000
+++ src/qml/DeliveryStatus.qml 2015-12-16 13:18:12 +0000
@@ -22,15 +22,16 @@
22 property int status: -122 property int status: -1
23 property bool enabled: true23 property bool enabled: true
24 height: enabled ? units.gu(1) : 024 height: enabled ? units.gu(1) : 0
25 width: enabled ? undefined : 0
25 fillMode: Image.PreserveAspectFit26 fillMode: Image.PreserveAspectFit
26 source: {27 source: {
27 if (!enabled) {28 if (!enabled) {
28 return ""29 return ""
29 }30 }
30 if (status == HistoryThreadModel.MessageStatusDelivered) {31 if (status == HistoryThreadModel.MessageStatusDelivered) {
31 return Qt.resolvedUrl("./assets/check_single_white.png")32 return Qt.resolvedUrl("./assets/single_tick.svg")
32 } else if (status == HistoryThreadModel.MessageStatusRead) {33 } else if (status == HistoryThreadModel.MessageStatusRead) {
33 return Qt.resolvedUrl("./assets/check_double_white.png")34 return Qt.resolvedUrl("./assets/double_tick.svg")
34 }35 }
35 return ""36 return ""
36 }37 }
3738
=== modified file 'src/qml/MMS/MMSContact.qml'
--- src/qml/MMS/MMSContact.qml 2015-12-16 13:18:12 +0000
+++ src/qml/MMS/MMSContact.qml 2015-12-16 13:18:12 +0000
@@ -77,8 +77,8 @@
77 return "#3fb24f"77 return "#3fb24f"
78 }78 }
79 }79 }
80 border.color: "#ACACAC"80 border.color: incoming ? "#ACACAC" : "transparent"
81 radius: height * 0.181 radius: units.gu(1)
8282
83 ContactAvatar {83 ContactAvatar {
84 id: avatar84 id: avatar
8585
=== modified file 'src/qml/MessageBubble.qml'
--- src/qml/MessageBubble.qml 2015-12-16 13:18:12 +0000
+++ src/qml/MessageBubble.qml 2015-12-16 13:18:12 +0000
@@ -24,7 +24,7 @@
24import "dateUtils.js" as DateUtils24import "dateUtils.js" as DateUtils
25import "3rd_party/ba-linkify.js" as BaLinkify25import "3rd_party/ba-linkify.js" as BaLinkify
2626
27Rectangle {27BorderImage {
28 id: root28 id: root
2929
30 property int messageStatus: -130 property int messageStatus: -1
@@ -74,28 +74,33 @@
74 return text74 return text
75 }75 }
7676
77 color: {77 property string color: {
78 if (error) {78 if (error) {
79 return "#fc4949"79 return "red"
80 } else if (sending) {80 } else if (sending) {
81 return "#b2b2b2"81 return "gray"
82 } else if (messageIncoming) {82 } else if (messageIncoming) {
83 return "#ffffff"83 return "white"
84 } else {84 } else {
85 return "#3fb24f"85 // FIXME: use blue for IM accounts
86 return "green"
86 }87 }
87 }88 }
88 border.color: "#ACACAC"89 source: "assets/" + color + "_bubble.sci"
8990 smooth: true
90 radius: units.gu(1)91
91 height: senderName.height + senderName.anchors.topMargin + textLabel.height + textTimestamp.height + units.gu(1)92 // FIXME: maybe we should put everything inside a container to make width and height calculation easier
93 height: senderName.height + senderName.anchors.topMargin + textLabel.height + border.bottom + units.gu(0.5) + (oneLine ? 0 : messageFooter.height + messageFooter.anchors.topMargin)
94
95 // if possible, put the timestamp and the delivery status in the same line as the text
96 property int oneLineWidth: textLabel.contentWidth + messageFooter.width
97 property bool oneLine: oneLineWidth <= units.gu(27)
92 width: Math.min(units.gu(27),98 width: Math.min(units.gu(27),
93 Math.max(textLabel.contentWidth, textTimestamp.contentWidth + deliveryStatus.width, senderName.contentWidth))99 Math.max(oneLine ? oneLineWidth : textLabel.contentWidth,
100 messageFooter.width,
101 senderName.contentWidth,
102 border.right + border.left - units.gu(3)))
94 + units.gu(3)103 + units.gu(3)
95 anchors{
96 leftMargin: units.gu(1)
97 rightMargin: units.gu(1)
98 }
99104
100 Label {105 Label {
101 id: senderName106 id: senderName
@@ -131,84 +136,49 @@
131 color: root.messageIncoming ? UbuntuColors.darkGrey : "white"136 color: root.messageIncoming ? UbuntuColors.darkGrey : "white"
132 }137 }
133138
134 Label {139 Row {
135 id: textTimestamp140 id: messageFooter
136 objectName: "messageDate"141 width: childrenRect.width
142 spacing: units.gu(1)
137143
138 anchors{144 anchors {
139 top: textLabel.bottom145 top: textLabel.bottom
140 topMargin: units.gu(0.5)146 topMargin: oneLine ? -textTimestamp.height : units.gu(0.5)
141 left: parent.left147 right: parent.right
142 leftMargin: units.gu(1)148 rightMargin: units.gu(1)
143 }149 }
144150
145 visible: !root.sending151 Label {
146 height: units.gu(2)152 id: textTimestamp
147 width: visible ? maxDelegateWidth : 0153 objectName: "messageDate"
148 fontSize: "xx-small"154
149 color: root.messageIncoming ? UbuntuColors.lightGrey : "white"155 anchors.bottom: parent.bottom
150 opacity: root.messageIncoming ? 1.0 : 0.8156 visible: !root.sending
151 elide: Text.ElideRight157 height: units.gu(2)
152 text: {158 width: paintedWidth > maxDelegateWidth ? maxDelegateWidth : undefined
153 if (messageTimeStamp === "")159 fontSize: "xx-small"
154 return ""160 color: root.messageIncoming ? UbuntuColors.lightGrey : "white"
155161 opacity: root.messageIncoming ? 1.0 : 0.8
156 var str = Qt.formatTime(messageTimeStamp, Qt.DefaultLocaleShortDate)162 elide: Text.ElideRight
157 if (root.accountName.length === 0 || !root.messageIncoming) {163 verticalAlignment: Text.AlignVCenter
164 text: {
165 if (messageTimeStamp === "")
166 return ""
167
168 var str = Qt.formatTime(messageTimeStamp, Qt.DefaultLocaleShortDate)
169 if (root.accountName.length === 0 || !root.messageIncoming) {
170 return str
171 }
172 str += " @ %1".arg(root.accountName)
158 return str173 return str
159 }174 }
160 str += " @ %1".arg(root.accountName)175 }
161 return str176
162 }177 DeliveryStatus {
163 }178 id: deliveryStatus
164179 status: messageStatus
165 DeliveryStatus {180 enabled: deliveryStatusAvailable
166 id: deliveryStatus181 anchors.verticalCenter: textTimestamp.verticalCenter
167 status: messageStatus182 }
168 enabled: deliveryStatusAvailable
169 anchors {
170 right: parent.right
171 rightMargin: units.gu(0.5)
172 verticalCenter: textTimestamp.verticalCenter
173 }
174 }
175
176 ColoredImage {
177 id: bubbleArrow
178
179 source: Qt.resolvedUrl("./assets/conversation_bubble_arrow.png")
180 color: root.color
181 asynchronous: false
182 anchors {
183 bottom: parent.bottom
184 bottomMargin: units.gu(2)
185 leftMargin: -1
186 rightMargin: -1
187 }
188 width: units.gu(1)
189 height: units.gu(1.5)
190
191 states: [
192 State {
193 when: root.messageIncoming
194 name: "incoming"
195 AnchorChanges {
196 target: bubbleArrow
197 anchors.right: root.left
198 }
199 },
200 State {
201 when: !root.messageIncoming
202 name: "outgoing"
203 AnchorChanges {
204 target: bubbleArrow
205 anchors.left: root.right
206 }
207 PropertyChanges {
208 target: bubbleArrow
209 mirror: true
210 }
211 }
212 ]
213 }183 }
214}184}
215185
=== added file 'src/qml/assets/blue_bubble@27.png'
216Binary files src/qml/assets/blue_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/blue_bubble@27.png 2015-12-16 13:18:12 +0000 differ186Binary files src/qml/assets/blue_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/blue_bubble@27.png 2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/blue_bubble@27.sci'
--- src/qml/assets/blue_bubble@27.sci 1970-01-01 00:00:00 +0000
+++ src/qml/assets/blue_bubble@27.sci 2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
1border.left:135
2border.top: 27
3border.bottom: 48
4border.right: 135
5source: blue_bubble@27.png
0\ No newline at end of file6\ No newline at end of file
17
=== added file 'src/qml/assets/blue_bubble@27_1.png'
2Binary files src/qml/assets/blue_bubble@27_1.png 1970-01-01 00:00:00 +0000 and src/qml/assets/blue_bubble@27_1.png 2015-12-16 13:18:12 +0000 differ8Binary files src/qml/assets/blue_bubble@27_1.png 1970-01-01 00:00:00 +0000 and src/qml/assets/blue_bubble@27_1.png 2015-12-16 13:18:12 +0000 differ
=== removed file 'src/qml/assets/check_double_white.png'
3Binary files src/qml/assets/check_double_white.png 2015-12-16 13:18:12 +0000 and src/qml/assets/check_double_white.png 1970-01-01 00:00:00 +0000 differ9Binary files src/qml/assets/check_double_white.png 2015-12-16 13:18:12 +0000 and src/qml/assets/check_double_white.png 1970-01-01 00:00:00 +0000 differ
=== removed file 'src/qml/assets/check_single_white.png'
4Binary files src/qml/assets/check_single_white.png 2015-12-16 13:18:12 +0000 and src/qml/assets/check_single_white.png 1970-01-01 00:00:00 +0000 differ10Binary files src/qml/assets/check_single_white.png 2015-12-16 13:18:12 +0000 and src/qml/assets/check_single_white.png 1970-01-01 00:00:00 +0000 differ
=== removed file 'src/qml/assets/conversation_bubble_arrow.png'
5Binary files src/qml/assets/conversation_bubble_arrow.png 2015-08-17 17:39:45 +0000 and src/qml/assets/conversation_bubble_arrow.png 1970-01-01 00:00:00 +0000 differ11Binary files src/qml/assets/conversation_bubble_arrow.png 2015-08-17 17:39:45 +0000 and src/qml/assets/conversation_bubble_arrow.png 1970-01-01 00:00:00 +0000 differ
=== added file 'src/qml/assets/double_tick.svg'
--- src/qml/assets/double_tick.svg 1970-01-01 00:00:00 +0000
+++ src/qml/assets/double_tick.svg 2015-12-16 13:18:12 +0000
@@ -0,0 +1,21 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg width="52px" height="28px" viewBox="0 0 52 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3 <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
4 <title>path4041-9 copy + path4041-9 copy 2</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Messaging" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8 <g id="Compose-SMS-empty-state-Copy-56" sketch:type="MSArtboardGroup" transform="translate(-948.000000, -512.000000)" fill="#FFFFFF">
9 <g id="tick" sketch:type="MSLayerGroup" transform="translate(941.000000, 499.000000)">
10 <g id="svg4874" sketch:type="MSShapeGroup">
11 <g id="layer1">
12 <g id="path4041-9-copy-+-path4041-9-copy-2" transform="translate(7.000000, 13.000000)">
13 <path d="M15.3523623,21.1776844 L1.97756181,9.70609227 L0.120056,11.8063782 L15.3437936,27.824149 L39.756042,2.13611253 L38.5926018,0.824149 L15.3523623,21.1776844 Z" id="path4041-9-copy"></path>
14 <path d="M27.3523623,21.1776844 L13.9775618,9.70609227 L12.120056,11.8063782 L27.3437936,27.824149 L51.756042,2.13611253 L50.5926018,0.824149 L27.3523623,21.1776844 Z" id="path4041-9-copy-2"></path>
15 </g>
16 </g>
17 </g>
18 </g>
19 </g>
20 </g>
21</svg>
0\ No newline at end of file22\ No newline at end of file
123
=== added file 'src/qml/assets/green_bubble@27.png'
2Binary files src/qml/assets/green_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/green_bubble@27.png 2015-12-16 13:18:12 +0000 differ24Binary files src/qml/assets/green_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/green_bubble@27.png 2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/green_bubble@27.sci'
--- src/qml/assets/green_bubble@27.sci 1970-01-01 00:00:00 +0000
+++ src/qml/assets/green_bubble@27.sci 2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
1border.left:135
2border.top: 27
3border.bottom: 48
4border.right: 135
5source: green_bubble@27.png
06
=== added file 'src/qml/assets/red_bubble@27.png'
1Binary files src/qml/assets/red_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/red_bubble@27.png 2015-12-16 13:18:12 +0000 differ7Binary files src/qml/assets/red_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/red_bubble@27.png 2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/red_bubble@27.sci'
--- src/qml/assets/red_bubble@27.sci 1970-01-01 00:00:00 +0000
+++ src/qml/assets/red_bubble@27.sci 2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
1border.left:135
2border.top: 27
3border.bottom: 48
4border.right: 135
5source: red_bubble@27.png
0\ No newline at end of file6\ No newline at end of file
17
=== added file 'src/qml/assets/red_bubble@27_1.png'
2Binary files src/qml/assets/red_bubble@27_1.png 1970-01-01 00:00:00 +0000 and src/qml/assets/red_bubble@27_1.png 2015-12-16 13:18:12 +0000 differ8Binary files src/qml/assets/red_bubble@27_1.png 1970-01-01 00:00:00 +0000 and src/qml/assets/red_bubble@27_1.png 2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/single_tick.svg'
--- src/qml/assets/single_tick.svg 1970-01-01 00:00:00 +0000
+++ src/qml/assets/single_tick.svg 2015-12-16 13:18:12 +0000
@@ -0,0 +1,20 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg width="40px" height="28px" viewBox="0 0 40 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3 <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
4 <title>path4041-9</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Messaging" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8 <g id="Compose-SMS-empty-state-Copy-54" sketch:type="MSArtboardGroup" transform="translate(-961.000000, -512.000000)" fill="#FFFFFF">
9 <g id="bubble-1" sketch:type="MSLayerGroup" transform="translate(535.000000, 373.500000)">
10 <g id="tick" transform="translate(426.000000, 138.500000)" sketch:type="MSShapeGroup">
11 <g id="svg4874">
12 <g id="layer1">
13 <path d="M15.3523623,21.1776844 L1.97756181,9.70609227 L0.120056,11.8063782 L15.3437936,27.824149 L39.756042,2.13611253 L38.5926018,0.824149 L15.3523623,21.1776844 Z" id="path4041-9"></path>
14 </g>
15 </g>
16 </g>
17 </g>
18 </g>
19 </g>
20</svg>
0\ No newline at end of file21\ No newline at end of file
122
=== added file 'src/qml/assets/white_bubble@27.png'
2Binary files src/qml/assets/white_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/white_bubble@27.png 2015-12-16 13:18:12 +0000 differ23Binary files src/qml/assets/white_bubble@27.png 1970-01-01 00:00:00 +0000 and src/qml/assets/white_bubble@27.png 2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/white_bubble@27.sci'
--- src/qml/assets/white_bubble@27.sci 1970-01-01 00:00:00 +0000
+++ src/qml/assets/white_bubble@27.sci 2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
1border.left:143
2border.top: 27
3border.bottom: 48
4border.right: 135
5source: white_bubble@27.png
06
=== added file 'src/qml/assets/white_bubble@27_1.png'
1Binary files src/qml/assets/white_bubble@27_1.png 1970-01-01 00:00:00 +0000 and src/qml/assets/white_bubble@27_1.png 2015-12-16 13:18:12 +0000 differ7Binary files src/qml/assets/white_bubble@27_1.png 1970-01-01 00:00:00 +0000 and src/qml/assets/white_bubble@27_1.png 2015-12-16 13:18:12 +0000 differ
=== modified file 'tests/qml/tst_MessageBubble.qml'
--- tests/qml/tst_MessageBubble.qml 2014-08-27 17:50:35 +0000
+++ tests/qml/tst_MessageBubble.qml 2015-12-16 13:18:12 +0000
@@ -73,20 +73,20 @@
73 function test_incomingMessageBubbleMustUseIncomingSource() {73 function test_incomingMessageBubbleMustUseIncomingSource() {
74 var incomingMessageBubble = findChild(74 var incomingMessageBubble = findChild(
75 root, 'incomingMessageBubble');75 root, 'incomingMessageBubble');
76 compare(incomingMessageBubble.color, "#ffffff")76 compare(incomingMessageBubble.color, "white")
77 }77 }
7878
79 function test_outgoingMessageBubbleMustUseOutgoingSource() {79 function test_outgoingMessageBubbleMustUseOutgoingSource() {
80 var outgoingMessageBubble = findChild(80 var outgoingMessageBubble = findChild(
81 root, 'outgoingMessageBubble');81 root, 'outgoingMessageBubble');
82 compare(outgoingMessageBubble.color, "#3fb24f")82 compare(outgoingMessageBubble.color, "green")
83 }83 }
8484
85 function test_changeIncomingMustUpdateSource() {85 function test_changeIncomingMustUpdateSource() {
86 var changeIncomingMessageBubble = findChild(86 var changeIncomingMessageBubble = findChild(
87 root, 'changeIncomingMessageBubble');87 root, 'changeIncomingMessageBubble');
88 changeIncomingMessageBubble.messageIncoming = false;88 changeIncomingMessageBubble.messageIncoming = false;
89 compare(changeIncomingMessageBubble.color, "#3fb24f")89 compare(changeIncomingMessageBubble.color, "green")
90 }90 }
91 }91 }
92}92}

Subscribers

People subscribed via source and target branches