WIP group member list/tiles
This commit is contained in:
parent
fe19dbee02
commit
234a88c098
5 changed files with 198 additions and 17 deletions
|
@ -18,6 +18,7 @@ import React from 'react';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
import { GroupMemberType } from '../../../groups';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* A dialog for confirming an operation on another user.
|
* A dialog for confirming an operation on another user.
|
||||||
|
@ -30,7 +31,10 @@ import classnames from 'classnames';
|
||||||
export default React.createClass({
|
export default React.createClass({
|
||||||
displayName: 'ConfirmUserActionDialog',
|
displayName: 'ConfirmUserActionDialog',
|
||||||
propTypes: {
|
propTypes: {
|
||||||
member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
|
// matrix-js-sdk (room) member object. Supply either this or 'groupMember'
|
||||||
|
member: React.PropTypes.object,
|
||||||
|
// group member object. Supply either this or 'member'
|
||||||
|
groupMember: GroupMemberType,
|
||||||
action: React.PropTypes.string.isRequired, // eg. 'Ban'
|
action: React.PropTypes.string.isRequired, // eg. 'Ban'
|
||||||
|
|
||||||
// Whether to display a text field for a reason
|
// Whether to display a text field for a reason
|
||||||
|
@ -69,6 +73,7 @@ export default React.createClass({
|
||||||
render: function() {
|
render: function() {
|
||||||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
||||||
const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
|
const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
|
||||||
|
const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
|
||||||
|
|
||||||
const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
|
const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
|
||||||
const confirmButtonClass = classnames({
|
const confirmButtonClass = classnames({
|
||||||
|
@ -91,6 +96,20 @@ export default React.createClass({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let avatar;
|
||||||
|
let name;
|
||||||
|
let userId;
|
||||||
|
if (this.props.member) {
|
||||||
|
avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
|
||||||
|
name = this.props.member.name;
|
||||||
|
userId = this.props.member.userId;
|
||||||
|
} else {
|
||||||
|
// we don't get this info from the API yet
|
||||||
|
avatar = <BaseAvatar name={this.props.groupMember.userId} width={36} height={36} />
|
||||||
|
name = this.props.groupMember.userId;
|
||||||
|
userId = this.props.groupMember.userId;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
|
<BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
|
||||||
onEnterPressed={ this.onOk }
|
onEnterPressed={ this.onOk }
|
||||||
|
@ -98,10 +117,10 @@ export default React.createClass({
|
||||||
>
|
>
|
||||||
<div className="mx_Dialog_content">
|
<div className="mx_Dialog_content">
|
||||||
<div className="mx_ConfirmUserActionDialog_avatar">
|
<div className="mx_ConfirmUserActionDialog_avatar">
|
||||||
<MemberAvatar member={this.props.member} width={48} height={48} />
|
{avatar}
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_ConfirmUserActionDialog_name">{this.props.member.name}</div>
|
<div className="mx_ConfirmUserActionDialog_name">{name}</div>
|
||||||
<div className="mx_ConfirmUserActionDialog_userId">{this.props.member.userId}</div>
|
<div className="mx_ConfirmUserActionDialog_userId">{userId}</div>
|
||||||
</div>
|
</div>
|
||||||
{reasonBox}
|
{reasonBox}
|
||||||
<div className="mx_Dialog_buttons">
|
<div className="mx_Dialog_buttons">
|
||||||
|
|
158
src/components/views/groups/GroupMemberInfo.js
Normal file
158
src/components/views/groups/GroupMemberInfo.js
Normal file
|
@ -0,0 +1,158 @@
|
||||||
|
/*
|
||||||
|
Copyright 2017 Vector Creations 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import dis from '../../../dispatcher';
|
||||||
|
import Modal from '../../../Modal';
|
||||||
|
import sdk from '../../../index';
|
||||||
|
import { _t } from '../../../languageHandler';
|
||||||
|
import createRoom from '../../../createRoom';
|
||||||
|
import DMRoomMap from '../../../utils/DMRoomMap';
|
||||||
|
import Unread from '../../../Unread';
|
||||||
|
import { GroupMemberType } from '../../../groups';
|
||||||
|
import { findReadReceiptFromUserId } from '../../../utils/Receipt';
|
||||||
|
import withMatrixClient from '../../../wrappers/withMatrixClient';
|
||||||
|
import AccessibleButton from '../elements/AccessibleButton';
|
||||||
|
import GeminiScrollbar from 'react-gemini-scrollbar';
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = withMatrixClient(React.createClass({
|
||||||
|
displayName: 'GroupMemberInfo',
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
matrixClient: PropTypes.object.isRequired,
|
||||||
|
groupId: PropTypes.string,
|
||||||
|
member: GroupMemberType,
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillMount: function() {
|
||||||
|
this._fetchMembers();
|
||||||
|
},
|
||||||
|
|
||||||
|
_fetchMembers: function() {
|
||||||
|
this.setState({fetching: true});
|
||||||
|
this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
|
||||||
|
this.setState({
|
||||||
|
members: result.chunk,
|
||||||
|
fetching: false,
|
||||||
|
});
|
||||||
|
}).catch((e) => {
|
||||||
|
this.setState({fetching: false});
|
||||||
|
console.error("Failed to get group member list: " + e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
_onKick: function() {
|
||||||
|
const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
|
||||||
|
Modal.createDialog(ConfirmUserActionDialog, {
|
||||||
|
groupMember: this.props.member,
|
||||||
|
action: _t('Remove from group'),
|
||||||
|
danger: true,
|
||||||
|
onFinished: (proceed) => {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onCancel: function(e) {
|
||||||
|
dis.dispatch({
|
||||||
|
action: "view_user",
|
||||||
|
member: null
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onRoomTileClick(roomId) {
|
||||||
|
dis.dispatch({
|
||||||
|
action: 'view_room',
|
||||||
|
room_id: roomId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
if (this.state.fetching) {
|
||||||
|
const Loader = sdk.getComponent("elements.Spinner");
|
||||||
|
return <Loader />;
|
||||||
|
}
|
||||||
|
if (!this.state.members) return null;
|
||||||
|
|
||||||
|
let targetIsInGroup = false;
|
||||||
|
for (const m of this.state.members) {
|
||||||
|
if (m.user_id == this.props.member.userId) {
|
||||||
|
targetIsInGroup = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let kickButton, adminButton;
|
||||||
|
|
||||||
|
if (targetIsInGroup) {
|
||||||
|
kickButton = (
|
||||||
|
<AccessibleButton className="mx_MemberInfo_field"
|
||||||
|
onClick={this._onKick}>
|
||||||
|
{_t('Remove from group')}
|
||||||
|
</AccessibleButton>
|
||||||
|
);
|
||||||
|
|
||||||
|
// No make/revoke admin API yet
|
||||||
|
/*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
|
||||||
|
giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
|
||||||
|
{giveOpLabel}
|
||||||
|
</AccessibleButton>;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
let adminTools;
|
||||||
|
if (kickButton || adminButton) {
|
||||||
|
adminTools =
|
||||||
|
<div>
|
||||||
|
<h3>{_t("Admin tools")}</h3>
|
||||||
|
|
||||||
|
<div className="mx_MemberInfo_buttons">
|
||||||
|
{kickButton}
|
||||||
|
{adminButton}
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
||||||
|
const avatar = (
|
||||||
|
<BaseAvatar name={this.props.member.userId} width={36} height={36} />
|
||||||
|
);
|
||||||
|
|
||||||
|
const memberName = this.props.member.userId;
|
||||||
|
|
||||||
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||||
|
return (
|
||||||
|
<div className="mx_MemberInfo">
|
||||||
|
<GeminiScrollbar autoshow={true}>
|
||||||
|
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
|
||||||
|
<div className="mx_MemberInfo_avatar">
|
||||||
|
{avatar}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<EmojiText element="h2">{memberName}</EmojiText>
|
||||||
|
|
||||||
|
<div className="mx_MemberInfo_profile">
|
||||||
|
<div className="mx_MemberInfo_profileField">
|
||||||
|
{ this.props.member.userId }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{ adminTools }
|
||||||
|
</GeminiScrollbar>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}));
|
|
@ -17,6 +17,7 @@ import React from 'react';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
import Promise from 'bluebird';
|
import Promise from 'bluebird';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
|
import { groupMemberFromApiObject } from '../../../groups';
|
||||||
import GeminiScrollbar from 'react-gemini-scrollbar';
|
import GeminiScrollbar from 'react-gemini-scrollbar';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import withMatrixClient from '../../../wrappers/withMatrixClient';
|
import withMatrixClient from '../../../wrappers/withMatrixClient';
|
||||||
|
@ -47,7 +48,9 @@ export default withMatrixClient(React.createClass({
|
||||||
this.setState({fetching: true});
|
this.setState({fetching: true});
|
||||||
this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
|
this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
members: result.chunk,
|
members: result.chunk.map((apiMember) => {
|
||||||
|
return groupMemberFromApiObject(apiMember);
|
||||||
|
}),
|
||||||
fetching: false,
|
fetching: false,
|
||||||
});
|
});
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
|
@ -86,7 +89,7 @@ export default withMatrixClient(React.createClass({
|
||||||
const memberList = this.state.members.filter((m) => {
|
const memberList = this.state.members.filter((m) => {
|
||||||
if (query) {
|
if (query) {
|
||||||
//const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
|
//const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
|
||||||
const matchesId = m.user_id.toLowerCase().indexOf(query) !== -1;
|
const matchesId = m.userId.toLowerCase().indexOf(query) !== -1;
|
||||||
|
|
||||||
if (/*!matchesName &&*/ !matchesId) {
|
if (/*!matchesName &&*/ !matchesId) {
|
||||||
return false;
|
return false;
|
||||||
|
@ -94,9 +97,9 @@ export default withMatrixClient(React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}).map(function(m) {
|
}).map((m) => {
|
||||||
return (
|
return (
|
||||||
<GroupMemberTile key={m.user_id} member={m} />
|
<GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import dis from '../../../dispatcher';
|
import dis from '../../../dispatcher';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
|
import { GroupMemberType } from '../../../groups';
|
||||||
import withMatrixClient from '../../../wrappers/withMatrixClient';
|
import withMatrixClient from '../../../wrappers/withMatrixClient';
|
||||||
import Matrix from "matrix-js-sdk";
|
import Matrix from "matrix-js-sdk";
|
||||||
|
|
||||||
|
@ -27,9 +28,8 @@ export default withMatrixClient(React.createClass({
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
matrixClient: PropTypes.object,
|
matrixClient: PropTypes.object,
|
||||||
member: PropTypes.shape({
|
groupId: PropTypes.string.isRequired,
|
||||||
user_id: PropTypes.string.isRequired,
|
member: GroupMemberType.isRequired,
|
||||||
}).isRequired,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
|
@ -37,10 +37,10 @@ export default withMatrixClient(React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onClick: function(e) {
|
onClick: function(e) {
|
||||||
const member = new Matrix.RoomMember(null, this.props.member.user_id);
|
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'view_user',
|
action: 'view_group_user',
|
||||||
member: member,
|
member: this.props.member,
|
||||||
|
groupId: this.props.groupId,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -52,10 +52,10 @@ export default withMatrixClient(React.createClass({
|
||||||
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
||||||
const EntityTile = sdk.getComponent('rooms.EntityTile');
|
const EntityTile = sdk.getComponent('rooms.EntityTile');
|
||||||
|
|
||||||
const name = this.props.member.user_id;
|
const name = this.props.member.userId;
|
||||||
|
|
||||||
const av = (
|
const av = (
|
||||||
<BaseAvatar name={this.props.member.user_id} width={36} height={36} />
|
<BaseAvatar name={this.props.member.userId} width={36} height={36} />
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -963,5 +963,6 @@
|
||||||
"Failed to upload image": "Failed to upload image",
|
"Failed to upload image": "Failed to upload image",
|
||||||
"Failed to update group": "Failed to update group",
|
"Failed to update group": "Failed to update group",
|
||||||
"Description": "Description",
|
"Description": "Description",
|
||||||
"Filter group members": "Filter group members"
|
"Filter group members": "Filter group members",
|
||||||
|
"Remove from group": "Remove from group"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue