MELS: either expanded or summary, not both

Fixes element-hq/element-web#3097
matrix-org · Feb 9, 2017 · 8d3876c · 8d3876c
1 parent 7ba9e27
commit 8d3876c
Showing 1 changed file with 16 additions and 19 deletions.
diff --git 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>
         );