Matrix/element-web
Matrix/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-09-17 02:25:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

Message scrolling

Browse source
This commit is contained in:
David Baker 2015-06-18 11:23:35 +01:00
parent ed58a59f82
commit a63299aae0
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/organisms/RoomView.js
View file

@ -17,6 +17,7 @@ module.exports = React.createClass({
componentWillMount: function() { componentWillMount: function() {
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
this.atBottom = true;
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
@ -25,14 +26,16 @@ module.exports = React.createClass({
} }
}, },
componentWillReceiveProps: function(props) { // MatrixRoom still showing the messages from the old room?
this.setState({ // Set the key to the room_id. Sadly you can no longer get at
room: MatrixClientPeg.get().getRoom(props.roomId) // the key from inside the component, or we'd check this in code.
}); /*componentWillReceiveProps: function(props) {
}, },*/
onRoomTimeline: function(ev, room, toStartOfTimeline) { onRoomTimeline: function(ev, room, toStartOfTimeline) {
if (room.roomId != this.props.roomId) return; if (room.roomId != this.props.roomId) return;
var messageUl = this.refs.messageList.getDOMNode();
this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight;
this.setState({ this.setState({
room: MatrixClientPeg.get().getRoom(this.props.roomId) room: MatrixClientPeg.get().getRoom(this.props.roomId)
}); });
@ -50,12 +53,24 @@ module.exports = React.createClass({
return ( return (
<div className="mx_RoomView"> <div className="mx_RoomView">
<RoomHeader room={this.state.room} /> <RoomHeader room={this.state.room} />
<ul> <ul ref="messageList">
{this.getMessageTiles()} {this.getMessageTiles()}
</ul> </ul>
<MessageComposer roomId={this.props.roomId} /> <MessageComposer roomId={this.props.roomId} />
</div> </div>
); );
}, },
componentDidMount: function() {
var messageUl = this.refs.messageList.getDOMNode();
messageUl.scrollTop = messageUl.scrollHeight;
},
componentDidUpdate: function() {
if (this.atBottom) {
var messageUl = this.refs.messageList.getDOMNode();
messageUl.scrollTop = messageUl.scrollHeight;
}
}
}); });

2
src/pages/MatrixChat.js
View file

@ -77,7 +77,7 @@ module.exports = React.createClass({
<MatrixToolbar /> <MatrixToolbar />
<RoomList selectedRoom={this.state.currentRoom} /> <RoomList selectedRoom={this.state.currentRoom} />
</div> </div>
<RoomView roomId={this.state.currentRoom} /> <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
</div> </div>
); );
} else if (this.state.logged_in) { } else if (this.state.logged_in) {