Merge branch 'rav/roomview_works' into develop

Implementation of new read-marker semantics (PR #160).

src/components/structures/RoomView.js

@@ -64,8 +64,8 @@ module.exports = React.createClass({
         eventId: React.PropTypes.string,
 
         // where to position the event given by eventId, in pixels from the
-        // bottom of the viewport. If not given, will try to put the event in the
-        // middle of the viewprt.
+        // bottom of the viewport. If not given, will try to put the event
+        // 1/3 of the way down the viewport.
         eventPixelOffset: React.PropTypes.number,
 
         // ID of an event to highlight. If undefined, no event will be highlighted.
@@ -94,6 +94,8 @@ module.exports = React.createClass({
             // 'scroll to bottom' knob, among a couple of other things.
             atEndOfLiveTimeline: true,
 
+            showTopUnreadMessagesBar: false,
+
             auxPanelMaxHeight: undefined,
         }
     },
@@ -556,6 +558,7 @@ module.exports = React.createClass({
                 atEndOfLiveTimeline: false,
             });
         }
+        this._updateTopUnreadMessagesBar();
     },
 
     onDragOver: function(ev) {
@@ -879,6 +882,30 @@ module.exports = React.createClass({
         this.refs.messagePanel.jumpToLiveTimeline();
     },
 
+    // jump up to wherever our read marker is
+    jumpToReadMarker: function() {
+        this.refs.messagePanel.jumpToReadMarker();
+    },
+
+    // update the read marker to match the read-receipt
+    forgetReadMarker: function() {
+        this.refs.messagePanel.forgetReadMarker();
+    },
+
+    // decide whether or not the top 'unread messages' bar should be shown
+    _updateTopUnreadMessagesBar: function() {
+        if (!this.refs.messagePanel)
+            return;
+
+        var pos = this.refs.messagePanel.getReadMarkerPosition();
+
+        // we want to show the bar if the read-marker is off the top of the
+        // screen.
+        var showBar = (pos < 0);
+
+        this.setState({showTopUnreadMessagesBar: showBar});
+    },
+
     // get the current scroll position of the room, so that it can be
     // restored when we switch back to it.
     //
@@ -1247,8 +1274,22 @@ module.exports = React.createClass({
                 eventId={this.props.eventId}
                 eventPixelOffset={this.props.eventPixelOffset}
                 onScroll={ this.onMessageListScroll }
+                onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
             />);
 
+        var topUnreadMessagesBar = null;
+        if (this.state.showTopUnreadMessagesBar) {
+            var TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
+            topUnreadMessagesBar = (
+                <div className="mx_RoomView_topUnreadMessagesBar">
+                    <TopUnreadMessagesBar
+                       onScrollUpClick={this.jumpToReadMarker}
+                       onCloseClick={this.forgetReadMarker}
+                    />
+                </div>
+            );
+        }
+
         return (
             <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") } ref="roomView">
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
@@ -1264,6 +1305,7 @@ module.exports = React.createClass({
                         (myMember && myMember.membership === "join") ? this.onLeaveClick : null
                     } />
                 { auxPanel }
+                { topUnreadMessagesBar }
                 { messagePanel }
                 { searchResultsPanel }
                 <div className="mx_RoomView_statusArea">