make the new userlist UI actually work

skins/base/css/common.css

@@ -54,12 +54,12 @@ html {
 }
 
 .mx_ContextualMenu {
-    text-align: center;
     border: 1px solid #a9dbf4;
     border-radius: 8px;
     background-color: #fff;
+    color: #747474;
     position: fixed;
-    z-index: 1000;
+    z-index: 2001;
     padding: 6px;
 }
 
@@ -71,7 +71,8 @@ html {
 }
 
 .mx_ContextualMenu_field {
-    padding: 6px;
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
 }
 
 

skins/base/views/molecules/MemberInfo.js

@@ -28,7 +28,14 @@ module.exports = React.createClass({
     mixins: [MemberInfoController],
 
     render: function() {
-        var kickButton, banButton, muteButton, giveModButton;
+        var interactButton, kickButton, banButton, muteButton, giveModButton;
+        if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
+            interactButton = <div className="mx_ContextualMenu_field" onClick={this.onLeaveClick}>Leave room</div>;
+        }
+        else {
+            interactButton = <div className="mx_ContextualMenu_field" onClick={this.onChatClick}>Start chat</div>;
+        }
+
         if (this.state.can.kick) {
             kickButton = <div className="mx_ContextualMenu_field" onClick={this.onKick}>
                 Kick
@@ -54,7 +61,7 @@ module.exports = React.createClass({
 
         return (
             <div>
-                <div className="mx_ContextualMenu_field" onClick={this.onChatClick}>Start chat</div>
+                {interactButton}
                 {muteButton}
                 {kickButton}
                 {banButton}

skins/base/views/molecules/MemberTile.js

@@ -44,10 +44,15 @@ module.exports = React.createClass({
     },
 
     onClick: function(e) {
+        var self = this;
+        self.setState({ 'menu': true });
         ContextualMenu.createMenu(MemberInfo, {
-            member: this.props.member,
+            member: self.props.member,
             right: window.innerWidth - e.pageX,
             top: e.pageY,
+            onFinished: function() {
+                self.setState({ 'menu': false });
+            }
         });
     },
 
@@ -109,7 +114,7 @@ module.exports = React.createClass({
             }
         }
         mainClassName += presenceClass;
-        if (this.state.hover) {
+        if (this.state.hover || this.state.menu) {
             mainClassName += " mx_MemberTile_hover";
         }
 
@@ -123,7 +128,7 @@ module.exports = React.createClass({
         }
 
         var nameEl;
-        if (this.state.hover) {
+        if (this.state.hover || this.state.menu) {
             var presence;
             // FIXME: make presence data update whenever User.presence changes...
             var active = this.props.member.user ? (this.props.member.user.lastActiveAgo || -1) : -1;

src/controllers/molecules/MemberInfo.js

@@ -32,6 +32,8 @@ var dis = require("../../dispatcher");
 var Modal = require("../../Modal");
 var ComponentBroker = require('../../ComponentBroker');
 var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
+var QuestionDialog = ComponentBroker.get("organisms/QuestionDialog");
+var Loader = require("react-loader");
 
 module.exports = {
     componentDidMount: function() {
@@ -59,6 +61,7 @@ module.exports = {
                 description: err.message
             });
         });
+        this.props.onFinished();
     },
 
     onBan: function() {
@@ -75,6 +78,7 @@ module.exports = {
                 description: err.message
             });
         });
+        this.props.onFinished();
     },
 
     onMuteToggle: function() {
@@ -83,12 +87,14 @@ module.exports = {
         var self = this;
         var room = MatrixClientPeg.get().getRoom(roomId);
         if (!room) {
+            this.props.onFinished();
             return;
         }
         var powerLevelEvent = room.currentState.getStateEvents(
             "m.room.power_levels", ""
         );
         if (!powerLevelEvent) {
+            this.props.onFinished();
             return;
         }
         var isMuted = this.state.muted;
@@ -116,6 +122,7 @@ module.exports = {
                 description: err.message
             });
         });
+        this.props.onFinished();        
     },
 
     onModToggle: function() {
@@ -123,16 +130,19 @@ module.exports = {
         var target = this.props.member.userId;
         var room = MatrixClientPeg.get().getRoom(roomId);
         if (!room) {
+            this.props.onFinished();
             return;
         }
         var powerLevelEvent = room.currentState.getStateEvents(
             "m.room.power_levels", ""
         );
         if (!powerLevelEvent) {
+            this.props.onFinished();
             return;
         }
         var me = room.getMember(MatrixClientPeg.get().credentials.userId);
         if (!me) {
+            this.props.onFinished();
             return;
         }
         var defaultLevel = powerLevelEvent.getContent().users_default;
@@ -150,6 +160,7 @@ module.exports = {
                 description: err.message
             });
         });
+        this.props.onFinished();        
     },
 
     onChatClick: function() {
@@ -199,6 +210,37 @@ module.exports = {
                 );
             });
         }
+        this.props.onFinished();                
+    },
+
+    // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
+    // Not sure what the right solution to this is.
+    onLeaveClick: function() {
+        console.log("leaving room");
+        var roomId = this.props.member.roomId;
+        Modal.createDialog(QuestionDialog, {
+            title: "Leave room",
+            description: "Are you sure you want to leave the room?",
+            onFinished: function(should_leave) {
+                if (should_leave) {
+                    var d = MatrixClientPeg.get().leave(roomId);
+
+                    var modal = Modal.createDialog(Loader);
+
+                    d.then(function() {
+                        modal.close();
+                        dis.dispatch({action: 'view_next_room'});
+                    }, function(err) {
+                        modal.close();
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to leave room",
+                            description: err.toString()
+                        });
+                    });
+                }
+            }
+        });
+        this.props.onFinished();        
     },
 
     getInitialState: function() {

src/controllers/molecules/MemberTile.js

@@ -35,6 +35,35 @@ module.exports = {
     getInitialState: function() {
         return {
             hover: false,
+            menu: false,
         }
     },
+
+    onLeaveClick: function(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        var roomId = this.props.member.roomId;
+        Modal.createDialog(QuestionDialog, {
+            title: "Leave room",
+            description: "Are you sure you want to leave the room?",
+            onFinished: function(should_leave) {
+                if (should_leave) {
+                    var d = MatrixClientPeg.get().leave(roomId);
+
+                    var modal = Modal.createDialog(Loader);
+
+                    d.then(function() {
+                        modal.close();
+                        dis.dispatch({action: 'view_next_room'});
+                    }, function(err) {
+                        modal.close();
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to leave room",
+                            description: err.toString()
+                        });
+                    });
+                }
+            }
+        });
+    }    
 };