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

[Gustavo Pichorim Boiko]

Update the bubble to match the designs.

Update the bubble to match the designs.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:478
http://jenkins.qa.ubuntu.com/job/messaging-app-ci/748/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5391
    SUCCESS: http://jenkins.qa.ubuntu.com/job/messaging-app-vivid-i386-ci/257
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/4262
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5405
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5405/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25474

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/messaging-app-ci/748/rebuild

review: Needs Fixing (continuous-integration)

[Tiago Salem Herrmann (tiagosh)]

Looks good, one small remark.

review: Needs Information

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:479
http://jenkins.qa.ubuntu.com/job/messaging-app-ci/753/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5418
    SUCCESS: http://jenkins.qa.ubuntu.com/job/messaging-app-vivid-i386-ci/262
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/4279
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5432
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5432/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25517

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/messaging-app-ci/753/rebuild

review: Needs Fixing (continuous-integration)

[Tiago Salem Herrmann (tiagosh)]

Looks good now.
Thanks.

review: Approve

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:480
http://jenkins.qa.ubuntu.com/job/messaging-app-ci/837/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5669
    FAILURE: http://jenkins.qa.ubuntu.com/job/messaging-app-vivid-i386-ci/346/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/4406
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5683
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5683/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25891

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/messaging-app-ci/837/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:481
http://jenkins.qa.ubuntu.com/job/messaging-app-ci/838/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5670/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/messaging-app-vivid-i386-ci/347/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5684/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/messaging-app-ci/838/rebuild

review: Needs Fixing (continuous-integration)

[lp:~boiko/messaging-app/fix_bubble]

482. By Gustavo Pichorim Boiko on 2015-12-15

Update the bubbles according to the designs.

483. By Gustavo Pichorim Boiko on 2015-12-16

Fix tests.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:483
http://jenkins.qa.ubuntu.com/job/messaging-app-ci/866/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5813/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/messaging-app-vivid-i386-ci/375/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5826/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/messaging-app-ci/866/rebuild

review: Needs Fixing (continuous-integration)

=== 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 @@
     property int status: -1
     property bool enabled: true
     height: enabled ? units.gu(1) : 0
+    width: enabled ? undefined : 0
     fillMode: Image.PreserveAspectFit
     source: {
         if (!enabled) {
             return ""
         }
         if (status == HistoryThreadModel.MessageStatusDelivered) {
-            return Qt.resolvedUrl("./assets/check_single_white.png")
+            return Qt.resolvedUrl("./assets/single_tick.svg")
         } else if (status == HistoryThreadModel.MessageStatusRead) {
-            return Qt.resolvedUrl("./assets/check_double_white.png")
+            return Qt.resolvedUrl("./assets/double_tick.svg")
         }
         return ""
     }

=== 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 @@
                 return "#3fb24f"
             }
         }
-        border.color: "#ACACAC"
-        radius: height * 0.1
+        border.color: incoming ? "#ACACAC" : "transparent"
+        radius: units.gu(1)
 
         ContactAvatar {
             id: avatar

=== 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 @@
 import "dateUtils.js" as DateUtils
 import "3rd_party/ba-linkify.js" as BaLinkify
 
-Rectangle {
+BorderImage {
     id: root
 
     property int messageStatus: -1
@@ -74,28 +74,33 @@
         return text
     }
 
-    color: {
+    property string color: {
         if (error) {
-            return "#fc4949"
+            return "red"
         } else if (sending) {
-            return "#b2b2b2"
+            return "gray"
         } else if (messageIncoming) {
-            return "#ffffff"
+            return "white"
         } else {
-            return "#3fb24f"
+            // FIXME: use blue for IM accounts
+            return "green"
         }
     }
-    border.color: "#ACACAC"
-
-    radius: units.gu(1)
-    height: senderName.height + senderName.anchors.topMargin + textLabel.height + textTimestamp.height + units.gu(1)
+    source: "assets/" + color + "_bubble.sci"
+    smooth: true
+
+    // FIXME: maybe we should put everything inside a container to make width and height calculation easier
+    height: senderName.height + senderName.anchors.topMargin + textLabel.height + border.bottom + units.gu(0.5) + (oneLine ? 0 : messageFooter.height + messageFooter.anchors.topMargin)
+
+    // if possible, put the timestamp and the delivery status in the same line as the text
+    property int oneLineWidth: textLabel.contentWidth + messageFooter.width
+    property bool oneLine: oneLineWidth <= units.gu(27)
     width:  Math.min(units.gu(27),
-                     Math.max(textLabel.contentWidth, textTimestamp.contentWidth + deliveryStatus.width, senderName.contentWidth))
+                     Math.max(oneLine ? oneLineWidth : textLabel.contentWidth,
+                              messageFooter.width,
+                              senderName.contentWidth,
+                              border.right + border.left - units.gu(3)))
             + units.gu(3)
-    anchors{
-        leftMargin:  units.gu(1)
-        rightMargin: units.gu(1)
-    }
 
     Label {
         id: senderName
@@ -131,84 +136,49 @@
         color: root.messageIncoming ? UbuntuColors.darkGrey : "white"
     }
 
-    Label {
-        id: textTimestamp
-        objectName: "messageDate"
+    Row {
+        id: messageFooter
+        width: childrenRect.width
+        spacing: units.gu(1)
 
-        anchors{
+        anchors {
             top: textLabel.bottom
-            topMargin: units.gu(0.5)
-            left: parent.left
-            leftMargin: units.gu(1)
+            topMargin: oneLine ? -textTimestamp.height : units.gu(0.5)
+            right: parent.right
+            rightMargin: units.gu(1)
         }
 
-        visible: !root.sending
-        height: units.gu(2)
-        width: visible ? maxDelegateWidth : 0
-        fontSize: "xx-small"
-        color: root.messageIncoming ? UbuntuColors.lightGrey : "white"
-        opacity: root.messageIncoming ? 1.0 : 0.8
-        elide: Text.ElideRight
-        text: {
-            if (messageTimeStamp === "")
-                return ""
-
-            var str = Qt.formatTime(messageTimeStamp, Qt.DefaultLocaleShortDate)
-            if (root.accountName.length === 0 || !root.messageIncoming) {
+        Label {
+            id: textTimestamp
+            objectName: "messageDate"
+
+            anchors.bottom: parent.bottom
+            visible: !root.sending
+            height: units.gu(2)
+            width: paintedWidth > maxDelegateWidth ? maxDelegateWidth : undefined
+            fontSize: "xx-small"
+            color: root.messageIncoming ? UbuntuColors.lightGrey : "white"
+            opacity: root.messageIncoming ? 1.0 : 0.8
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+            text: {
+                if (messageTimeStamp === "")
+                    return ""
+
+                var str = Qt.formatTime(messageTimeStamp, Qt.DefaultLocaleShortDate)
+                if (root.accountName.length === 0 || !root.messageIncoming) {
+                    return str
+                }
+                str += " @ %1".arg(root.accountName)
                 return str
             }
-            str += " @ %1".arg(root.accountName)
-            return str
-        }
-    }
-
-    DeliveryStatus {
-        id: deliveryStatus
-        status: messageStatus
-        enabled: deliveryStatusAvailable
-        anchors {
-            right: parent.right
-            rightMargin: units.gu(0.5)
-            verticalCenter: textTimestamp.verticalCenter
-        }
-    }
-
-    ColoredImage {
-        id: bubbleArrow
-
-        source: Qt.resolvedUrl("./assets/conversation_bubble_arrow.png")
-        color: root.color
-        asynchronous: false
-        anchors {
-            bottom: parent.bottom
-            bottomMargin: units.gu(2)
-            leftMargin: -1
-            rightMargin: -1
-        }
-        width: units.gu(1)
-        height: units.gu(1.5)
-
-        states: [
-            State {
-                when: root.messageIncoming
-                name: "incoming"
-                AnchorChanges {
-                    target: bubbleArrow
-                    anchors.right: root.left
-                }
-            },
-            State {
-                when: !root.messageIncoming
-                name: "outgoing"
-                AnchorChanges {
-                    target: bubbleArrow
-                    anchors.left: root.right
-                }
-                PropertyChanges {
-                    target: bubbleArrow
-                    mirror: true
-                }
-            }
-        ]
+        }
+
+        DeliveryStatus {
+            id: deliveryStatus
+            status: messageStatus
+            enabled: deliveryStatusAvailable
+            anchors.verticalCenter: textTimestamp.verticalCenter
+        }
     }
 }

=== added file 'src/qml/assets/[e-mail]'
Binary files src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000 and src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/[e-mail]'
--- src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000
+++ src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
+border.left:135
+border.top: 27
+border.bottom: 48
+border.right: 135
+source: [e-mail]
\ No newline at end of file

=== added file 'src/qml/assets/blue_bubble@27_1.png'
Binary 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'
Binary 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'
Binary 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'
Binary 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>path4041-9 copy + path4041-9 copy 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Messaging" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Compose-SMS-empty-state-Copy-56" sketch:type="MSArtboardGroup" transform="translate(-948.000000, -512.000000)" fill="#FFFFFF">
+            <g id="tick" sketch:type="MSLayerGroup" transform="translate(941.000000, 499.000000)">
+                <g id="svg4874" sketch:type="MSShapeGroup">
+                    <g id="layer1">
+                        <g id="path4041-9-copy-+-path4041-9-copy-2" transform="translate(7.000000, 13.000000)">
+                            <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>
+                            <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>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

=== added file 'src/qml/assets/[e-mail]'
Binary files src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000 and src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/[e-mail]'
--- src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000
+++ src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
+border.left:135
+border.top: 27
+border.bottom: 48
+border.right: 135
+source: [e-mail]

=== added file 'src/qml/assets/[e-mail]'
Binary files src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000 and src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/[e-mail]'
--- src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000
+++ src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
+border.left:135
+border.top: 27
+border.bottom: 48
+border.right: 135
+source: [e-mail]
\ No newline at end of file

=== added file 'src/qml/assets/red_bubble@27_1.png'
Binary 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>path4041-9</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Messaging" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Compose-SMS-empty-state-Copy-54" sketch:type="MSArtboardGroup" transform="translate(-961.000000, -512.000000)" fill="#FFFFFF">
+            <g id="bubble-1" sketch:type="MSLayerGroup" transform="translate(535.000000, 373.500000)">
+                <g id="tick" transform="translate(426.000000, 138.500000)" sketch:type="MSShapeGroup">
+                    <g id="svg4874">
+                        <g id="layer1">
+                            <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>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

=== added file 'src/qml/assets/[e-mail]'
Binary files src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000 and src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000 differ
=== added file 'src/qml/assets/[e-mail]'
--- src/qml/assets/[e-mail]	1970-01-01 00:00:00 +0000
+++ src/qml/assets/[e-mail]	2015-12-16 13:18:12 +0000
@@ -0,0 +1,5 @@
+border.left:143
+border.top: 27
+border.bottom: 48
+border.right: 135
+source: [e-mail]

=== added file 'src/qml/assets/white_bubble@27_1.png'
Binary 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 @@
         function test_incomingMessageBubbleMustUseIncomingSource() {
             var incomingMessageBubble = findChild(
                 root, 'incomingMessageBubble');
-            compare(incomingMessageBubble.color, "#ffffff")
+            compare(incomingMessageBubble.color, "white")
         }
 
         function test_outgoingMessageBubbleMustUseOutgoingSource() {
             var outgoingMessageBubble = findChild(
                 root, 'outgoingMessageBubble');
-            compare(outgoingMessageBubble.color, "#3fb24f")
+            compare(outgoingMessageBubble.color, "green")
         }
 
         function test_changeIncomingMustUpdateSource() {
             var changeIncomingMessageBubble = findChild(
                 root, 'changeIncomingMessageBubble');
             changeIncomingMessageBubble.messageIncoming = false;
-            compare(changeIncomingMessageBubble.color, "#3fb24f")
+            compare(changeIncomingMessageBubble.color, "green")
         }
     }
 }