basic date separator support

ara4n · ara4n · commit 1a95148dae48 · 2015-07-17T00:12:53.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ div.error {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`h2 {`
	`31`	`+ color: #80cef4;`
`31`	`32`	`font-weight: 400;`
`32`	`33`	`font-size: 20px;`
`33`	`34`	`margin-top: 16px;`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,6 @@ limitations under the License.`
`44`	`44`	`padding-left: 16px;`
`45`	`45`	`padding-right: 16px;`
`46`	`46`
`47`		`- /* background-color: #0ff; */`
`48`	`47`	`height: 100%;`
`49`	`48`	`overflow-y: scroll;`
`50`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,6 @@ limitations under the License.`
`64`	`64`	`width: 100%;`
`65`	`65`	`height: 100%;`
`66`	`66`	`margin-bottom: 60px;`
`67`		`- /* background-color: #ff0; */`
`68`	`67`
`69`	`68`	`overflow-y: scroll;`
`70`	`69`	`}`
`@@ -78,6 +77,14 @@ limitations under the License.`
`78`	`77`	`width: 100%;`
`79`	`78`	`}`
`80`	`79`
	`80`	`+.mx_RoomView_MessageList h2 {`
	`81`	`+ clear: both;`
	`82`	`+ margin-top: 32px;`
	`83`	`+ margin-bottom: 8px;`
	`84`	`+ padding-bottom: 6px;`
	`85`	`+ border-bottom: 1px solid #a8dbf3;`
	`86`	`+}`
	`87`	`+`
`81`	`88`	`.mx_RoomView_invitePrompt {`
`82`	`89`	`}`
`83`	`90`