Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-09-22 00:55:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add leave button as per wireframes

Browse Source
This commit is contained in:
Erik Johnston 2015-07-22 10:59:36 +01:00
parent e1aca588b5
commit 5fb6ea94b2
2 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
skins/base/css/molecules/MemberTile.css
View File

@ -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;
}
}
.mx_MemberTile_leave {
float: right;
}

35
skins/base/views/molecules/MemberTile.js
View File

@ -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>
);
}