diff options
| -rw-r--r-- | web/react/components/confirm_modal.jsx | 10 | ||||
| -rw-r--r-- | web/react/components/member_list_team.jsx | 21 | ||||
| -rw-r--r-- | web/react/components/team_members_dropdown.jsx (renamed from web/react/components/member_list_team_item.jsx) | 124 | ||||
| -rw-r--r-- | web/react/components/team_members_modal.jsx | 13 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 5 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 5 |
6 files changed, 80 insertions, 98 deletions
diff --git a/web/react/components/confirm_modal.jsx b/web/react/components/confirm_modal.jsx index 987649f38..bb3576684 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} </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, - 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 f1c31131f..0787bf8d8 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 ( - <MemberListTeamItem - key={user.id} - user={user} - /> - ); - }); - return ( - <table className='table more-table member-list-holder'> - <tbody> - {memberList} - </tbody> - </table> + <FilteredUserList + users={this.state.users} + actions={[TeamMembersDropdown]} + /> ); } } diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/team_members_dropdown.jsx index 23bc10781..35ec66519 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 = ( + <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)} - message={[formatMessage(holders.confirmDemoteDescription), React.createElement('br'), React.createElement('br'), formatMessage(holders.confirmDemotionCmd), serverError]} - confirm_button={formatMessage(holders.confirmDemotion)} + title={title} + message={message} + confirmButton={confirmButton} onConfirm={this.handleDemoteSubmit} onCancel={this.handleDemoteCancel} /> @@ -292,48 +299,33 @@ 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='#' - className='dropdown-toggle theme' - type='button' - data-toggle='dropdown' - aria-expanded='true' - > - <span className='fa fa-pencil'></span> - <span>{currentRoles} </span> - </a> - <ul - className='dropdown-menu member-menu' - role='menu' - > - {makeAdmin} - {makeMember} - {makeActive} - {makeNotActive} - </ul> - </div> - {makeDemoteModal} - {serverError} - </td> - </tr> + <div className='dropdown member-drop'> + <a + href='#' + className='dropdown-toggle theme' + type='button' + data-toggle='dropdown' + aria-expanded='true' + > + <span className='fa fa-pencil'></span> + <span>{currentRoles} </span> + </a> + <ul + className='dropdown-menu member-menu' + role='menu' + > + {makeAdmin} + {makeMember} + {makeActive} + {makeNotActive} + </ul> + {makeDemoteModal} + {serverError} + </div> ); } } -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 8ac435742..dfd48b614 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 ( <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'> - <div className='team-member-list'> - <MemberListTeam/> - </div> + <Modal.Body> + <MemberListTeam/> </Modal.Body> <Modal.Footer> <button diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index adf916775..d8979c607 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/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; + } } } } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 8508ce6fc..99b564fe5 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/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 { |