From 5392afdec49c5de140bdde3f711cd8745a8331c5 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 23 Oct 2015 17:36:02 +0100
Subject: [PATCH] Add UI for changing room avatars and update UI when room
 avatars change

---
 src/controllers/organisms/RoomList.js            | 7 +++++++
 src/skins/vector/views/atoms/RoomAvatar.js       | 4 ++--
 src/skins/vector/views/molecules/ChangeAvatar.js | 6 +++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js
index c715faad..03a1bfcd 100644
--- a/src/controllers/organisms/RoomList.js
+++ b/src/controllers/organisms/RoomList.js
@@ -33,6 +33,7 @@ module.exports = {
         cli.on("Room", this.onRoom);
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
+        cli.on("RoomState.events", this.onRoomStateEvents);
 
         var rooms = this.getRoomList();
         this.setState({
@@ -66,6 +67,7 @@ module.exports = {
             MatrixClientPeg.get().removeListener("Room", this.onRoom);
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
     },
 
@@ -110,6 +112,11 @@ module.exports = {
         this.refreshRoomList();
     },
 
+    onRoomStateEvents: function(ev, state) {
+        setTimeout(this.refreshRoomList, 0);
+    },
+
+
     refreshRoomList: function() {
         var rooms = this.getRoomList();
         this.setState({
diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/src/skins/vector/views/atoms/RoomAvatar.js
index 3d3463e2..e57b3b7a 100644
--- a/src/skins/vector/views/atoms/RoomAvatar.js
+++ b/src/skins/vector/views/atoms/RoomAvatar.js
@@ -44,8 +44,8 @@ module.exports = React.createClass({
 
     render: function() {
         var style = {
-            'max-width': this.props.width,
-            'max-height': this.props.height,
+            maxWidth: this.props.width,
+            maxHeight: this.props.height,
         };
         return (
             <img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
diff --git a/src/skins/vector/views/molecules/ChangeAvatar.js b/src/skins/vector/views/molecules/ChangeAvatar.js
index ec10e4bf..42c2d1fd 100644
--- a/src/skins/vector/views/molecules/ChangeAvatar.js
+++ b/src/skins/vector/views/molecules/ChangeAvatar.js
@@ -47,7 +47,11 @@ module.exports = React.createClass({
         if (this.props.room && !this.avatarSet) {
             avatarImg = <RoomAvatar room={this.props.room} width='320' height='240' resizeMethod='scale' />;
         } else {
-            avatarImg = <img src={this.state.avatarUrl}/>;
+            var style = {
+                maxWidth: 320,
+                maxHeight: 240,
+            };
+            avatarImg = <img src={this.state.avatarUrl} style={style} />;
         }
 
         switch (this.state.phase) {