post-review tweaks

src/components/structures/MessagePanel.js

@@ -23,7 +23,7 @@ module.exports = React.createClass({
     displayName: 'MessagePanel',
 
     propTypes: {
-        // true to give the component a 'display: hidden' style.
+        // true to give the component a 'display: none' style.
         hidden: React.PropTypes.bool,
 
         // the list of MatrixEvents to display
@@ -117,19 +117,6 @@ module.exports = React.createClass({
         }
     },
 
-    render: function() {
-        var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
-        return (
-            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel"
-                    onScroll={ this.props.onScroll } 
-                    onFillRequest={ this.props.onFillRequest }
-                    style={ this.props.hidden ? { display: 'none' } : {} }
-                    stickyBottom={ this.props.stickyBottom }>
-                {this._getEventTiles()}
-            </ScrollPanel>
-        );
-    },
-
     _getEventTiles: function() {
         var DateSeparator = sdk.getComponent('messages.DateSeparator');
         var EventTile = sdk.getComponent('rooms.EventTile');
@@ -240,15 +227,18 @@ module.exports = React.createClass({
         // is the last element or not, because we only decide as we're going along.
         if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
             var hr;
-            hr = (<hr className="mx_RoomView_myReadMarker" 
+            hr = (
-                          style={{opacity: 1, width: '99%'}} 
+                <hr className="mx_RoomView_myReadMarker" 
-                          ref={function(n) {
+                  style={{opacity: 1, width: '99%'}} 
-                              Velocity(n, {opacity: '0', width: '10%'}, 
+                  ref={function(n) {
-                                       {duration: 400, easing: 'easeInSine', delay: 1000});
+                        Velocity(n, {opacity: '0', width: '10%'},
-            }} />);
+                                    {duration: 400, easing: 'easeInSine',
+                                     delay: 1000});
+                  }}
+            />);
             ret.splice(ghostIndex, 0, (
                 <li key="_readuptoghost" 
-                        className="mx_RoomView_myReadMarker_container">
+                  className="mx_RoomView_myReadMarker_container">
                     {hr}
                 </li>
             ));
@@ -261,4 +251,17 @@ module.exports = React.createClass({
         if (this.eventNodes == undefined) this.eventNodes = {};
         this.eventNodes[eventId] = node;
     },
+
+    render: function() {
+        var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        return (
+            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel"
+                    onScroll={ this.props.onScroll } 
+                    onFillRequest={ this.props.onFillRequest }
+                    style={ this.props.hidden ? { display: 'none' } : {} }
+                    stickyBottom={ this.props.stickyBottom }>
+                {this._getEventTiles()}
+            </ScrollPanel>
+        );
+    },
 });

src/components/structures/TimelinePanel.js

@@ -51,7 +51,7 @@ module.exports = React.createClass({
         // representing.
         room: React.PropTypes.object.isRequired,
 
-        // true to give the component a 'display: hidden' style.
+        // true to give the component a 'display: none' style.
         hidden: React.PropTypes.bool,
 
         // ID of an event to highlight. If undefined, no event will be highlighted.
@@ -279,56 +279,6 @@ module.exports = React.createClass({
         return this.refs.messagePanel.getScrollState();
     },
 
-    render: function() {
-        var MessagePanel = sdk.getComponent("structures.MessagePanel");
-        var Loader = sdk.getComponent("elements.Spinner");
-
-        // just show a spinner while the timeline loads.
-        //
-        // put it in a div of the right class (mx_RoomView_messagePanel) so
-        // that the order in the roomview flexbox is correct, and
-        // mx_RoomView_messageListWrapper to position the inner div in the
-        // right place.
-        //
-        // Note that the click-on-search-result functionality relies on the
-        // fact that the messagePanel is hidden while the timeline reloads,
-        // but that the RoomHeader (complete with search term) continues to
-        // exist.
-        if (this.state.timelineLoading) {
-            return (
-                    <div className="mx_RoomView_messagePanel mx_RoomView_messageListWrapper">
-                        <Loader />
-                    </div>
-            );
-        }
-
-        // give the messagepanel a stickybottom if we're at the end of the
-        // live timeline, so that the arrival of new events triggers a
-        // scroll.
-        //
-        // Make sure that stickyBottom is *false* if we can paginate
-        // forwards, otherwise if somebody hits the bottom of the loaded
-        // events when viewing historical messages, we get stuck in a loop
-        // of paginating our way through the entire history of the room.
-        var stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
-
-        return (
-            <MessagePanel ref="messagePanel"
-                    hidden={ this.props.hidden }
-                    events={ this.state.events }
-                    highlightedEventId={ this.props.highlightedEventId }
-                    readMarkerEventId={ this.state.readMarkerEventId }
-                    readMarkerGhostEventId={ this.state.readMarkerGhostEventId }
-                    suppressFirstDateSeparator={ this.state.canBackPaginate }
-                    ourUserId={ MatrixClientPeg.get().credentials.userId }
-                    stickyBottom={ stickyBottom }
-                    isConferenceUser={ this.props.isConferenceUser }
-                    onScroll={ this.props.onScroll }
-                    onFillRequest={ this.onMessageListFillRequest }
-            />
-        );
-    },
-
     _initTimeline: function(props) {
         var initialEvent = props.eventId;
         var pixelOffset = props.eventPixelOffset;
@@ -446,4 +396,55 @@ module.exports = React.createClass({
         var myUserId = client.credentials.userId;
         return this.props.room.getEventReadUpTo(myUserId);
     },
+
+
+    render: function() {
+        var MessagePanel = sdk.getComponent("structures.MessagePanel");
+        var Loader = sdk.getComponent("elements.Spinner");
+
+        // just show a spinner while the timeline loads.
+        //
+        // put it in a div of the right class (mx_RoomView_messagePanel) so
+        // that the order in the roomview flexbox is correct, and
+        // mx_RoomView_messageListWrapper to position the inner div in the
+        // right place.
+        //
+        // Note that the click-on-search-result functionality relies on the
+        // fact that the messagePanel is hidden while the timeline reloads,
+        // but that the RoomHeader (complete with search term) continues to
+        // exist.
+        if (this.state.timelineLoading) {
+            return (
+                    <div className="mx_RoomView_messagePanel mx_RoomView_messageListWrapper">
+                        <Loader />
+                    </div>
+            );
+        }
+
+        // give the messagepanel a stickybottom if we're at the end of the
+        // live timeline, so that the arrival of new events triggers a
+        // scroll.
+        //
+        // Make sure that stickyBottom is *false* if we can paginate
+        // forwards, otherwise if somebody hits the bottom of the loaded
+        // events when viewing historical messages, we get stuck in a loop
+        // of paginating our way through the entire history of the room.
+        var stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
+
+        return (
+            <MessagePanel ref="messagePanel"
+                    hidden={ this.props.hidden }
+                    events={ this.state.events }
+                    highlightedEventId={ this.props.highlightedEventId }
+                    readMarkerEventId={ this.state.readMarkerEventId }
+                    readMarkerGhostEventId={ this.state.readMarkerGhostEventId }
+                    suppressFirstDateSeparator={ this.state.canBackPaginate }
+                    ourUserId={ MatrixClientPeg.get().credentials.userId }
+                    stickyBottom={ stickyBottom }
+                    isConferenceUser={ this.props.isConferenceUser }
+                    onScroll={ this.props.onScroll }
+                    onFillRequest={ this.onMessageListFillRequest }
+            />
+        );
+    },
 });