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

quick implementation of all new MemberInfo

Browse source
This commit is contained in:
Matthew Hodgson 2015-10-25 19:09:38 +00:00
parent 731881ee7b
commit 729babae4f
5 changed files with 72 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/skins/vector/css/molecules/MemberInfo.css
View file

@ -14,3 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberInfo {
height: 100%;
}
.mx_MemberInfo_cancel {
float: right;
}

3
src/skins/vector/css/organisms/RightPanel.css
View file

@ -78,7 +78,8 @@ limitations under the License.
padding-top: 2px;
}
.mx_RightPanel .mx_MemberList {
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;

34
src/skins/vector/views/molecules/MemberInfo.js
View file

@ -19,46 +19,66 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
var MemberInfoController = require('matrix-react-sdk/lib/controllers/molecules/MemberInfo')
// FIXME: this should probably be an organism, to match with MemberList, not a molecule
module.exports = React.createClass({
displayName: 'MemberInfo',
mixins: [MemberInfoController],
onCancel: function(e) {
dis.dispatch({
action: "view_user",
member: null
});
},
render: function() {
var interactButton, kickButton, banButton, muteButton, giveModButton;
if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
interactButton = <div className="mx_ContextualMenu_field" onClick={this.onLeaveClick}>Leave room</div>;
interactButton = <div className="mx_MemberInfo_field" onClick={this.onLeaveClick}>Leave room</div>;
}
else {
interactButton = <div className="mx_ContextualMenu_field" onClick={this.onChatClick}>Start chat</div>;
interactButton = <div className="mx_MemberInfo_field" onClick={this.onChatClick}>Start chat</div>;
}
if (this.state.can.kick) {
kickButton = <div className="mx_ContextualMenu_field" onClick={this.onKick}>
kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}>
Kick
</div>;
}
if (this.state.can.ban) {
banButton = <div className="mx_ContextualMenu_field" onClick={this.onBan}>
banButton = <div className="mx_MemberInfo_field" onClick={this.onBan}>
Ban
</div>;
}
if (this.state.can.mute) {
var muteLabel = this.state.muted ? "Unmute" : "Mute";
muteButton = <div className="mx_ContextualMenu_field" onClick={this.onMuteToggle}>
muteButton = <div className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
{muteLabel}
</div>;
}
if (this.state.can.modifyLevel) {
var giveOpLabel = this.state.isTargetMod ? "Revoke Mod" : "Make Mod";
giveModButton = <div className="mx_ContextualMenu_field" onClick={this.onModToggle}>
giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}>
{giveOpLabel}
</div>
}
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
return (
<div>
<div className="mx_MemberInfo">
<img className="mx_MemberInfo_cancel" src="img/cancel.png" width="18" height="18" onClick={this.onCancel}/>
<div className="mx_MemberInfo_avatar">
<MemberAvatar member={this.props.member} width={48} height={48} />
</div>
<h2>{ this.props.member.name }</h2>
<div className="mx_MemberInfo_profileField">
{ this.props.member.userId }
</div>
{interactButton}
{muteButton}
{kickButton}

19
src/skins/vector/views/molecules/MemberTile.js
View file

@ -20,7 +20,7 @@ var React = require('react');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk')
var ContextualMenu = require('../../../../ContextualMenu');
var dis = require('matrix-react-sdk/lib/dispatcher');
var MemberTileController = require('matrix-react-sdk/lib/controllers/molecules/MemberTile')
// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
@ -58,16 +58,9 @@ module.exports = React.createClass({
},
onClick: function(e) {
var self = this;
self.setState({ 'menu': true });
var MemberInfo = sdk.getComponent('molecules.MemberInfo');
ContextualMenu.createMenu(MemberInfo, {
member: self.props.member,
right: window.innerWidth - e.pageX,
top: e.pageY,
onFinished: function() {
self.setState({ 'menu': false });
}
dis.dispatch({
action: 'view_user',
member: this.props.member,
});
},
@ -134,7 +127,7 @@ module.exports = React.createClass({
}
}
mainClassName += presenceClass;
if (this.state.hover || this.state.menu) {
if (this.state.hover) {
mainClassName += " mx_MemberTile_hover";
}
@ -148,7 +141,7 @@ module.exports = React.createClass({
}
var nameEl;
if (this.state.hover || this.state.menu) {
if (this.state.hover) {
var presence;
// FIXME: make presence data update whenever User.presence changes...
var active = this.props.member.user ? ((Date.now() - (this.props.member.user.lastPresenceTs - this.props.member.user.lastActiveAgo)) || -1) : -1;

34
src/skins/vector/views/organisms/RightPanel.js
View file

@ -27,14 +27,17 @@ module.exports = React.createClass({
Phase : {
MemberList: 'MemberList',
FileList: 'FileList',
MemberInfo: 'MemberInfo',
},
componentWillMount: function() {
this.dispatcherRef = dis.register(this.onAction);
var cli = MatrixClientPeg.get();
cli.on("RoomState.members", this.onRoomStateMember);
},
componentWillUnmount: function() {
dis.unregister(this.dispatcherRef);
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
}
@ -67,6 +70,22 @@ module.exports = React.createClass({
}
},
onAction: function(payload) {
if (payload.action === "view_user") {
if (payload.member) {
this.setState({
phase: this.Phase.MemberInfo,
member: payload.member,
});
}
else {
this.setState({
phase: this.Phase.MemberList
});
}
}
},
render: function() {
var MemberList = sdk.getComponent('organisms.MemberList');
var buttonGroup;
@ -75,7 +94,7 @@ module.exports = React.createClass({
var filesHighlight;
var membersHighlight;
if (!this.props.collapsed) {
if (this.state.phase == this.Phase.MemberList) {
if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
}
else if (this.state.phase == this.Phase.FileList) {
@ -84,7 +103,7 @@ module.exports = React.createClass({
}
var membersBadge;
if (this.state.phase == this.Phase.MemberList && this.props.roomId) {
if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
var cli = MatrixClientPeg.get();
var room = cli.getRoom(this.props.roomId);
if (room) {
@ -106,9 +125,16 @@ module.exports = React.createClass({
</div>
</div>;
if (!this.props.collapsed && this.state.phase == this.Phase.MemberList) {
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
if (!this.props.collapsed) {
if(this.state.phase == this.Phase.MemberList) {
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
}
else if(this.state.phase == this.Phase.MemberInfo) {
var MemberInfo = sdk.getComponent('molecules.MemberInfo');
panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
}
}
}
var classes = "mx_RightPanel";