Changed TeamMembersModal to use UserList

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}
                     </button>
                 </Modal.Footer>
             </Modal>
@@ -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,
+    title: React.PropTypes.node,
-    message: React.PropTypes.string,
+    message: React.PropTypes.node,
-    confirm_button: React.PropTypes.string,
+    confirmButton: React.PropTypes.node,
     onConfirm: React.PropTypes.func.isRequired,
     onCancel: React.PropTypes.func.isRequired
 };

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 (
-                <MemberListTeamItem
+            <FilteredUserList
-                    key={user.id}
+                users={this.state.users}
-                    user={user}
+                actions={[TeamMembersDropdown]}
             />
         );
-        });
-
-        return (
-            <table className='table more-table member-list-holder'>
-                <tbody>
-                    {memberList}
-                </tbody>
-            </table>
-        );
     }
 }

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({
+export default class TeamMembersDropdown extends React.Component {
-    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 {
     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 = (
+                <FormattedMessage
+                    id='member_team_item.confirmDemoteRoleTitle'
+                    defaultMessage='Confirm demotion from System Admin role'
+                />
+            );
+            const message = (
+                <div>
+                    <FormattedMessage
+                        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."
+                    />
+                    <br/>
+                    <br/>
+                    <FormattedMessage
+                        id='member_team_item.confirmDemotionCmd'
+                        defaultMessage='platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"'
+                    />
+                    {serverError}
+                </div>
+            );
+
+            const confirmButton = (
+                <FormattedMessage
+                    id='member_team_item.confirmDemotion'
+                    defaultMessage='Confirm Demotion'
+                />
+            );
+
             makeDemoteModal = (
                 <ConfirmModal
                     show={this.state.showDemoteModal}
-                    title={formatMessage(holders.confirmDemoteRoleTitle)}
+                    title={title}
-                    message={[formatMessage(holders.confirmDemoteDescription), React.createElement('br'), React.createElement('br'), formatMessage(holders.confirmDemotionCmd), serverError]}
+                    message={message}
-                    confirm_button={formatMessage(holders.confirmDemotion)}
+                    confirmButton={confirmButton}
                     onConfirm={this.handleDemoteSubmit}
                     onCancel={this.handleDemoteCancel}
                 />
@@ -292,16 +299,6 @@ export default class MemberListTeamItem extends React.Component {
         }
 
         return (
-            <tr>
-                <td className='row member-div'>
-                    <img
-                        className='post-profile-img pull-left'
-                        src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
-                        height='36'
-                        width='36'
-                    />
-                    <span className='more-name'>{Utils.displayUsername(user.id)}</span>
-                    <span className='more-description'>{email}</span>
             <div className='dropdown member-drop'>
                 <a
                     href='#'
@@ -322,18 +319,13 @@ export default class MemberListTeamItem extends React.Component {
                     {makeActive}
                     {makeNotActive}
                 </ul>
-                    </div>
                 {makeDemoteModal}
                 {serverError}
-                </td>
+            </div>
-            </tr>
         );
     }
 }
 
-MemberListTeamItem.propTypes = {
+TeamMembersDropdown.propTypes = {
-    intl: intlShape.isRequired,
     user: React.PropTypes.object.isRequired
 };
-
-export default injectIntl(MemberListTeamItem);

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 (
             <Modal
-                dialogClassName='team-members-modal'
+                dialogClassName='more-modal'
                 show={this.props.show}
                 onHide={this.props.onHide}
             >
@@ -54,10 +55,8 @@ export default class TeamMembersModal extends React.Component {
                         }}
                     />
                 </Modal.Header>
-                <Modal.Body ref='modalBody'>
+                <Modal.Body>
-                    <div className='team-member-list'>
                     <MemberListTeam/>
-                    </div>
                 </Modal.Body>
                 <Modal.Footer>
                     <button

web/sass-files/sass/partials/_modal.scss

@@ -9,6 +9,7 @@
 }
 .more-table {
 	margin: 0;
+	table-layout: fixed;
 	p {
 		font-size: 0.9em;
 		overflow: hidden;
@@ -55,8 +56,12 @@
 				&.td--action {
 					text-align: right;
 					padding: 8px 15px 8px 8px;
+					width: 80px;
 					vertical-align: middle;
 					position: relative;
+					&.lg {
+						width: 110px;
+					}
 				}
 			}
 		}

web/sass-files/sass/partials/_settings.scss

@@ -399,10 +399,6 @@ h3 {
 }
 
 .member-role, .member-drop {
-    position:absolute;
-    right: 15px;
-    top: 8px;
-
     .fa {
         margin-right: 5px;
         @include opacity(0.5);
@@ -413,7 +409,6 @@ h3 {
         top: -50%;
         right: 110%;
     }
-
 }
 
 .member-invite {