From e7074ef9af15f22ec8f1b80d891e80162c897432 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 7 Sep 2016 02:16:29 +0100
Subject: [PATCH] apply FilePanel css and fix filtering

---
 src/components/structures/FilePanel.js     | 2 ++
 src/components/structures/MessagePanel.js  | 5 ++++-
 src/components/structures/RoomView.js      | 1 +
 src/components/structures/TimelinePanel.js | 8 ++++++--
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 9b8c197889..58888d39b3 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -55,6 +55,7 @@ var FilePanel = React.createClass({
 
             client.getOrCreateFilter("FILTER_FILES_" + client.credentials.userId, filter).then(
                 (filterId)=>{
+                    filter.filterId = filterId;
                     var timelineSet = this.state.room.getOrCreateFilteredTimelineSet(filter);
                     this.setState({ timelineSet: timelineSet });
                 },
@@ -93,6 +94,7 @@ var FilePanel = React.createClass({
         if (this.state.timelineSet) {
             return (
                 <TimelinePanel ref={this._gatherTimelinePanelRef}
+                    className="mx_FilePanel"
                     manageReadReceipts={false}
                     manageReadMarkers={false}
                     timelineSet={this.state.timelineSet}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 73ea2fd1a0..54ed501289 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -73,6 +73,9 @@ module.exports = React.createClass({
 
         // opacity for dynamic UI fading effects
         opacity: React.PropTypes.number,
+
+        // className for the panel
+        className: React.PropTypes.string.isRequired,
     },
 
     componentWillMount: function() {
@@ -503,7 +506,7 @@ module.exports = React.createClass({
         style.opacity = this.props.opacity;
 
         return (
-            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel mx_fadable"
+            <ScrollPanel ref="scrollPanel" className={ this.props.className + " mx_fadable" }
                     onScroll={ this.props.onScroll }
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 73d1b8582b..8d2d2631fe 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1581,6 +1581,7 @@ module.exports = React.createClass({
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
                 showUrlPreview = { this.state.showUrlPreview }
                 opacity={ this.props.opacity }
+                className="mx_RoomView_messagePanel"
             />);
 
         var topUnreadMessagesBar = null;
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 6e337eb6ab..122737ed52 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -90,6 +90,9 @@ var TimelinePanel = React.createClass({
 
         // maximum number of events to show in a timeline
         timelineCap: React.PropTypes.number,
+
+        // classname to use for the messagepanel
+        className: React.PropTypes.string.isRequired,
     },
 
     statics: {
@@ -827,7 +830,7 @@ var TimelinePanel = React.createClass({
 
         // if we're at the end of the live timeline, append the pending events
         if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-            events.push(... this.props.timelineSet.room.getPendingEvents());
+            events.push(... this.props.timelineSet.getPendingEvents());
         }
 
         return events;
@@ -941,7 +944,7 @@ var TimelinePanel = React.createClass({
         // exist.
         if (this.state.timelineLoading) {
             return (
-                    <div className="mx_RoomView_messagePanel mx_RoomView_messageListWrapper">
+                    <div className={ this.props.className + " mx_RoomView_messageListWrapper" }>
                         <Loader />
                     </div>
             );
@@ -973,6 +976,7 @@ var TimelinePanel = React.createClass({
                     onScroll={ this.onMessageListScroll }
                     onFillRequest={ this.onMessageListFillRequest }
                     opacity={ this.props.opacity }
+                    className={ this.props.className }
             />
         );
     },