mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Merge branch 'vector' of github.com:matrix-org/matrix-react-sdk into erikj/room_editing

Browse source
This commit is contained in:
Erik Johnston 2015-07-20 16:03:35 +01:00
commit 04f17c963c
7 changed files with 210 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
skins/base/views/atoms/EditableText.js
View file

@ -44,7 +44,7 @@ module.exports = React.createClass({
onFinish: function(ev) {
if (ev.target.value) {
this.setValue(ev.target.value);
this.setValue(ev.target.value, ev.key === "Enter");
} else {
this.cancelEdit();
}

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

@ -19,11 +19,33 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
//var MemberInfoController = require("../../../../src/controllers/molecules/MemberInfo");
var MemberInfoController = require("../../../../src/controllers/molecules/MemberInfo");
module.exports = React.createClass({
displayName: 'MemberInfo',
//mixins: [MemberInfoController],
mixins: [MemberInfoController],
getDuration: function(time) {
if (!time) return;
var t = parseInt(time / 1000);
var s = t % 60;
var m = parseInt(t / 60) % 60;
var h = parseInt(t / (60 * 60)) % 24;
var d = parseInt(t / (60 * 60 * 24));
if (t < 60) {
if (t < 0) {
return "0s";
}
return s + "s";
}
if (t < 60 * 60) {
return m + "m";
}
if (t < 24 * 60 * 60) {
return h + "h";
}
return d + "d ";
},
render: function() {
var power;
@ -31,6 +53,10 @@ module.exports = React.createClass({
var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
power = <img src={ img } className="mx_MemberTile_power" width="48" height="48" alt=""/>;
}
var activeAgo = "unknown";
if (this.state.active >= 0) {
activeAgo = this.getDuration(this.state.active);
}
return (
<div className="mx_MemberInfo">
@ -41,9 +67,9 @@ module.exports = React.createClass({
width="128" height="128" alt=""/>
</div>
<div className="mx_MemberInfo_field">{this.props.member.userId}</div>
<div className="mx_MemberInfo_field">Presence: {this.props.member.presence}</div>
<div className="mx_MemberInfo_field">Last active: {this.props.member.last_active_ago}</div>
<div className="mx_MemberInfo_button">Start chat</div>
<div className="mx_MemberInfo_field">Presence: {this.state.presence}</div>
<div className="mx_MemberInfo_field">Last active: {activeAgo}</div>
<div className="mx_MemberInfo_button" onClick={this.onChatClick}>Start chat</div>
</div>
);
}

31
skins/base/views/organisms/MemberList.js
View file

@ -23,6 +23,7 @@ var MemberListController = require("../../../../src/controllers/organisms/Member
var ComponentBroker = require('../../../../src/ComponentBroker');
var MemberTile = ComponentBroker.get("molecules/MemberTile");
var EditableText = ComponentBroker.get("atoms/EditableText");
module.exports = React.createClass({
@ -39,6 +40,31 @@ module.exports = React.createClass({
});
},
onPopulateInvite: function(inputText, shouldSubmit) {
// reset back to placeholder
this.refs.invite.setValue("Invite", false, true);
if (!shouldSubmit) {
return; // enter key wasn't pressed
}
this.onInvite(inputText);
},
inviteTile: function() {
if (this.state.inviting) {
return (
<div></div>
);
}
return (
<div className="mx_MemberTile">
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
<div className="mx_MemberTile_name">
<EditableText ref="invite" placeHolder="Invite" onValueChanged={this.onPopulateInvite}/>
</div>
</div>
);
},
render: function() {
return (
<div className="mx_MemberList">
@ -49,10 +75,7 @@ module.exports = React.createClass({
<h2>Members</h2>
<div className="mx_MemberList_wrapper">
{this.makeMemberTiles()}
<div className="mx_MemberTile">
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
<div className="mx_MemberTile_name">Invite</div>
</div>
{this.inviteTile()}
</div>
</div>
</div>