diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js index 03a1bfcd..012910c2 100644 --- a/src/controllers/organisms/RoomList.js +++ b/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 ( ); }); diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 80438e07..4190fdf9 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/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; } diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css index 89181b82..bb1761bf 100644 --- a/src/skins/vector/css/organisms/RoomList.css +++ b/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 { diff --git a/src/skins/vector/css/organisms/ViewSource.css b/src/skins/vector/css/organisms/ViewSource.css index 00f25f5c..f932c9a4 100644 --- a/src/skins/vector/css/organisms/ViewSource.css +++ b/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; } diff --git a/src/skins/vector/views/molecules/RoomSettings.js b/src/skins/vector/views/molecules/RoomSettings.js index bbba0fcc..c5e08ff9 100644 --- a/src/skins/vector/views/molecules/RoomSettings.js +++ b/src/skins/vector/views/molecules/RoomSettings.js @@ -142,7 +142,7 @@ module.exports = React.createClass({ ; } - var banned = this.props.room.getMembersWithMemership("ban"); + var banned = this.props.room.getMembersWithMembership("ban"); return (
diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js index 9b38bc57..479708ea 100644 --- a/src/skins/vector/views/molecules/RoomTile.js +++ b/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 =
; @@ -73,7 +82,8 @@ module.exports = React.createClass({ var label; if (!this.props.collapsed) { - label =
{name}
; + var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : ''); + label =
{name}
; } else if (this.state.hover) { var RoomTooltip = sdk.getComponent("molecules.RoomTooltip"); diff --git a/src/skins/vector/views/organisms/RoomList.js b/src/skins/vector/views/organisms/RoomList.js index 1532dfca..dc958a4e 100644 --- a/src/skins/vector/views/organisms/RoomList.js +++ b/src/skins/vector/views/organisms/RoomList.js @@ -41,19 +41,35 @@ module.exports = React.createClass({ callElement = } - var recentsLabel = this.props.collapsed ? - > : - "Recent"; + var expandButton = this.props.collapsed ? + > : + null; + + var invitesLabel = this.props.collapsed ? null : "Invites"; + var recentsLabel = this.props.collapsed ? null : "Recent"; + + var invites; + if (this.state.inviteList.length) { + invites =
+

{ invitesLabel }

+
+ {this.makeRoomTiles(this.state.inviteList, true)} +
+
+ } return (
- {callElement} + { expandButton } + { callElement }

Favourites

+ { invites } +

{ recentsLabel }

- {this.makeRoomTiles()} + {this.makeRoomTiles(this.state.roomList, false)}

Archive