From e5c8e3e7ad32794ad244f56cbffad9d76546f4b5 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 13 Oct 2017 20:57:15 -0600
Subject: [PATCH 1/4] Add option to unset room avatar

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 src/components/views/rooms/RoomHeader.js      | 12 ++++++++--
 src/components/views/settings/ChangeAvatar.js | 22 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 42cbb90cd9..3d2dee9e64 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -129,6 +129,10 @@ module.exports = React.createClass({
         }).done();
     },
 
+    onAvatarRemoveClick: function() {
+        MatrixClientPeg.get().sendStateEvent(this.props.room.roomId, 'm.room.avatar', {url: null}, '');
+    },
+
     onShowRhsClick: function(ev) {
         dis.dispatch({ action: 'show_right_panel' });
     },
@@ -268,11 +272,15 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_avatarPicker_edit">
                         <label htmlFor="avatarInput" ref="file_label">
                             <img src="img/camera.svg"
-                                alt={_t("Upload avatar")} title={_t("Upload avatar")}
-                                width="17" height="15" />
+                                 alt={_t("Upload avatar")} title={_t("Upload avatar")}
+                                 width="17" height="15" />
                         </label>
                         <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
                     </div>
+                    <div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
+                        <img src="img/cancel.svg" width="10"
+                             alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                    </div>
                 </div>
             );
         } else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index b3204ab86e..7d8b1d9534 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -53,6 +53,10 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+    },
+
     componentWillReceiveProps: function(newProps) {
         if (this.avatarSet) {
             // don't clobber what the user has just set
@@ -63,6 +67,24 @@ module.exports = React.createClass({
         });
     },
 
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
+    onRoomStateEvents: function(ev) {
+        if (ev.getRoomId() !== this.props.room.roomId || ev.getType() !== 'm.room.avatar'
+            || ev.getSender() !== MatrixClientPeg.get().getUserId()) {
+            return;
+        }
+
+        if (!ev.getContent().url) {
+            this.avatarSet = false;
+            this.setState({}); // force update
+        }
+    },
+
     setAvatarFromFile: function(file) {
         let newUrl = null;
 

From 6e7f0d649b17cbd9150d2c37976b9253e6027a10 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 13 Oct 2017 21:13:32 -0600
Subject: [PATCH 2/4] Add option to unset your own avatar

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 src/components/structures/UserSettings.js     | 11 ++++++++++-
 src/components/views/settings/ChangeAvatar.js |  4 ++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index d83434f5a8..d24ff5ad4c 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -423,6 +423,11 @@ module.exports = React.createClass({
         });
     },
 
+    onAvatarRemoveClick: function() {
+        MatrixClientPeg.get().setAvatarUrl(null);
+        this.setState({avatarUrl: null}); // the avatar update will complete async for us
+    },
+
     onLogoutClicked: function(ev) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Logout E2E Export', '', QuestionDialog, {
@@ -1318,7 +1323,11 @@ module.exports = React.createClass({
                     </div>
 
                     <div className="mx_UserSettings_avatarPicker">
-                        <div onClick={this.onAvatarPickerClick}>
+                        <div className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
+                            <img src="img/cancel.svg" width="15"
+                                 alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                        </div>
+                        <div onClick={this.onAvatarPickerClick} className="mx_UserSettings_avatarPicker_imgContainer">
                             <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
                                 showUploadSection={false} className="mx_UserSettings_avatarPicker_img" />
                         </div>
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 7d8b1d9534..a363dc2c60 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -74,6 +74,10 @@ module.exports = React.createClass({
     },
 
     onRoomStateEvents: function(ev) {
+        if (!this.props.room) {
+            return;
+        }
+
         if (ev.getRoomId() !== this.props.room.roomId || ev.getType() !== 'm.room.avatar'
             || ev.getSender() !== MatrixClientPeg.get().getUserId()) {
             return;

From 97ebd271751b8c61778d7b040f417b416abfb9b9 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 13 Oct 2017 23:08:41 -0600
Subject: [PATCH 3/4] Add missing translation

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 src/i18n/strings/en_EN.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ed07e503ce..abb5cf40a0 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -632,6 +632,7 @@
     "quote": "quote",
     "bullet": "bullet",
     "numbullet": "numbullet",
+    "Remove avatar": "Remove avatar",
     "%(severalUsers)sjoined %(repeats)s times": "%(severalUsers)sjoined %(repeats)s times",
     "%(oneUser)sjoined %(repeats)s times": "%(oneUser)sjoined %(repeats)s times",
     "%(severalUsers)sjoined": "%(severalUsers)sjoined",

From 8d6f0db3e2737a165a29043dfd0b85da15459761 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@arasphere.net>
Date: Sat, 14 Oct 2017 22:13:00 +0100
Subject: [PATCH 4/4] be explicit in remove button height

---
 src/components/structures/UserSettings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index d24ff5ad4c..3b147104e1 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -1324,7 +1324,7 @@ module.exports = React.createClass({
 
                     <div className="mx_UserSettings_avatarPicker">
                         <div className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                            <img src="img/cancel.svg" width="15"
+                            <img src="img/cancel.svg" width="15" height="15"
                                  alt={_t("Remove avatar")} title={_t("Remove avatar")} />
                         </div>
                         <div onClick={this.onAvatarPickerClick} className="mx_UserSettings_avatarPicker_imgContainer">