From 8d3876c7d04dea503e4c08f97e475069527eba5b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 9 Feb 2017 15:14:16 +0000
Subject: [PATCH] MELS: either expanded or summary, not both

Fixes vector-im/riot-web#3097
---
 .../views/elements/MemberEventListSummary.js  | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 1a73b5a50e8..1eb7b928d1b 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -108,7 +108,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <span>
+            <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
                 {summaries.join(", ")}
             </span>
         );
@@ -264,7 +264,7 @@ module.exports = React.createClass({
             );
         });
         return (
-            <span>
+            <span className="mx_MemberEventListSummary_avatars">
                 {avatars}
             </span>
         );
@@ -397,31 +397,28 @@ module.exports = React.createClass({
             (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]
         );
 
-        const avatars = this._renderAvatars(avatarMembers);
-        const summary = this._renderSummary(aggregate.names, orderedTransitionSequences);
+        let summaryContainer = null;
+        if (!expanded) {
+            summaryContainer = (
+                <div className="mx_EventTile_line">
+                    <div className="mx_EventTile_info">
+                        {this._renderAvatars(avatarMembers)}
+                        {this._renderSummary(aggregate.names, orderedTransitionSequences)}
+                    </div>
+                </div>
+            );
+        }
         const toggleButton = (
-            <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
+            <div className={"mx_MemberEventListSummary_toggle"} onClick={this._toggleSummary}>
                 {expanded ? 'collapse' : 'expand'}
-            </a>
-        );
-
-        const summaryContainer = (
-            <div className="mx_EventTile_line">
-                <div className="mx_EventTile_info">
-                    <span className="mx_MemberEventListSummary_avatars">
-                        {avatars}
-                    </span>
-                    <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                        {summary}
-                    </span>&nbsp;
-                    {toggleButton}
-                </div>
             </div>
         );
 
         return (
             <div className="mx_MemberEventListSummary">
+                {toggleButton}
                 {summaryContainer}
+                {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}
                 {expandedEvents}
             </div>
         );