Merge lp:~mihirsoni/telegram-app/sectionHeader into lp:telegram-app/app-dev

[Mihir Soni]

Added section work around.

This is how it looks like :-

http://i.imgur.com/45JUo0h.png

You'll need this MR , https://code.launchpad.net/~mihirsoni/libqtelegram/addedGetFunction to test this MR.

[lp:~mihirsoni/telegram-app/sectionHeader]

122. By Mihir Soni on 2014-10-09

Merged with trunl

123. By Mihir Soni on 2014-10-09

Shows Month Date in section text

124. By Mihir Soni on 2014-10-09

Removed space

[Michał Karnicki (karni)]

Very well. It's hard to review the bits that supposedly did not change, as most that changed in their regard is indentation, so it's hard to follow, but the related changed bits look solid and well integrated. Good stuff. Feel free to merge to lp:libqtelegram/app-dev

https://code.launchpad.net/~mihirsoni/libqtelegram/addedGetFunction/+merge/237492
to lp:libqtelegram/dev

As always, make sure you first merge back any changes that have been made since. Thanks.

review: Approve

=== modified file 'components/TelegramDelegate.qml'
--- components/TelegramDelegate.qml	2014-10-08 21:22:10 +0000
+++ components/TelegramDelegate.qml	2014-10-09 21:21:05 +0000
@@ -9,6 +9,8 @@
     property bool outgoing: false
     property string message: ""
     property int mediaType: 0
+    property string sectionText: section.text
+    property bool sectionVisible: false
     property string senderColor: ""
     property string senderName: ""
     property string senderImage: ""
@@ -28,166 +30,177 @@
     signal clicked()
     signal profileImageClicked()
 
-    ListItem.Empty {
-        id: internalDelegate
-        anchors {
-            top: parent ? parent.top : undefined
-            left: parent ? parent.left : undefined
-            right: parent ? parent.right : undefined
-        }
-        height: bubble.height
-        showDivider: false
-        highlightWhenPressed: false
-
-        onClicked: messageDelegate.clicked()
-
-        Image {
-            id: image
-            anchors {
-                left: parent.left
-                leftMargin: source == "" ? 0 : units.gu(1)
-                bottom: parent.bottom
-            }
-
-            width: source == "" || source === undefined ? 0 : units.gu(5);
-            height: width
-            asynchronous: true
-            fillMode: Image.PreserveAspectCrop
-            source: senderImage
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: messageDelegate.profileImageClicked()
-            }
-        }
-
-        TelegramBubble {
-            id: bubble
-            outgoing: messageDelegate.outgoing
-            anchors {
-                top: parent.top
-                left: outgoing ? undefined: image.right
-                leftMargin: units.gu(1)
-                right: outgoing ? parent.right : undefined
-                rightMargin: units.gu(1)
-            }
-            height: messageContents.height + units.gu(2)
-            width: Math.max(messageLabel.width, senderLabel.width, messageStatusRow.width, messagePhoto.width) + units.gu(3)
-
-            Item {
-                id: messageContents
+    Column {
+        id: column
+        anchors.fill: parent
+        spacing: units.gu(1)
+
+        TelegramSection {
+            id: section
+            text: sectionText
+            visible: sectionVisible
+        }
+
+        ListItem.Empty {
+            id: internalDelegate
+            anchors {
+                left: parent ? parent.left : undefined
+                right: parent ? parent.right : undefined
+            }
+            height: sectionVisible ? bubble.height + section.height : bubble.height
+            showDivider: false
+            highlightWhenPressed: false
+
+            onClicked: messageDelegate.clicked()
+
+            Image {
+                id: image
+                anchors {
+                    left: parent.left
+                    leftMargin: source == "" ? 0 : units.gu(1)
+                    bottom: sectionVisible ? bubble.bottom : parent.bottom
+                }
+
+                width: source == "" || source === undefined ? 0 : units.gu(5);
+                height: width
+                asynchronous: true
+                fillMode: Image.PreserveAspectCrop
+                source: senderImage
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: messageDelegate.profileImageClicked()
+                }
+            }
+
+            TelegramBubble {
+                id: bubble
+                outgoing: messageDelegate.outgoing
                 anchors {
                     top: parent.top
-                    topMargin: units.gu(1)
-                    left: parent.left
-                    leftMargin: outgoing ? units.gu(1) : units.gu(2)
-                    right: parent.right
-                    rightMargin: units.gu(1.5)
-                }
-                height: childrenRect.height
-
-                Text {
-                    id: senderLabel
-                    anchors.top: parent.top
-                    height: text === "" ? 0 : implicitHeight
-                    font.pixelSize: FontUtils.sizeToPixels("small")
-                    font.weight: Font.Normal
-                    color: senderColor
-                    text: senderName
-                }
-
-                Text {
-                    id: messageLabel
-                    anchors{
-                        top: senderLabel.bottom
-                    }
-                    height: paintedHeight
-                    width: Math.min(implicitWidth, 0.7 * internalDelegate.width)
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    font.pixelSize: mediaType != TLMessageMedia.TypeMessageMediaEmpty ?
-                            FontUtils.sizeToPixels("small") : FontUtils.sizeToPixels("medium")
-                    font.weight: mediaType != TLMessageMedia.TypeMessageMediaEmpty ?
-                            Font.DemiBold : Font.Normal
-                    color: textColor
-                    text: parseText(message)
-                    onLinkActivated: Qt.openUrlExternally(link)
-
-                    // Taken from messaging-app
-                    function parseText(text) {
-                        var phoneExp = /(\+?([0-9]+[ ]?)?\(?([0-9]+)\)?[-. ]?([0-9]+)[-. ]?([0-9]+)[-. ]?([0-9]+))/img;
-                        // remove html tags
-                        text = text.replace(/</g,'&lt;').replace(/>/g,'<tt>&gt;</tt>');
-                        // replace line breaks
-                        text = text.replace(/(\n)+/g, '<br />');
-                        // check for links
-                        var htmlText = BaLinkify.linkify(text);
-                        if (htmlText !== text) {
-                            return htmlText
-                        }
-                        // linkify phone numbers if no web links were found
-                        return text.replace(phoneExp, '<a href="tel:///$1">$1</a>');
-                    }
-                }
-
-                Image {
-                    id: messagePhoto
-
-                    anchors{
-                        horizontalCenter: parent.horizontalCenter
-                        top: senderLabel.bottom
-                    }
-                    asynchronous: true
-                    visible: source !== ""
-                    fillMode: Image.PreserveAspectFit
-                    sourceSize.width: 0.6 * internalDelegate.width
-                    sourceSize.height: 0.6 * internalDelegate.width
-                    source: {
-                        console.log("messagePhoto source: " + thumbnail);
-                        return Qt.resolvedUrl(thumbnail);
-                    }
-
-                    onStatusChanged:  {
-                        if (status === Image.Error) {
-                            source = "image://theme/image-missing"
-                            width = 128
-                            height = 128
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            var properties = { "previewSource": parent.source };
-                            pageStack.push(previewPage, properties);
-                        }
-                    }
-                }
-
-                Row {
-                    id: messageStatusRow
-
-                    spacing: units.gu(0.5)
-
+                    left: outgoing ? undefined: image.right
+                    leftMargin: units.gu(1)
+                    right: outgoing ? parent.right : undefined
+                    rightMargin: units.gu(1)
+                }
+                height: messageContents.height + units.gu(2)
+                width: Math.max(messageLabel.width, senderLabel.width, messageStatusRow.width, messagePhoto.width) + units.gu(3)
+
+                Item {
+                    id: messageContents
                     anchors {
-                        top: messagePhoto.source != "" ? messagePhoto.bottom : messageLabel.bottom
+                        top: parent.top
+                        topMargin: units.gu(1)
+                        left: parent.left
+                        leftMargin: outgoing ? units.gu(1) : units.gu(2)
                         right: parent.right
-                    }
-
-                    Text {
-                        id: timeLabel
-                        font.weight: Font.DemiBold
-                        font.pixelSize: FontUtils.sizeToPixels("x-small")
-                        color: outgoing ? Color.dark_green : Color.grey
-                        text: time
+                        rightMargin: units.gu(1.5)
+                    }
+                    height: childrenRect.height
+
+                    Text {
+                        id: senderLabel
+                        anchors.top: parent.top
+                        height: text === "" ? 0 : implicitHeight
+                        font.pixelSize: FontUtils.sizeToPixels("small")
+                        font.weight: Font.Normal
+                        color: senderColor
+                        text: senderName
+                    }
+
+                    Text {
+                        id: messageLabel
+                        anchors{
+                            top: senderLabel.bottom
+                        }
+                        height: paintedHeight
+                        width: Math.min(implicitWidth, 0.7 * internalDelegate.width)
+                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        font.pixelSize: mediaType != TLMessageMedia.TypeMessageMediaEmpty ?
+                                FontUtils.sizeToPixels("small") : FontUtils.sizeToPixels("medium")
+                        font.weight: mediaType != TLMessageMedia.TypeMessageMediaEmpty ?
+                                Font.DemiBold : Font.Normal
+                        color: textColor
+                        text: parseText(message)
+                        onLinkActivated: Qt.openUrlExternally(link)
+
+                        // Taken from messaging-app
+                        function parseText(text) {
+                            var phoneExp = /(\+?([0-9]+[ ]?)?\(?([0-9]+)\)?[-. ]?([0-9]+)[-. ]?([0-9]+)[-. ]?([0-9]+))/img;
+                            // remove html tags
+                            text = text.replace(/</g,'&lt;').replace(/>/g,'<tt>&gt;</tt>');
+                            // replace line breaks
+                            text = text.replace(/(\n)+/g, '<br />');
+                            // check for links
+                            var htmlText = BaLinkify.linkify(text);
+                            if (htmlText !== text) {
+                                return htmlText
+                            }
+                            // linkify phone numbers if no web links were found
+                            return text.replace(phoneExp, '<a href="tel:///$1">$1</a>');
+                        }
                     }
 
                     Image {
-                        id: messageSentStatus
-                        visible: !sent
-                        height: units.gu(1.4)
-                        width: height
-                        anchors.verticalCenter: timeLabel.verticalCenter
-                        source: sent ? "" : Qt.resolvedUrl("../images/dialog_clock_w.png")
+                        id: messagePhoto
+
+                        anchors{
+                            horizontalCenter: parent.horizontalCenter
+                            top: senderLabel.bottom
+                        }
+                        asynchronous: true
+                        visible: source !== ""
+                        fillMode: Image.PreserveAspectFit
+                        sourceSize.width: 0.6 * internalDelegate.width
+                        sourceSize.height: 0.6 * internalDelegate.width
+                        source: {
+                            console.log("messagePhoto source: " + thumbnail);
+                            return Qt.resolvedUrl(thumbnail);
+                        }
+
+                        onStatusChanged:  {
+                            if (status === Image.Error) {
+                                source = "image://theme/image-missing"
+                                width = 128
+                                height = 128
+                            }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: {
+                                var properties = { "previewSource": parent.source };
+                                pageStack.push(previewPage, properties);
+                            }
+                        }
+                    }
+
+                    Row {
+                        id: messageStatusRow
+
+                        spacing: units.gu(0.5)
+
+                        anchors {
+                            top: messagePhoto.source != "" ? messagePhoto.bottom : messageLabel.bottom
+                            right: parent.right
+                        }
+
+                        Text {
+                            id: timeLabel
+                            font.weight: Font.DemiBold
+                            font.pixelSize: FontUtils.sizeToPixels("x-small")
+                            color: outgoing ? Color.dark_green : Color.grey
+                            text: time
+                        }
+
+                        Image {
+                            id: messageSentStatus
+                            visible: !sent
+                            height: units.gu(1.4)
+                            width: height
+                            anchors.verticalCenter: timeLabel.verticalCenter
+                            source: sent ? "" : Qt.resolvedUrl("../images/dialog_clock_w.png")
+                        }
                     }
                 }
             }

=== modified file 'components/TelegramSection.qml'
--- components/TelegramSection.qml	2014-08-08 17:23:03 +0000
+++ components/TelegramSection.qml	2014-10-09 21:21:05 +0000
@@ -3,7 +3,7 @@
 import "TelegramColors.js" as Color
 
 Item {
-    anchors.margins: units.gu(1)
+    property alias text: sectionLabel.text
 
     width: parent.width
     height: childrenRect.height + units.gu(1)

=== modified file 'js/time.js'
--- js/time.js	2014-08-19 00:25:56 +0000
+++ js/time.js	2014-10-09 21:21:05 +0000
@@ -22,6 +22,12 @@
     return Qt.formatDate(date, "MMM d");
 }
 
+function formatSection(time) {
+    var date = new Date(time);
+
+    return Qt.formatDate(date, "MMMM d");
+}
+
 function formatLastSeen(time) {
     var date = new Date(time);
     var today = new Date();
@@ -42,3 +48,13 @@
 
     return Qt.formatTime(date, "hh:mm");
 }
+
+function areSameDay(date1, date2) {
+    var firstDate = new Date(date1)
+    var secondDate = new Date(date2)
+    if (!firstDate || !secondDate)
+        return false
+    return firstDate.getFullYear() == secondDate.getFullYear()
+            && firstDate.getMonth() == secondDate.getMonth()
+            && firstDate.getDate() == secondDate.getDate()
+}

=== modified file 'ui/DialogPage.qml'
--- ui/DialogPage.qml	2014-10-09 11:33:15 +0000
+++ ui/DialogPage.qml	2014-10-09 21:21:05 +0000
@@ -198,6 +198,9 @@
                 outgoing: model.out
                 message: getMessageText(model.mediaType)
                 mediaType: model.mediaType
+                //FIXME: When section headers upstream bug is resolved revet this with section headers.
+                sectionVisible: (index === list.count) || !Time.areSameDay((messagesProxy.get(index+1).date * 1000),model.date*1000)
+                sectionText: Time.formatSection(model.date * 1000)
                 senderColor: Avatar.getColor(model.fromId)
                 senderName: (!isChat || outgoing) ? "" : getSenderName()
                 senderImage: {