invites section

src/controllers/organisms/RoomList.js

@@ -35,11 +35,9 @@ module.exports = {
         cli.on("Room.name", this.onRoomName);
         cli.on("RoomState.events", this.onRoomStateEvents);
 
-        var rooms = this.getRoomList();
-        this.setState({
-            roomList: rooms,
-            activityMap: {}
-        });
+        var s = this.getRoomLists();
+        s.activityMap = {};
+        this.setState(s);
     },
 
     componentDidMount: function() {
@@ -86,9 +84,7 @@ module.exports = {
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
         if (toStartOfTimeline) return;
 
-        var newState = {
-            roomList: this.getRoomList()
-        };
+        var newState = this.getRoomLists();
         if (
             room.roomId != this.props.selectedRoom &&
             ev.getSender() != MatrixClientPeg.get().credentials.userId)
@@ -118,18 +114,23 @@ module.exports = {
 
 
     refreshRoomList: function() {
-        var rooms = this.getRoomList();
-        this.setState({
-            roomList: rooms
-        });
+        this.setState(this.getRoomLists());
     },
 
-    getRoomList: function() {
-        return RoomListSorter.mostRecentActivityFirst(
+    getRoomLists: function() {
+        var s = {};
+        var inviteList = [];
+        s.roomList = RoomListSorter.mostRecentActivityFirst(
             MatrixClientPeg.get().getRooms().filter(function(room) {
                 var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+
+                if (me && me.membership == "invite") {
+                    inviteList.push(room);
+                    return false;
+                }
+
                 var shouldShowRoom =  (
-                    me && (me.membership == "join" || me.membership == "invite")
+                    me && (me.membership == "join")
                 );
                 // hiding conf rooms only ever toggles shouldShowRoom to false
                 if (shouldShowRoom && HIDE_CONFERENCE_CHANS) {
@@ -148,6 +149,8 @@ module.exports = {
                 return shouldShowRoom;
             })
         );
+        s.inviteList = RoomListSorter.mostRecentActivityFirst(inviteList);
+        return s;
     },
 
     _recheckCallElement: function(selectedRoomId) {
@@ -169,10 +172,10 @@ module.exports = {
         }
     },
 
-    makeRoomTiles: function() {
+    makeRoomTiles: function(list, isInvite) {
         var self = this;
         var RoomTile = sdk.getComponent("molecules.RoomTile");
-        return this.state.roomList.map(function(room) {
+        return list.map(function(room) {
             var selected = room.roomId == self.props.selectedRoom;
             return (
                 <RoomTile
@@ -182,6 +185,7 @@ module.exports = {
                     selected={selected}
                     unread={self.state.activityMap[room.roomId] === 1}
                     highlight={self.state.activityMap[room.roomId] === 2}
+                    isInvite={isInvite}
                 />
             );
         });

src/skins/vector/css/molecules/RoomTile.css

@@ -48,6 +48,11 @@ limitations under the License.
     opacity: 0.8;
 }
 
+.mx_RoomTile_invite {
+    opacity: 0.5;
+    font-weight: normal;
+}
+
 .collapsed .mx_RoomTile_name {
     display: none;
 }

src/skins/vector/css/organisms/RoomList.css

@@ -18,6 +18,7 @@ limitations under the License.
     padding-top: 24px;
 }
 
+.mx_RoomList_invites,
 .mx_RoomList_recents {
     margin-top: -12px;
     display: table;
@@ -25,8 +26,11 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_RoomList_recentsLabel img {
+.mx_RoomList_expandButton {
     margin-left: 8px;
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 
 .mx_RoomList h2 {

src/skins/vector/css/organisms/ViewSource.css

@@ -18,4 +18,5 @@ limitations under the License.
     text-align: left;
     font-size: 12px;
     padding: 0.5em 1em 0.5em 1em;
+    word-wrap: break-word;
 }

src/skins/vector/views/molecules/RoomSettings.js

@@ -142,7 +142,7 @@ module.exports = React.createClass({
             </div>;
         }
 
-        var banned = this.props.room.getMembersWithMemership("ban");
+        var banned = this.props.room.getMembersWithMembership("ban");
 
         return (
             <div className="mx_RoomSettings">

src/skins/vector/views/molecules/RoomTile.js

@@ -50,7 +50,16 @@ module.exports = React.createClass({
             'mx_RoomTile_highlight': this.props.highlight,
             'mx_RoomTile_invited': this.props.room.currentState.members[myUserId].membership == 'invite'
         });
-        var name = this.props.room.name.replace(":", ":\u200b");
+
+        var name;
+        if (this.props.isInvite) {
+            name = this.props.room.getMember(MatrixClientPeg.get().credentials.userId).events.member.getSender();
+        }
+        else {
+            name = this.props.room.name;
+        }
+
+        name = name.replace(":", ":\u200b");
         var badge;
         if (this.props.highlight) {
             badge = <div className="mx_RoomTile_badge"/>;
@@ -73,7 +82,8 @@ module.exports = React.createClass({
 
         var label;
         if (!this.props.collapsed) {
-            label = <div className="mx_RoomTile_name">{name}</div>;
+            var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : '');
+            label = <div className={ className }>{name}</div>;
         }
         else if (this.state.hover) {
             var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");

src/skins/vector/views/organisms/RoomList.js

@@ -41,19 +41,35 @@ module.exports = React.createClass({
             callElement = <CallView className="mx_MatrixChat_callView"/>
         }
 
-        var recentsLabel = this.props.collapsed ? 
-                           <img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
-                           "Recent";
+        var expandButton = this.props.collapsed ? 
+                           <img className="mx_RoomList_expandButton" onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
+                           null;
+
+        var invitesLabel = this.props.collapsed ? null : "Invites";
+        var recentsLabel = this.props.collapsed ? null : "Recent";
+
+        var invites;
+        if (this.state.inviteList.length) {
+            invites = <div>
+                        <h2 className="mx_RoomList_invitesLabel">{ invitesLabel }</h2>
+                        <div className="mx_RoomList_invites">
+                            {this.makeRoomTiles(this.state.inviteList, true)}
+                        </div>
+                      </div>
+        }
 
         return (
             <div className="mx_RoomList" onScroll={this._repositionTooltip}>
-                {callElement}
+                { expandButton }
+                { callElement }
                 <h2 className="mx_RoomList_favouritesLabel">Favourites</h2>
                 <RoomDropTarget text="Drop here to favourite"/>
 
+                { invites }
+
                 <h2 className="mx_RoomList_recentsLabel">{ recentsLabel }</h2>
                 <div className="mx_RoomList_recents">
-                    {this.makeRoomTiles()}
+                    {this.makeRoomTiles(this.state.roomList, false)}
                 </div>
 
                 <h2 className="mx_RoomList_archiveLabel">Archive</h2>