Merge pull request #670 from matrix-org/matthew/empty-timelines

show placeholder when timeline empty

src/components/structures/FilePanel.js

@@ -105,6 +105,7 @@ var FilePanel = React.createClass({
                     showUrlPreview = { false }
                     tileShape="file_grid"
                     opacity={ this.props.opacity }
+                    empty="There are no visible files in this room"
                 />
             );
         }

src/components/structures/NotificationPanel.js

@@ -48,6 +48,7 @@ var NotificationPanel = React.createClass({
                     showUrlPreview = { false }
                     opacity={ this.props.opacity }
                     tileShape="notif"
+                    empty="You have no visible notifications"
                 />
             );
         }

src/components/structures/TimelinePanel.js

@@ -96,6 +96,9 @@ var TimelinePanel = React.createClass({
 
         // shape property to be passed to EventTiles
         tileShape: React.PropTypes.string,
+
+        // placeholder text to use if the timeline is empty
+        empty: React.PropTypes.string,
     },
 
     statics: {
@@ -990,6 +993,14 @@ var TimelinePanel = React.createClass({
             );
         }
 
+        if (this.state.events.length == 0) {
+            return (
+                    <div className={ this.props.className + " mx_RoomView_messageListWrapper" }>
+                        <div className="mx_RoomView_empty">{ this.props.empty }</div>
+                    </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.