invites section

This commit is contained in:
Matthew Hodgson 2015-10-24 02:02:33 +01:00
parent b6cac2bc89
commit e718cad053
7 changed files with 66 additions and 26 deletions
src
controllers/organisms
skins/vector

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -50,7 +50,16 @@ module.exports = React.createClass({
'mx_RoomTile_highlight': this.props.highlight, 'mx_RoomTile_highlight': this.props.highlight,
'mx_RoomTile_invited': this.props.room.currentState.members[myUserId].membership == 'invite' '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; var badge;
if (this.props.highlight) { if (this.props.highlight) {
badge = <div className="mx_RoomTile_badge"/>; badge = <div className="mx_RoomTile_badge"/>;
@ -73,7 +82,8 @@ module.exports = React.createClass({
var label; var label;
if (!this.props.collapsed) { 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) { else if (this.state.hover) {
var RoomTooltip = sdk.getComponent("molecules.RoomTooltip"); var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");

View File

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