Add leave button as per wireframes

skins/base/css/molecules/MemberTile.css

@@ -33,7 +33,7 @@ limitations under the License.
 
 .mx_MemberTile_avatarImg {
     z-index: 20;
-    border-radius: 20px;    
+    border-radius: 20px;
     background-color: #dbdbdb;
 }
 
@@ -96,4 +96,9 @@ limitations under the License.
 .mx_MemberTile_offline .mx_MemberTile_nameSpan
 {
     opacity: 0.5;
-}
+}
+
+
+.mx_MemberTile_leave {
+    float: right;
+}

skins/base/views/molecules/MemberTile.js

@@ -20,8 +20,10 @@ var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var ComponentBroker = require('../../../../src/ComponentBroker');
+var Modal = require("../../../../src/Modal");
 var MemberTileController = require("../../../../src/controllers/molecules/MemberTile");
 var MemberInfo = ComponentBroker.get('molecules/MemberInfo');
+var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
 
 module.exports = React.createClass({
     displayName: 'MemberTile',
@@ -40,7 +42,23 @@ module.exports = React.createClass({
         this.setState({ 'hover': false });
     },
 
+    onLeaveClick: function() {
+        var d = MatrixClientPeg.get().leave(this.props.member.roomId);
+        // TODO: Add spinner
+
+        d.then(function() {
+            // TODO: Change to another room.
+        }, function(err) {
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to leave room",
+                description: err.toString()
+            });
+        });
+    },
+
     render: function() {
+        var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId;
+
         var power;
         if (this.props.member) {
             var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
@@ -58,18 +76,23 @@ module.exports = React.createClass({
         }
         mainClassName += presenceClass;
 
-        var name;
+        var name = this.props.member.name;
+        if (isMyUser) name += " (me)";
+        var leave = isMyUser ? <span className="mx_MemberTile_leave" onClick={this.onLeaveClick}>X</span> : null;
+        var nameEl;
         if (this.state.hover) {
-            name =
+            nameEl =
                 <div className="mx_MemberTile_nameWrapper">
                     <MemberInfo member={this.props.member} />
-                    <span className="mx_MemberTile_nameSpan">{this.props.member.name}</span>
+                    <span className="mx_MemberTile_nameSpan">{name}</span>
+                    {leave}
                 </div>
         }
         else {
-            name =
+            nameEl =
                 <div className="mx_MemberTile_name">
-                    {this.props.member.name}
+                    {name}
+                    {leave}
                 </div>
         }
 
@@ -81,7 +104,7 @@ module.exports = React.createClass({
                          width="40" height="40" alt=""/>
                          { power }
                 </div>
-                { name }
+                { nameEl }
             </div>
         );
     }