From fe217988724c5c74fc02c34180eab504a4d906c1 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Sat, 27 Feb 2016 11:04:24 -0500 Subject: [PATCH] Changed TeamMembersModal to use UserList --- web/react/components/confirm_modal.jsx | 10 +- web/react/components/member_list_team.jsx | 21 +-- ...eam_item.jsx => team_members_dropdown.jsx} | 124 ++++++++---------- web/react/components/team_members_modal.jsx | 13 +- web/sass-files/sass/partials/_modal.scss | 5 + web/sass-files/sass/partials/_settings.scss | 5 - 6 files changed, 80 insertions(+), 98 deletions(-) rename web/react/components/{member_list_team_item.jsx => team_members_dropdown.jsx} (73%) diff --git a/web/react/components/confirm_modal.jsx b/web/react/components/confirm_modal.jsx index 987649f387..bb35766842 100644 --- a/web/react/components/confirm_modal.jsx +++ b/web/react/components/confirm_modal.jsx @@ -44,7 +44,7 @@ export default class ConfirmModal extends React.Component { className='btn btn-primary' onClick={this.props.onConfirm} > - {this.props.confirm_button} + {this.props.confirmButton} @@ -55,13 +55,13 @@ export default class ConfirmModal extends React.Component { ConfirmModal.defaultProps = { title: '', message: '', - confirm_button: '' + confirmButton: '' }; ConfirmModal.propTypes = { show: React.PropTypes.bool.isRequired, - title: React.PropTypes.string, - message: React.PropTypes.string, - confirm_button: React.PropTypes.string, + title: React.PropTypes.node, + message: React.PropTypes.node, + confirmButton: React.PropTypes.node, onConfirm: React.PropTypes.func.isRequired, onCancel: React.PropTypes.func.isRequired }; diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx index f1c31131f5..0787bf8d80 100644 --- a/web/react/components/member_list_team.jsx +++ b/web/react/components/member_list_team.jsx @@ -1,7 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import MemberListTeamItem from './member_list_team_item.jsx'; +import FilteredUserList from './filtered_user_list.jsx'; +import TeamMembersDropdown from './team_members_dropdown.jsx'; import UserStore from '../stores/user_store.jsx'; export default class MemberListTeam extends React.Component { @@ -44,21 +45,11 @@ export default class MemberListTeam extends React.Component { } render() { - const memberList = this.state.users.map((user) => { - return ( - - ); - }); - return ( - - - {memberList} - -
+ ); } } diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/team_members_dropdown.jsx similarity index 73% rename from web/react/components/member_list_team_item.jsx rename to web/react/components/team_members_dropdown.jsx index 23bc107811..35ec665198 100644 --- a/web/react/components/member_list_team_item.jsx +++ b/web/react/components/team_members_dropdown.jsx @@ -9,28 +9,9 @@ import * as Utils from '../utils/utils.jsx'; import ConfirmModal from './confirm_modal.jsx'; import TeamStore from '../stores/team_store.jsx'; -import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; +import {FormattedMessage} from 'mm-intl'; -var holders = defineMessages({ - confirmDemoteRoleTitle: { - id: 'member_team_item.confirmDemoteRoleTitle', - defaultMessage: 'Confirm demotion from System Admin role' - }, - confirmDemotion: { - id: 'member_team_item.confirmDemotion', - defaultMessage: 'Confirm Demotion' - }, - confirmDemoteDescription: { - id: 'member_team_item.confirmDemoteDescription', - defaultMessage: 'If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you\'ll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command.' - }, - confirmDemotionCmd: { - id: 'member_team_item.confirmDemotionCmd', - defaultMessage: 'platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"' - } -}); - -export default class MemberListTeamItem extends React.Component { +export default class TeamMembersDropdown extends React.Component { constructor(props) { super(props); @@ -163,7 +144,6 @@ export default class MemberListTeamItem extends React.Component { defaultMessage='Member' /> ); - const timestamp = UserStore.getCurrentUser().update_at; if (user.roles.length > 0) { if (Utils.isSystemAdmin(user.roles)) { @@ -185,7 +165,6 @@ export default class MemberListTeamItem extends React.Component { } } - const email = user.email; let showMakeMember = user.roles === 'admin' || user.roles === 'system_admin'; let showMakeAdmin = user.roles === '' || user.roles === 'system_admin'; let showMakeActive = false; @@ -276,15 +255,43 @@ export default class MemberListTeamItem extends React.Component { ); } const me = UserStore.getCurrentUser(); - const {formatMessage} = this.props.intl; let makeDemoteModal = null; if (this.props.user.id === me.id) { + const title = ( + + ); + const message = ( +
+ +
+
+ + {serverError} +
+ ); + + const confirmButton = ( + + ); + makeDemoteModal = ( @@ -292,48 +299,33 @@ export default class MemberListTeamItem extends React.Component { } return ( - - - - {Utils.displayUsername(user.id)} - {email} -
- - - {currentRoles} - -
    - {makeAdmin} - {makeMember} - {makeActive} - {makeNotActive} -
-
- {makeDemoteModal} - {serverError} - - +
+ + + {currentRoles} + +
    + {makeAdmin} + {makeMember} + {makeActive} + {makeNotActive} +
+ {makeDemoteModal} + {serverError} +
); } } -MemberListTeamItem.propTypes = { - intl: intlShape.isRequired, +TeamMembersDropdown.propTypes = { user: React.PropTypes.object.isRequired }; - -export default injectIntl(MemberListTeamItem); diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx index 8ac4357427..dfd48b6141 100644 --- a/web/react/components/team_members_modal.jsx +++ b/web/react/components/team_members_modal.jsx @@ -28,12 +28,13 @@ export default class TeamMembersModal extends React.Component { } onShow() { - if ($(window).width() > 768) { + // TODO ugh + /*if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); } else { $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); - } + }*/ } render() { @@ -41,7 +42,7 @@ export default class TeamMembersModal extends React.Component { return ( @@ -54,10 +55,8 @@ export default class TeamMembersModal extends React.Component { }} /> - -
- -
+ +