From 7484cc3f70ecb1067b78d8dc5374760c0ee4ff65 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 2 Feb 2017 18:29:33 +0000
Subject: [PATCH 1/3] Make default avatars clickable

BaseAvatar can be passed an onClick which is called when it's, er,
clicked, except when it was the default avatar in which case it
merrily ignored it. Make it not ignore it.
---
 src/components/views/avatars/BaseAvatar.js | 38 +++++++++++++++-------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 5862a9d4f1..456539b374 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -145,17 +145,33 @@ module.exports = React.createClass({
 
         if (imageUrl === this.state.defaultImageUrl) {
             const initialLetter = this._getInitialLetter(name);
-            return (
-                <span className="mx_BaseAvatar" {...otherProps}>
-                    <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
-                            style={{ fontSize: (width * 0.65) + "px",
-                                    width: width + "px",
-                                    lineHeight: height + "px" }}>{initialLetter}</EmojiText>
-                    <img className="mx_BaseAvatar_image" src={imageUrl}
-                        alt="" title={title} onError={this.onError}
-                        width={width} height={height} />
-                </span>
-            );
+            if (onClick != null) {
+                return (
+                    <AccessibleButton element='span' className="mx_BaseAvatar"
+                        onClick={onClick} {...otherProps}
+                    >
+                        <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
+                                style={{ fontSize: (width * 0.65) + "px",
+                                        width: width + "px",
+                                        lineHeight: height + "px" }}>{initialLetter}</EmojiText>
+                        <img className="mx_BaseAvatar_image" src={imageUrl}
+                            alt="" title={title} onError={this.onError}
+                            width={width} height={height} />
+                    </AccessibleButton>
+                );
+            } else {
+                return (
+                    <span className="mx_BaseAvatar" {...otherProps}>
+                        <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
+                                style={{ fontSize: (width * 0.65) + "px",
+                                        width: width + "px",
+                                        lineHeight: height + "px" }}>{initialLetter}</EmojiText>
+                        <img className="mx_BaseAvatar_image" src={imageUrl}
+                            alt="" title={title} onError={this.onError}
+                            width={width} height={height} />
+                    </span>
+                );
+            }
         }
         if (onClick != null) {
             return (

From 10edab06a613bc564ae634bc9e179fa7a5c02738 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 2 Feb 2017 18:41:50 +0000
Subject: [PATCH 2/3] Don't c+p the complex markup

---
 src/components/views/avatars/BaseAvatar.js | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 456539b374..70c0ed3eae 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -145,30 +145,30 @@ module.exports = React.createClass({
 
         if (imageUrl === this.state.defaultImageUrl) {
             const initialLetter = this._getInitialLetter(name);
+            const textNode = <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
+                style={{ fontSize: (width * 0.65) + "px",
+                width: width + "px",
+                lineHeight: height + "px" }}
+            >
+                {initialLetter}
+            </EmojiText>;
+            const imgNode = <img className="mx_BaseAvatar_image" src={imageUrl}
+                    alt="" title={title} onError={this.onError}
+                    width={width} height={height} />;
             if (onClick != null) {
                 return (
                     <AccessibleButton element='span' className="mx_BaseAvatar"
                         onClick={onClick} {...otherProps}
                     >
-                        <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
-                                style={{ fontSize: (width * 0.65) + "px",
-                                        width: width + "px",
-                                        lineHeight: height + "px" }}>{initialLetter}</EmojiText>
-                        <img className="mx_BaseAvatar_image" src={imageUrl}
-                            alt="" title={title} onError={this.onError}
-                            width={width} height={height} />
+                        {textNode}
+                        {imgNode}
                     </AccessibleButton>
                 );
             } else {
                 return (
                     <span className="mx_BaseAvatar" {...otherProps}>
-                        <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
-                                style={{ fontSize: (width * 0.65) + "px",
-                                        width: width + "px",
-                                        lineHeight: height + "px" }}>{initialLetter}</EmojiText>
-                        <img className="mx_BaseAvatar_image" src={imageUrl}
-                            alt="" title={title} onError={this.onError}
-                            width={width} height={height} />
+                        {textNode}
+                        {imgNode}
                     </span>
                 );
             }

From e7a32faf648fe6f6d0231a8159d2cdcc87cb1f13 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 2 Feb 2017 18:47:24 +0000
Subject: [PATCH 3/3] Wrap multiline JSX in parens

---
 src/components/views/avatars/BaseAvatar.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 70c0ed3eae..65730be40b 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -145,16 +145,20 @@ module.exports = React.createClass({
 
         if (imageUrl === this.state.defaultImageUrl) {
             const initialLetter = this._getInitialLetter(name);
-            const textNode = <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
-                style={{ fontSize: (width * 0.65) + "px",
-                width: width + "px",
-                lineHeight: height + "px" }}
-            >
-                {initialLetter}
-            </EmojiText>;
-            const imgNode = <img className="mx_BaseAvatar_image" src={imageUrl}
+            const textNode = (
+                <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
+                    style={{ fontSize: (width * 0.65) + "px",
+                    width: width + "px",
+                    lineHeight: height + "px" }}
+                >
+                    {initialLetter}
+                </EmojiText>
+            );
+            const imgNode = (
+                <img className="mx_BaseAvatar_image" src={imageUrl}
                     alt="" title={title} onError={this.onError}
-                    width={width} height={height} />;
+                    width={width} height={height} />
+            );
             if (onClick != null) {
                 return (
                     <AccessibleButton element='span' className="mx_BaseAvatar"