Merge pull request #1388 from matrix-org/t3chguy/start_mels_expanded

start MELS expanded if it contains a highlighted/permalinked event.

Author: ara4n

src/components/structures/MessagePanel.js

@@ -365,8 +365,13 @@ module.exports = React.createClass({
                     summarisedEvents.push(collapsedMxEv);
                 }
 
+                let highlightInMels = false;
+
                 // At this point, i = the index of the last event in the summary sequence
                 let eventTiles = summarisedEvents.map((e) => {
+                    if (e.getId() === this.props.highlightedEventId) {
+                        highlightInMels = true;
+                    }
                     // In order to prevent DateSeparators from appearing in the expanded form
                     // of MemberEventListSummary, render each member event as if the previous
                     // one was itself. This way, the timestamp of the previous event === the
@@ -380,15 +385,13 @@ module.exports = React.createClass({
                     eventTiles = null;
                 }
 
-                ret.push(
-                    <MemberEventListSummary
-                        key={key}
-                        events={summarisedEvents}
-                        onToggle={this._onWidgetLoad} // Update scroll state
-                    >
-                            {eventTiles}
-                    </MemberEventListSummary>
-                );
+                ret.push(<MemberEventListSummary key={key}
+                    events={summarisedEvents}
+                    onToggle={this._onWidgetLoad} // Update scroll state
+                    startExpanded={highlightInMels}
+                >
+                        {eventTiles}
+                </MemberEventListSummary>);
 
                 if (readMarkerInMels) {
                     ret.push(this._getReadMarkerTile(visible));

src/components/views/elements/MemberEventListSummary.js

@@ -34,11 +34,13 @@ module.exports = React.createClass({
         threshold: React.PropTypes.number,
         // Called when the MELS expansion is toggled
         onToggle: React.PropTypes.func,
+        // Whether or not to begin with state.expanded=true
+        startExpanded: React.PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
-            expanded: false,
+            expanded: Boolean(this.props.startExpanded),
         };
     },
 
@@ -376,7 +378,7 @@ module.exports = React.createClass({
             return items[0];
         } else if (remaining) {
             items = items.slice(0, itemLimit);
-            return (remaining > 1) 
+            return (remaining > 1)
                 ? _t("%(items)s and %(remaining)s others", { items: items.join(', '), remaining: remaining } )
                 : _t("%(items)s and one other", { items: items.join(', ') });
         } else {