invites section
This commit is contained in:
parent
b6cac2bc89
commit
e718cad053
src
controllers/organisms
skins/vector
css
views
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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");
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue