From 804af341ac4f929329d51e60d5c35fa2ba6391f1 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 5 Nov 2015 14:52:44 +0000
Subject: [PATCH] Add a 'connection lost' bar.
---
src/controllers/organisms/RoomView.js | 9 ++++++++
src/skins/vector/css/organisms/RoomView.css | 24 ++++++++++++++++++++
src/skins/vector/views/organisms/RoomView.js | 19 +++++++++++++++-
3 files changed, 51 insertions(+), 1 deletion(-)
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index f5a8d28f..15d67b15 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -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.
diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css
index d564b086..961a7945 100644
--- a/src/skins/vector/css/organisms/RoomView.css
+++ b/src/skins/vector/css/organisms/RoomView.css
@@ -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;
diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js
index 4f15ea61..86b200cf 100644
--- a/src/skins/vector/views/organisms/RoomView.js
+++ b/src/skins/vector/views/organisms/RoomView.js
@@ -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=""/>