Merge branch 'develop' into dbkr/scalar

src/components/structures/MatrixChat.js

@@ -1001,9 +1001,12 @@ module.exports = React.createClass({
         var rooms = MatrixClientPeg.get().getRooms();
         for (var i = 0; i < rooms.length; ++i) {
             if (rooms[i].hasMembershipState(MatrixClientPeg.get().credentials.userId, 'invite')) {
-                ++notifCount;
+                notifCount++;
             } else if (rooms[i].getUnreadNotificationCount()) {
-                notifCount += rooms[i].getUnreadNotificationCount();
+                // if we were summing unread notifs:
+                // notifCount += rooms[i].getUnreadNotificationCount();
+                // instead, we just count the number of rooms with notifs.
+                notifCount++;
             }
         }
         try {

src/components/structures/RoomView.js

@@ -132,8 +132,7 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.accountData", this.onRoomAccountData);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
-        // xchat-style tab complete, add a colon if tab
-        // completing at the start of the text
+
         this.tabComplete = new TabComplete({
             allowLooping: false,
             autoEnterTabComplete: true,
@@ -143,7 +142,6 @@ module.exports = React.createClass({
             }
         });
 
-
         // if this is an unknown room then we're in one of three states:
         // - This is a room we can peek into (search engine) (we can /peek)
         // - This is a room we can publicly join or were invited to. (we can /join)

src/components/structures/ScrollPanel.js

@@ -56,7 +56,7 @@ if (DEBUG_SCROLL) {
  *     offset.  We don't save the absolute scroll offset, because that would be
  *     affected by window width, zoom level, amount of scrollback, etc. Instead
  *     we save an identifier for the last fully-visible message, and the number
- *     of pixels the window was scrolled below it - which is hopefully be near
+ *     of pixels the window was scrolled below it - which is hopefully near
  *     enough.
  *
  * The 'stickyBottom' property controls the behaviour when we reach the bottom

src/components/structures/TimelinePanel.js

@@ -399,6 +399,14 @@ var TimelinePanel = React.createClass({
     sendReadReceipt: function() {
         if (!this.refs.messagePanel) return;
 
+        // if we are scrolled to the bottom, do a quick-reset of our unreadNotificationCount
+        // to avoid having to wait from the remote echo from the homeserver.
+        if (this.getScrollState().stuckAtBottom) {
+            this.props.room.setUnreadNotificationCount('total', 0);
+            this.props.room.setUnreadNotificationCount('highlight', 0);
+            // XXX: i'm a bit surprised we don't have to emit an event or dispatch to get this picked up
+        }
+
         var currentReadUpToEventId = this._getCurrentReadReceipt(true);
         var currentReadUpToEventIndex = this._indexForEventId(currentReadUpToEventId);
 

src/components/views/rooms/RoomTile.js

@@ -83,7 +83,7 @@ module.exports = React.createClass({
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
         var badge;
         if (this.props.highlight || notificationCount > 0) {
-            badge = <div className="mx_RoomTile_badge"/>;
+            badge = <div className="mx_RoomTile_badge">{ notificationCount ? notificationCount : '!' }</div>;
         }
         /*
         if (this.props.highlight) {
@@ -132,9 +132,9 @@ module.exports = React.createClass({
             <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className="mx_RoomTile_avatar">
                     <RoomAvatar room={this.props.room} width={24} height={24} />
-                    { badge }
                 </div>
                 { label }
+                { badge }
                 { incomingCallBox }
             </div>
         ));