make FilePanel work, superficially at least

This commit is contained in:
Matthew Hodgson 2016-09-06 01:45:12 +01:00
parent 24351537d2
commit 1f19ee88c6
3 changed files with 56 additions and 10 deletions

View file

@ -62,7 +62,7 @@ module.exports = React.createClass({
},
onMemberListButtonClick: function() {
if (this.props.collapsed) {
if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
this.setState({ phase: this.Phase.MemberList });
dis.dispatch({
action: 'show_right_panel',
@ -75,6 +75,20 @@ module.exports = React.createClass({
}
},
onFileListButtonClick: function() {
if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
this.setState({ phase: this.Phase.FilePanel });
dis.dispatch({
action: 'show_right_panel',
});
}
else {
dis.dispatch({
action: 'hide_right_panel',
});
}
},
onRoomStateMember: function(ev, state, member) {
// redraw the badge on the membership list
if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@ -120,6 +134,7 @@ module.exports = React.createClass({
render: function() {
var MemberList = sdk.getComponent('rooms.MemberList');
var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
var FilePanel = sdk.getComponent('structures.FilePanel');
var TintableSvg = sdk.getComponent("elements.TintableSvg");
var buttonGroup;
var panel;
@ -144,7 +159,7 @@ module.exports = React.createClass({
var cli = MatrixClientPeg.get();
var room = cli.getRoom(this.props.roomId);
if (room) {
membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
membersBadge = room.getJoinedMembers().length;
}
}
@ -152,15 +167,17 @@ module.exports = React.createClass({
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
{ membersBadge }
<div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
<TintableSvg src="img/icons-people.svg" width="25" height="25"/>
{ membersHighlight }
</div>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
<TintableSvg src="img/files.svg" width="17" height="22"/>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
<div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
<TintableSvg src="img/icons-files.svg" width="25" height="25"/>
{ filesHighlight }
</div>
<div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications">
<div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
<TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
{ notificationsHighlight }
</div>
@ -179,7 +196,7 @@ module.exports = React.createClass({
panel = <NotificationPanel />
}
else if (this.state.phase == this.Phase.FilePanel) {
panel = <FilesPanel roomId={this.props.roomId} />
panel = <FilePanel roomId={this.props.roomId} />
}
}