group messages together from the same user

skins/base/css/molecules/MessageTile.css

@@ -29,6 +29,16 @@ limitations under the License.
 	float: left;	
 }
 
+.mx_MessageTile_continuation {
+	margin-top: 8px ! important;
+}
+
+.mx_MessageTile_continuation .mx_MessageTile_avatar,
+.mx_MessageTile_continuation .mx_SenderProfile
+{
+	display: none ! important;
+}
+
 .mx_MessageTile .mx_SenderProfile {
 	color: #acacac;
 	font-size: 13px;
@@ -43,6 +53,8 @@ limitations under the License.
 }
 
 .mx_MessageTile_content {
+	padding-right: 100px;
+	display: block;
 }
 
 .mx_MessageTile_sending {

skins/base/views/molecules/MessageTile.js

@@ -52,7 +52,8 @@ module.exports = React.createClass({
             mx_MessageTile: true,
             mx_MessageTile_sending: this.props.mxEvent.status == 'sending',
             mx_MessageTile_notSent: this.props.mxEvent.status == 'not_sent',
-            mx_MessageTile_highlight: this.shouldHighlight()
+            mx_MessageTile_highlight: this.shouldHighlight(),
+            mx_MessageTile_continuation: this.props.continuation,
         });
         return (
             <div className={classes}>

src/controllers/organisms/RoomView.js

@@ -226,9 +226,20 @@ module.exports = {
         for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
             var mxEv = this.state.room.timeline[i];
             var TileType = tileTypes[mxEv.getType()];
+            var continuation = false;
+            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 ===
+                    this.state.room.timeline[i - 1].sender.userId)
+            {
+                console.log("i=" + i + ", continuation=true");
+                continuation = true;
+            }
             if (!TileType) continue;
             ret.unshift(
-                <TileType key={mxEv.getId()} mxEvent={mxEv} />
+                <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation}/>
             );
             ++count;
         }