PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

make the new userlist UI actually work

Browse source
This commit is contained in:
Matthew Hodgson 2015-09-22 01:16:45 +02:00
parent 260e22186b
commit 61c94d63e7
5 changed files with 92 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
skins/base/css/common.css
View file

@ -54,12 +54,12 @@ html {
}
.mx_ContextualMenu {
text-align: center;
border: 1px solid #a9dbf4;
border-radius: 8px;
background-color: #fff;
color: #747474;
position: fixed;
z-index: 1000;
z-index: 2001;
padding: 6px;
}
@ -71,7 +71,8 @@ html {
}
.mx_ContextualMenu_field {
padding: 6px;
padding: 3px 6px 3px 6px;
cursor: pointer;
}

11
skins/base/views/molecules/MemberInfo.js
View file

@ -28,7 +28,14 @@ module.exports = React.createClass({
mixins: [MemberInfoController],
render: function() {
var kickButton, banButton, muteButton, giveModButton;
var interactButton, kickButton, banButton, muteButton, giveModButton;
if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
interactButton = <div className="mx_ContextualMenu_field" onClick={this.onLeaveClick}>Leave room</div>;
}
else {
interactButton = <div className="mx_ContextualMenu_field" onClick={this.onChatClick}>Start chat</div>;
}
if (this.state.can.kick) {
kickButton = <div className="mx_ContextualMenu_field" onClick={this.onKick}>
Kick
@ -54,7 +61,7 @@ module.exports = React.createClass({
return (
<div>
<div className="mx_ContextualMenu_field" onClick={this.onChatClick}>Start chat</div>
{interactButton}
{muteButton}
{kickButton}
{banButton}

11
skins/base/views/molecules/MemberTile.js
View file

@ -44,10 +44,15 @@ module.exports = React.createClass({
},
onClick: function(e) {
var self = this;
self.setState({ 'menu': true });
ContextualMenu.createMenu(MemberInfo, {
member: this.props.member,
member: self.props.member,
right: window.innerWidth - e.pageX,
top: e.pageY,
onFinished: function() {
self.setState({ 'menu': false });
}
});
},
@ -109,7 +114,7 @@ module.exports = React.createClass({
}
}
mainClassName += presenceClass;
if (this.state.hover) {
if (this.state.hover || this.state.menu) {
mainClassName += " mx_MemberTile_hover";
}
@ -123,7 +128,7 @@ module.exports = React.createClass({
}
var nameEl;
if (this.state.hover) {
if (this.state.hover || this.state.menu) {
var presence;
// FIXME: make presence data update whenever User.presence changes...
var active = this.props.member.user ? (this.props.member.user.lastActiveAgo || -1) : -1;

42
src/controllers/molecules/MemberInfo.js
View file

@ -32,6 +32,8 @@ var dis = require("../../dispatcher");
var Modal = require("../../Modal");
var ComponentBroker = require('../../ComponentBroker');
var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
var QuestionDialog = ComponentBroker.get("organisms/QuestionDialog");
var Loader = require("react-loader");
module.exports = {
componentDidMount: function() {
@ -59,6 +61,7 @@ module.exports = {
description: err.message
});
});
this.props.onFinished();
},
onBan: function() {
@ -75,6 +78,7 @@ module.exports = {
description: err.message
});
});
this.props.onFinished();
},
onMuteToggle: function() {
@ -83,12 +87,14 @@ module.exports = {
var self = this;
var room = MatrixClientPeg.get().getRoom(roomId);
if (!room) {
this.props.onFinished();
return;
}
var powerLevelEvent = room.currentState.getStateEvents(
"m.room.power_levels", ""
);
if (!powerLevelEvent) {
this.props.onFinished();
return;
}
var isMuted = this.state.muted;
@ -116,6 +122,7 @@ module.exports = {
description: err.message
});
});
this.props.onFinished();
},
onModToggle: function() {
@ -123,16 +130,19 @@ module.exports = {
var target = this.props.member.userId;
var room = MatrixClientPeg.get().getRoom(roomId);
if (!room) {
this.props.onFinished();
return;
}
var powerLevelEvent = room.currentState.getStateEvents(
"m.room.power_levels", ""
);
if (!powerLevelEvent) {
this.props.onFinished();
return;
}
var me = room.getMember(MatrixClientPeg.get().credentials.userId);
if (!me) {
this.props.onFinished();
return;
}
var defaultLevel = powerLevelEvent.getContent().users_default;
@ -150,6 +160,7 @@ module.exports = {
description: err.message
});
});
this.props.onFinished();
},
onChatClick: function() {
@ -199,6 +210,37 @@ module.exports = {
);
});
}
this.props.onFinished();
},
// FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
// Not sure what the right solution to this is.
onLeaveClick: function() {
console.log("leaving room");
var roomId = this.props.member.roomId;
Modal.createDialog(QuestionDialog, {
title: "Leave room",
description: "Are you sure you want to leave the room?",
onFinished: function(should_leave) {
if (should_leave) {
var d = MatrixClientPeg.get().leave(roomId);
var modal = Modal.createDialog(Loader);
d.then(function() {
modal.close();
dis.dispatch({action: 'view_next_room'});
}, function(err) {
modal.close();
Modal.createDialog(ErrorDialog, {
title: "Failed to leave room",
description: err.toString()
});
});
}
}
});
this.props.onFinished();
},
getInitialState: function() {

29
src/controllers/molecules/MemberTile.js
View file

@ -35,6 +35,35 @@ module.exports = {
getInitialState: function() {
return {
hover: false,
menu: false,
}
},
onLeaveClick: function(ev) {
ev.stopPropagation();
ev.preventDefault();
var roomId = this.props.member.roomId;
Modal.createDialog(QuestionDialog, {
title: "Leave room",
description: "Are you sure you want to leave the room?",
onFinished: function(should_leave) {
if (should_leave) {
var d = MatrixClientPeg.get().leave(roomId);
var modal = Modal.createDialog(Loader);
d.then(function() {
modal.close();
dis.dispatch({action: 'view_next_room'});
}, function(err) {
modal.close();
Modal.createDialog(ErrorDialog, {
title: "Failed to leave room",
description: err.toString()
});
});
}
}
});
}
};