From 1a95148dae48945a3b3639c1f1b1447b27825f45 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 17 Jul 2015 00:12:36 +0100
Subject: [PATCH] basic date separator support

---
 skins/base/css/common.css                     |  1 +
 skins/base/css/organisms/LeftPanel.css        |  1 -
 skins/base/css/organisms/RoomView.css         |  9 +++++-
 skins/base/views/molecules/MRoomMemberTile.js |  4 ++-
 src/ComponentBroker.js                        |  1 +
 src/controllers/organisms/RoomView.js         | 29 ++++++++++++++-----
 6 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/skins/base/css/common.css b/skins/base/css/common.css
index 4c2e7c0b..aa10e409 100644
--- a/skins/base/css/common.css
+++ b/skins/base/css/common.css
@@ -28,6 +28,7 @@ div.error {
 }
 
 h2 {
+    color: #80cef4;
     font-weight: 400;
     font-size: 20px;
     margin-top: 16px;
diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css
index 70a4b6f7..bfe26f11 100644
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/skins/base/css/organisms/LeftPanel.css
@@ -44,7 +44,6 @@ limitations under the License.
     padding-left: 16px;
     padding-right: 16px;
 
-    /* background-color: #0ff; */
     height: 100%;
     overflow-y: scroll;
 }
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index bc1a1692..e1f3ea6b 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -64,7 +64,6 @@ limitations under the License.
     width: 100%;
     height: 100%;
     margin-bottom: 60px;
-    /* background-color: #ff0; */
 
     overflow-y: scroll;
 }
@@ -78,6 +77,14 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomView_MessageList h2 {
+    clear: both;
+    margin-top: 32px;
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #a8dbf3;
+}
+
 .mx_RoomView_invitePrompt {
 }
 
diff --git a/skins/base/views/molecules/MRoomMemberTile.js b/skins/base/views/molecules/MRoomMemberTile.js
index 92b6b119..996b6f9c 100644
--- a/skins/base/views/molecules/MRoomMemberTile.js
+++ b/skins/base/views/molecules/MRoomMemberTile.js
@@ -45,12 +45,14 @@ module.exports = React.createClass({
 
     render: function() {
         // XXX: for now, just cheekily borrow the css from message tile...
+        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
+
         return (
             <div className="mx_MessageTile">
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40"/>
                 </div>            
-                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                { timestamp }
                 <span className="mx_SenderProfile"></span>
                 <span className="mx_MessageTile_content">
                     {this.getMemberEventText()}
diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js
index 431f4766..0f606dd3 100644
--- a/src/ComponentBroker.js
+++ b/src/ComponentBroker.js
@@ -98,6 +98,7 @@ require('../skins/base/views/organisms/RightPanel');
 require('../skins/base/views/molecules/RoomCreate');
 require('../skins/base/views/molecules/RoomDropTarget');
 require('../skins/base/views/molecules/DirectoryMenu');
+require('../skins/base/views/molecules/DateSeparator');
 require('../skins/base/views/atoms/voip/VideoFeed');
 require('../skins/base/views/molecules/voip/VideoView');
 require('../skins/base/views/molecules/voip/CallView');
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 9078d558..f1a26ee4 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -36,6 +36,8 @@ var tileTypes = {
     'm.call.hangup': ComponentBroker.get('molecules/voip/MCallHangupTile')
 };
 
+var DateSeparator = ComponentBroker.get('molecules/DateSeparator');
+
 module.exports = {
     getInitialState: function() {
         return {
@@ -231,22 +233,33 @@ module.exports = {
             var TileType = tileTypes[mxEv.getType()];
             var continuation = false;
             var last = false;
+            var dateSeparator = null;
             if (i == this.state.room.timeline.length - 1) {
                 last = true;
             }
-            if (i > 0 &&
-                count < this.state.messageCap - 1 &&
-                this.state.room.timeline[i].sender &&
-                this.state.room.timeline[i - 1].sender &&
-                this.state.room.timeline[i].sender.userId ===
+            if (i > 0 && count < this.state.messageCap - 1) {
+                if (this.state.room.timeline[i].sender &&
+                    this.state.room.timeline[i - 1].sender &&
+                    this.state.room.timeline[i].sender.userId ===
                     this.state.room.timeline[i - 1].sender.userId)
-            {
-                continuation = true;
-            }
+                {
+                    continuation = true;
+                }
+
+                var ts0 = this.state.room.timeline[i - 1].getTs();
+                var ts1 = this.state.room.timeline[i].getTs();
+                if (new Date(ts0).toDateString() !== new Date(ts1).toDateString()) {
+                    dateSeparator = <DateSeparator key={ts1} ts={ts1}/>;
+                    continuation = false;
+                }
+            } 
             if (!TileType) continue;
             ret.unshift(
                 <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/>
             );
+            if (dateSeparator) {
+                ret.unshift(dateSeparator);
+            }
             ++count;
         }
         return ret;