Merge pull request #1 from vector-im/leave_room_button

Leave room button

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',
@@ -41,6 +43,8 @@ module.exports = React.createClass({
     },
 
     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 +62,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 +90,7 @@ module.exports = React.createClass({
                          width="40" height="40" alt=""/>
                          { power }
                 </div>
-                { name }
+                { nameEl }
             </div>
         );
     }

src/Modal.js

@@ -56,5 +56,7 @@ module.exports = {
         );
 
         React.render(dialog, this.getOrCreateContainer());
+
+        return {close: closeDialog};
     },
 };

src/controllers/molecules/MemberTile.js

@@ -17,6 +17,8 @@ limitations under the License.
 'use strict';
 
 var dis = require("../../dispatcher");
+var Modal = require("../../Modal");
+var Loader = require("react-loader");
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
 
@@ -27,4 +29,21 @@ module.exports = {
             user_id: this.props.member.userId
         });
     },
+
+    onLeaveClick: function() {
+        var d = MatrixClientPeg.get().leave(this.props.member.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()
+            });
+        });
+    }
 };

src/controllers/organisms/RoomList.js

@@ -96,7 +96,12 @@ module.exports = {
     },
 
     getRoomList: function() {
-        return RoomListSorter.mostRecentActivityFirst(MatrixClientPeg.get().getRooms());
+        return RoomListSorter.mostRecentActivityFirst(
+            MatrixClientPeg.get().getRooms().filter(function(room) {
+                var member = room.getMember(MatrixClientPeg.get().credentials.userId);
+                return member && (member.membership == "join" || member.membership == "invite");
+            })
+        );
     },
 
     makeRoomTiles: function() {
@@ -115,4 +120,3 @@ module.exports = {
         });
     },
 };
-

src/controllers/pages/MatrixChat.js

@@ -153,6 +153,7 @@ module.exports = {
                 this.setState({
                     currentRoom: allRooms[roomIndex].roomId
                 });
+                this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
                 break;
             case 'view_user_settings':
                 this.setState({