From 5fb6ea94b2ac0b2e3d88012c6010bc4b9323086f Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Wed, 22 Jul 2015 10:59:36 +0100
Subject: [PATCH] Add leave button as per wireframes
---
skins/base/css/molecules/MemberTile.css | 9 ++++--
skins/base/views/molecules/MemberTile.js | 35 ++++++++++++++++++++----
2 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index 099542a8..fcfc60a0 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 9583c3c4..3e588744 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 ? <span className="mx_MemberTile_leave" onClick={this.onLeaveClick}>X</span> : null;
+ var nameEl;
if (this.state.hover) {
- name =
+ nameEl =
<div className="mx_MemberTile_nameWrapper">
<MemberInfo member={this.props.member} />
- <span className="mx_MemberTile_nameSpan">{this.props.member.name}</span>
+ <span className="mx_MemberTile_nameSpan">{name}</span>
+ {leave}
</div>
}
else {
- name =
+ nameEl =
<div className="mx_MemberTile_name">
- {this.props.member.name}
+ {name}
+ {leave}
</div>
}
@@ -81,7 +104,7 @@ module.exports = React.createClass({
width="40" height="40" alt=""/>
{ power }
</div>
- { name }
+ { nameEl }
</div>
);
}