diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index 099542a87..fcfc60a00 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -33,7 +33,7 @@ limitations under the License. .mx_MemberTile_avatarImg { z-index: 20; - border-radius: 20px; + border-radius: 20px; background-color: #dbdbdb; } @@ -96,4 +96,9 @@ limitations under the License. .mx_MemberTile_offline .mx_MemberTile_nameSpan { opacity: 0.5; -} \ No newline at end of file +} + + +.mx_MemberTile_leave { + float: right; +} diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 9583c3c4d..3e5887446 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -20,8 +20,10 @@ var React = require('react'); var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); var ComponentBroker = require('../../../../src/ComponentBroker'); +var Modal = require("../../../../src/Modal"); var MemberTileController = require("../../../../src/controllers/molecules/MemberTile"); var MemberInfo = ComponentBroker.get('molecules/MemberInfo'); +var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog"); module.exports = React.createClass({ displayName: 'MemberTile', @@ -40,7 +42,23 @@ module.exports = React.createClass({ this.setState({ 'hover': false }); }, + onLeaveClick: function() { + var d = MatrixClientPeg.get().leave(this.props.member.roomId); + // TODO: Add spinner + + d.then(function() { + // TODO: Change to another room. + }, function(err) { + Modal.createDialog(ErrorDialog, { + title: "Failed to leave room", + description: err.toString() + }); + }); + }, + render: function() { + var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId; + var power; if (this.props.member) { var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png"; @@ -58,18 +76,23 @@ module.exports = React.createClass({ } mainClassName += presenceClass; - var name; + var name = this.props.member.name; + if (isMyUser) name += " (me)"; + var leave = isMyUser ? X : null; + var nameEl; if (this.state.hover) { - name = + nameEl =
- {this.props.member.name} + {name} + {leave}
} else { - name = + nameEl =
- {this.props.member.name} + {name} + {leave}
} @@ -81,7 +104,7 @@ module.exports = React.createClass({ width="40" height="40" alt=""/> { power } - { name } + { nameEl } ); }