From 61c94d63e7d93db8c029b53ee4a9c5f0bcf76313 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 22 Sep 2015 01:16:45 +0200 Subject: [PATCH] make the new userlist UI actually work --- skins/base/css/common.css | 7 ++-- skins/base/views/molecules/MemberInfo.js | 11 +++++-- skins/base/views/molecules/MemberTile.js | 11 +++++-- src/controllers/molecules/MemberInfo.js | 42 ++++++++++++++++++++++++ src/controllers/molecules/MemberTile.js | 29 ++++++++++++++++ 5 files changed, 92 insertions(+), 8 deletions(-) diff --git a/skins/base/css/common.css b/skins/base/css/common.css index 9527b253d..d6c5e091e 100644 --- a/skins/base/css/common.css +++ b/skins/base/css/common.css @@ -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; } diff --git a/skins/base/views/molecules/MemberInfo.js b/skins/base/views/molecules/MemberInfo.js index 512ed9f42..b57a5b6fc 100644 --- a/skins/base/views/molecules/MemberInfo.js +++ b/skins/base/views/molecules/MemberInfo.js @@ -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 =
Leave room
; + } + else { + interactButton =
Start chat
; + } + if (this.state.can.kick) { kickButton =
Kick @@ -54,7 +61,7 @@ module.exports = React.createClass({ return (
-
Start chat
+ {interactButton} {muteButton} {kickButton} {banButton} diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 2cfceb4dc..1414b562d 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -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; diff --git a/src/controllers/molecules/MemberInfo.js b/src/controllers/molecules/MemberInfo.js index 5c63d970c..2e7c3f710 100644 --- a/src/controllers/molecules/MemberInfo.js +++ b/src/controllers/molecules/MemberInfo.js @@ -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() { diff --git a/src/controllers/molecules/MemberTile.js b/src/controllers/molecules/MemberTile.js index 38bf43d62..43db7d1db 100644 --- a/src/controllers/molecules/MemberTile.js +++ b/src/controllers/molecules/MemberTile.js @@ -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() + }); + }); + } + } + }); + } };