PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats 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>

2
src/TextForEvent.js
View file

@ -2,7 +2,7 @@
function textForMemberEvent(ev) {
// XXX: SYJS-16
var senderName = ev.sender ? ev.sender.name : ev.getSender();
var targetName = ev.target ? ev.target.name : ev.getContent().state_key;
var targetName = ev.target ? ev.target.name : ev.getStateKey();
var reason = ev.getContent().reason ? (
" Reason: " + ev.getContent().reason
) : "";

13
src/controllers/atoms/EditableText.js
View file

@ -55,11 +55,16 @@ module.exports = {
return this.state.value;
},
setValue: function(val) {
setValue: function(val, shouldSubmit, suppressListener) {
var self = this;
this.setState({
value: val,
phase: this.Phases.Display,
}, this.onValueChanged);
}, function() {
if (!suppressListener) {
self.onValueChanged(shouldSubmit);
}
});
},
edit: function() {
@ -74,7 +79,7 @@ module.exports = {
});
},
onValueChanged: function() {
this.props.onValueChanged(this.state.value);
onValueChanged: function(shouldSubmit) {
this.props.onValueChanged(this.state.value, shouldSubmit);
},
};

115
src/controllers/molecules/MemberInfo.js Normal file
View file

@ -0,0 +1,115 @@
/*
Copyright 2015 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/*
* State vars:
* 'presence' : string (online|offline|unavailable etc)
* 'active' : number (ms ago; can be -1)
*/
'use strict';
var MatrixClientPeg = require("../../MatrixClientPeg");
var dis = require("../../dispatcher");
module.exports = {
componentDidMount: function() {
var self = this;
function updateUserState(event, user) {
if (!self.props.member) { return; }
if (user.userId === self.props.member.userId) {
self.setState({
presence: user.presence,
active: user.lastActiveAgo
});
}
}
MatrixClientPeg.get().on("User.presence", updateUserState);
this.userPresenceFn = updateUserState;
if (this.props.member) {
var usr = MatrixClientPeg.get().getUser(this.props.member.userId);
if (!usr) {
return;
}
this.setState({
presence: usr.presence,
active: usr.lastActiveAgo
});
}
},
componentWillUnmount: function() {
MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
},
onChatClick: function() {
// check if there are any existing rooms with just us and them (1:1)
// If so, just view that room. If not, create a private room with them.
var rooms = MatrixClientPeg.get().getRooms();
var userIds = [
this.props.member.userId,
MatrixClientPeg.get().credentials.userId
];
var existingRoomId = null;
for (var i = 0; i < rooms.length; i++) {
var members = rooms[i].getJoinedMembers();
if (members.length === 2) {
var hasTargetUsers = true;
for (var j = 0; j < members.length; j++) {
if (userIds.indexOf(members[j].userId) === -1) {
hasTargetUsers = false;
break;
}
}
if (hasTargetUsers) {
existingRoomId = rooms[i].roomId;
break;
}
}
}
if (existingRoomId) {
dis.dispatch({
action: 'view_room',
room_id: existingRoomId
});
}
else {
MatrixClientPeg.get().createRoom({
invite: [this.props.member.userId],
preset: "private_chat"
}).done(function(res) {
dis.dispatch({
action: 'view_room',
room_id: res.room_id
});
}, function(err) {
console.error(
"Failed to create room: %s", JSON.stringify(err)
);
});
}
},
getInitialState: function() {
return {
presence: "offline",
active: -1
}
}
};

26
src/controllers/organisms/MemberList.js
View file

@ -61,6 +61,32 @@ module.exports = {
});
},
onInvite: function(inputText) {
var self = this;
// sanity check the input
inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
if (inputText[0] !== '@' || inputText.indexOf(":") === -1) {
console.error("Bad user ID to invite: %s", inputText);
return;
}
self.setState({
inviting: true
});
console.log("Invite %s to %s", inputText, this.props.roomId);
MatrixClientPeg.get().invite(this.props.roomId, inputText).done(
function(res) {
console.log("Invited");
self.setState({
inviting: false
});
}, function(err) {
console.error("Failed to invite: %s", JSON.stringify(err));
self.setState({
inviting: false
});
});
},
roomMembers: function(limit) {
if (!this.props.roomId) return {};
var cli = MatrixClientPeg.get();