basic date separator support

This commit is contained in:
Matthew Hodgson 2015-07-17 00:12:36 +01:00
parent a2ca5f2847
commit 1a95148dae
6 changed files with 34 additions and 11 deletions

View File

@ -28,6 +28,7 @@ div.error {
} }
h2 { h2 {
color: #80cef4;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
margin-top: 16px; margin-top: 16px;

View File

@ -44,7 +44,6 @@ limitations under the License.
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
/* background-color: #0ff; */
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }

View File

@ -64,7 +64,6 @@ limitations under the License.
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-bottom: 60px; margin-bottom: 60px;
/* background-color: #ff0; */
overflow-y: scroll; overflow-y: scroll;
} }
@ -78,6 +77,14 @@ limitations under the License.
width: 100%; 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 { .mx_RoomView_invitePrompt {
} }

View File

@ -45,12 +45,14 @@ module.exports = React.createClass({
render: function() { render: function() {
// XXX: for now, just cheekily borrow the css from message tile... // XXX: for now, just cheekily borrow the css from message tile...
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
return ( return (
<div className="mx_MessageTile"> <div className="mx_MessageTile">
<div className="mx_MessageTile_avatar"> <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"/> <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40"/>
</div> </div>
<MessageTimestamp ts={this.props.mxEvent.getTs()} /> { timestamp }
<span className="mx_SenderProfile"></span> <span className="mx_SenderProfile"></span>
<span className="mx_MessageTile_content"> <span className="mx_MessageTile_content">
{this.getMemberEventText()} {this.getMemberEventText()}

View File

@ -98,6 +98,7 @@ require('../skins/base/views/organisms/RightPanel');
require('../skins/base/views/molecules/RoomCreate'); require('../skins/base/views/molecules/RoomCreate');
require('../skins/base/views/molecules/RoomDropTarget'); require('../skins/base/views/molecules/RoomDropTarget');
require('../skins/base/views/molecules/DirectoryMenu'); require('../skins/base/views/molecules/DirectoryMenu');
require('../skins/base/views/molecules/DateSeparator');
require('../skins/base/views/atoms/voip/VideoFeed'); require('../skins/base/views/atoms/voip/VideoFeed');
require('../skins/base/views/molecules/voip/VideoView'); require('../skins/base/views/molecules/voip/VideoView');
require('../skins/base/views/molecules/voip/CallView'); require('../skins/base/views/molecules/voip/CallView');

View File

@ -36,6 +36,8 @@ var tileTypes = {
'm.call.hangup': ComponentBroker.get('molecules/voip/MCallHangupTile') 'm.call.hangup': ComponentBroker.get('molecules/voip/MCallHangupTile')
}; };
var DateSeparator = ComponentBroker.get('molecules/DateSeparator');
module.exports = { module.exports = {
getInitialState: function() { getInitialState: function() {
return { return {
@ -231,22 +233,33 @@ module.exports = {
var TileType = tileTypes[mxEv.getType()]; var TileType = tileTypes[mxEv.getType()];
var continuation = false; var continuation = false;
var last = false; var last = false;
var dateSeparator = null;
if (i == this.state.room.timeline.length - 1) { if (i == this.state.room.timeline.length - 1) {
last = true; last = true;
} }
if (i > 0 && if (i > 0 && count < this.state.messageCap - 1) {
count < this.state.messageCap - 1 && if (this.state.room.timeline[i].sender &&
this.state.room.timeline[i].sender && this.state.room.timeline[i - 1].sender &&
this.state.room.timeline[i - 1].sender && this.state.room.timeline[i].sender.userId ===
this.state.room.timeline[i].sender.userId ===
this.state.room.timeline[i - 1].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; if (!TileType) continue;
ret.unshift( ret.unshift(
<TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/> <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/>
); );
if (dateSeparator) {
ret.unshift(dateSeparator);
}
++count; ++count;
} }
return ret; return ret;