Add a 'connection lost' bar.

This commit is contained in:
Kegan Dougal 2015-11-05 14:52:44 +00:00
parent 942659df0d
commit 804af341ac
3 changed files with 51 additions and 1 deletions

View File

@ -41,6 +41,7 @@ module.exports = {
draggingFile: false,
searching: false,
searchResults: null,
syncState: MatrixClientPeg.get().getSyncState()
}
},
@ -50,6 +51,7 @@ module.exports = {
MatrixClientPeg.get().on("Room.name", this.onRoomName);
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
MatrixClientPeg.get().on("sync", this.onSyncStateChange);
this.atBottom = true;
},
@ -67,6 +69,7 @@ module.exports = {
MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
}
},
@ -102,6 +105,12 @@ module.exports = {
}
},
onSyncStateChange: function(state) {
this.setState({
syncState: state
});
},
// MatrixRoom still showing the messages from the old room?
// Set the key to the room_id. Sadly you can no longer get at
// the key from inside the component, or we'd check this in code.

View File

@ -185,6 +185,30 @@ limitations under the License.
vertical-align: middle;
}
.mx_RoomView_connectionLostBar {
margin-top: 5px;
}
.mx_RoomView_connectionLostBar img {
padding-left: 10px;
padding-right: 22px;
vertical-align: middle;
float: left;
}
.mx_RoomView_connectionLostBar_textArea {
float: left;
}
.mx_RoomView_connectionLostBar_title {
color: #f00;
}
.mx_RoomView_connectionLostBar_desc {
color: #ddd;
font-size: 12px;
}
.mx_RoomView_typingBar {
margin-top: 10px;
margin-left: 54px;

View File

@ -197,9 +197,26 @@ module.exports = React.createClass({
} else {
var typingString = this.getWhoIsTypingString();
var unreadMsgs = this.getUnreadMessagesString();
// no conn bar trumps unread count since you can't get unread messages
// without a connection! (technically may already have some but meh)
if (this.state.syncState === "ERROR") {
statusBar = (
<div className="mx_RoomView_connectionLostBar">
<img src="img/cancel.png" width="10" height="12" alt=""/>
<div className="mx_RoomView_connectionLostBar_textArea">
<span className="mx_RoomView_connectionLostBar_title">
Internet connection has been lost.
</span>
<div className="mx_RoomView_connectionLostBar_desc">
Sent messages will be stored until your connection has resumed.
</div>
</div>
</div>
);
}
// unread count trumps who is typing since the unread count is only
// set when you've scrolled up
if (unreadMsgs) {
else if (unreadMsgs) {
statusBar = (
<div className="mx_RoomView_unreadMessagesBar" onClick={ this.scrollToBottom }>
<img src="img/newmessages.png" width="24" height="24" alt=""/>