mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-7: Refactoring frontend (chunk 8)

Просмотр исходного кода 
- Sidebar and related components
- Small Tweak to demotion and add msg for terminal cmd
Этот коммит содержится в:
Elias Nahum
2016-01-31 22:03:30 -03:00
родитель 4a214cdaa2
Коммит a6102e27d4
23 изменённых файлов: 1307 добавлений и 224 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

65
web/react/components/about_build_modal.jsx
Просмотреть файл

@@ -3,6 +3,8 @@
var Modal = ReactBootstrap.Modal;
import {FormattedMessage} from 'mm-intl';
export default class AboutBuildModal extends React.Component {
constructor(props) {
super(props);
@@ -17,13 +19,28 @@ export default class AboutBuildModal extends React.Component {
const config = global.window.mm_config;
const license = global.window.mm_license;
let title = 'Team Edition';
let title = (
<FormattedMessage
id='about.teamEdtion'
defaultMessage='Team Edition'
/>
);
let licensee;
if (config.BuildEnterpriseReady === 'true' && license.IsLicensed === 'true') {
title = 'Enterprise Edition';
title = (
<FormattedMessage
id='about.enterpriseEdition'
defaultMessage='Enterprise Edition'
/>
);
licensee = (
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Licensed by:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='about.licensed'
defaultMessage='Licensed by:'
/>
</div>
<div className='col-sm-9'>{license.Company}</div>
</div>
);
@@ -35,25 +52,50 @@ export default class AboutBuildModal extends React.Component {
onHide={this.doHide}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'About Mattermost'}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='about.title'
defaultMessage='About Mattermost'
/>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>{`Mattermost ${title}`}</h4>
<h4>{'Mattermost'} {title}</h4>
{licensee}
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Version:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='about.version'
defaultMessage='Version:'
/>
</div>
<div className='col-sm-9'>{config.Version}</div>
</div>
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Build Number:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='about.number'
defaultMessage='Build Number:'
/>
</div>
<div className='col-sm-9'>{config.BuildNumber}</div>
</div>
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Build Date:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='about.date'
defaultMessage='Build Date:'
/>
</div>
<div className='col-sm-9'>{config.BuildDate}</div>
</div>
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Build Hash:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='about.hash'
defaultMessage='Build Hash:'
/>
</div>
<div className='col-sm-9'>{config.BuildHash}</div>
</div>
</Modal.Body>
@@ -63,7 +105,10 @@ export default class AboutBuildModal extends React.Component {
className='btn btn-default'
onClick={this.doHide}
>
{'Close'}
<FormattedMessage
id='about.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>

13
web/react/components/admin_console/user_item.jsx
Просмотреть файл

@@ -9,7 +9,7 @@ import TeamStore from '../../stores/team_store.jsx';
import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
var messages = defineMessages({
var holders = defineMessages({
confirmDemoteRoleTitle: {
id: 'admin.user_item.confirmDemoteRoleTitle',
defaultMessage: 'Confirm demotion from System Admin role'
@@ -21,6 +21,10 @@ var messages = defineMessages({
confirmDemoteDescription: {
id: 'admin.user_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: 'admin.user_item.confirmDemotionCmd',
defaultMessage: 'platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"'
}
});
@@ -332,14 +336,15 @@ export default class UserItem extends React.Component {
);
}
const me = UserStore.getCurrentUser();
const {formatMessage} = this.props.intl;
let makeDemoteModal = null;
if (this.props.user.id === me.id) {
makeDemoteModal = (
<ConfirmModal
show={this.state.showDemoteModal}
title={this.props.intl.formatMessage(messages.confirmDemoteRoleTitle)}
message={[this.props.intl.formatMessage(messages.confirmDemoteDescription), React.createElement('br'), React.createElement('br'), './platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"', serverError]}
confirm_button={this.props.intl.formatMessage(messages.confirmDemotion)}
title={formatMessage(holders.confirmDemoteRoleTitle)}
message={[formatMessage(holders.confirmDemoteDescription), React.createElement('br'), React.createElement('br'), formatMessage(holders.confirmDemotionCmd), serverError]}
confirm_button={formatMessage(holders.confirmDemotion)}
onConfirm={this.handleDemoteSubmit}
onCancel={this.handleDemoteCancel}
/>

54
web/react/components/change_url_modal.jsx
Просмотреть файл

@@ -4,6 +4,8 @@
var Modal = ReactBootstrap.Modal;
import * as Utils from '../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
export default class ChangeUrlModal extends React.Component {
constructor(props) {
super(props);
@@ -39,21 +41,58 @@ export default class ChangeUrlModal extends React.Component {
getURLError(url) {
let error = []; //eslint-disable-line prefer-const
if (url.length < 2) {
error.push(<span key='error1'>{'Must be longer than two characters'}<br/></span>);
error.push(
<span key='error1'>
<FormattedMessage
id='change_url.longer'
defaultMessage='Must be longer than two characters'
/>
<br/>
</span>
);
}
if (url.charAt(0) === '-' || url.charAt(0) === '_') {
error.push(<span key='error2'>{'Must start with a letter or number'}<br/></span>);
error.push(
<span key='error2'>
<FormattedMessage
id='change_url.startWithLetter'
defaultMessage='Must start with a letter or number'
/>
<br/>
</span>
);
}
if (url.length > 1 && (url.charAt(url.length - 1) === '-' || url.charAt(url.length - 1) === '_')) {
error.push(<span key='error3'>{'Must end with a letter or number'}<br/></span>);
error.push(
<span key='error3'>
<FormattedMessage
id='change_url.endWithLetter'
defaultMessage='Must end with a letter or number'
/>
<br/>
</span>);
}
if (url.indexOf('__') > -1) {
error.push(<span key='error4'>{'Can not contain two underscores in a row.'}<br/></span>);
error.push(
<span key='error4'>
<FormattedMessage
id='change_url.noUnderscore'
defaultMessage='Can not contain two underscores in a row.'
/>
<br/>
</span>);
}
// In case of error we don't detect
if (error.length === 0) {
error.push(<span key='errorlast'>{'Invalid URL'}<br/></span>);
error.push(
<span key='errorlast'>
<FormattedMessage
id='change_url.invalidUrl'
defaultMessage='Invalid URL'
/>
<br/>
</span>);
}
return error;
}
@@ -137,7 +176,10 @@ export default class ChangeUrlModal extends React.Component {
className='btn btn-default'
onClick={this.doCancel}
>
{'Close'}
<FormattedMessage
id='change_url.close'
defaultMessage='Close'
/>
</button>
<button
onClick={this.doSubmit}

22
web/react/components/get_link_modal.jsx
Просмотреть файл

@@ -1,6 +1,8 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class GetLinkModal extends React.Component {
@@ -59,14 +61,25 @@ export default class GetLinkModal extends React.Component {
className='btn btn-primary pull-left'
onClick={this.copyLink}
>
{'Copy Link'}
<FormattedMessage
id='get_link.copy'
defaultMessage='Copy Link'
/>
</button>
);
}
var copyLinkConfirm = null;
if (this.state.copiedLink) {
copyLinkConfirm = <p className='alert alert-success copy-link-confirm'><i className='fa fa-check'></i>{' Link copied to clipboard.'}</p>;
copyLinkConfirm = (
<p className='alert alert-success copy-link-confirm'>
<i className='fa fa-check'></i>
<FormattedMessage
id='get_link.clipboard'
defaultMessage=' Link copied to clipboard.'
/>
</p>
);
}
return (
@@ -92,7 +105,10 @@ export default class GetLinkModal extends React.Component {
className='btn btn-default'
onClick={this.onHide}
>
{'Close'}
<FormattedMessage
id='get_link.close'
defaultMessage='Close'
/>
</button>
{copyLink}
{copyLinkConfirm}

27
web/react/components/get_team_invite_link_modal.jsx
Просмотреть файл

@@ -6,7 +6,20 @@ import GetLinkModal from './get_link_modal.jsx';
import ModalStore from '../stores/modal_store.jsx';
import TeamStore from '../stores/team_store.jsx';
export default class GetTeamInviteLinkModal extends React.Component {
import {intlShape, injectIntl, defineMessages} from 'mm-intl';
const holders = defineMessages({
title: {
id: 'get_team_invite_link_modal.title',
defaultMessage: 'Team Invite Link'
},
help: {
id: 'get_team_invite_link_modal.help',
defaultMessage: 'Send teammates the link below for them to sign-up to this team site.'
}
});
class GetTeamInviteLinkModal extends React.Component {
constructor(props) {
super(props);
@@ -32,14 +45,22 @@ export default class GetTeamInviteLinkModal extends React.Component {
}
render() {
const {formatMessage} = this.props.intl;
return (
<GetLinkModal
show={this.state.show}
onHide={() => this.setState({show: false})}
title='Team Invite Link'
helpText='Send teammates the link below for them to sign-up to this team site.'
title={formatMessage(holders.title)}
helpText={formatMessage(holders.help)}
link={TeamStore.getCurrentInviteLink()}
/>
);
}
}
GetTeamInviteLinkModal.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(GetTeamInviteLinkModal);

126
web/react/components/invite_member_modal.jsx
Просмотреть файл

@@ -12,9 +12,38 @@ import ChannelStore from '../stores/channel_store.jsx';
import TeamStore from '../stores/team_store.jsx';
import ConfirmModal from './confirm_modal.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class InviteMemberModal extends React.Component {
const holders = defineMessages({
emailError: {
id: 'invite_member.emailError',
defaultMessage: 'Please enter a valid email address'
},
firstname: {
id: 'invite_member.firstname',
defaultMessage: 'First name'
},
lastname: {
id: 'invite_member.lastname',
defaultMessage: 'Last name'
},
modalTitle: {
id: 'invite_member.modalTitle',
defaultMessage: 'Discard Invitations?'
},
modalMessage: {
id: 'invite_member.modalMessage',
defaultMessage: 'You have unsent invitations, are you sure you want to discard them?'
},
modalButton: {
id: 'invite_member.modalButton',
defaultMessage: 'Yes, Discard'
}
});
class InviteMemberModal extends React.Component {
constructor(props) {
super(props);
@@ -72,7 +101,7 @@ export default class InviteMemberModal extends React.Component {
var invite = {};
invite.email = ReactDOM.findDOMNode(this.refs['email' + index]).value.trim();
if (!invite.email || !utils.isEmail(invite.email)) {
emailErrors[index] = 'Please enter a valid email address';
emailErrors[index] = this.props.intl.formatMessage(holders.emailError);
valid = false;
} else {
emailErrors[index] = '';
@@ -103,7 +132,7 @@ export default class InviteMemberModal extends React.Component {
this.setState({isSendingEmails: false});
},
(err) => {
if (err.message === 'This person is already on your team') {
if (err.id === 'api.team.invite_members.already.app_error') {
emailErrors[err.detailed_error] = err.message;
this.setState({emailErrors: emailErrors});
} else {
@@ -199,6 +228,7 @@ export default class InviteMemberModal extends React.Component {
render() {
var currentUser = UserStore.getCurrentUser();
const {formatMessage} = this.props.intl;
if (currentUser != null) {
var inviteSections = [];
@@ -252,7 +282,7 @@ export default class InviteMemberModal extends React.Component {
type='text'
className='form-control'
ref={'first_name' + index}
placeholder='First name'
placeholder={formatMessage(holders.firstname)}
maxLength='64'
disabled={!this.state.emailEnabled || !this.state.userCreationEnabled}
spellCheck='false'
@@ -266,7 +296,7 @@ export default class InviteMemberModal extends React.Component {
type='text'
className='form-control'
ref={'last_name' + index}
placeholder='Last name'
placeholder={formatMessage(holders.lastname)}
maxLength='64'
disabled={!this.state.emailEnabled || !this.state.userCreationEnabled}
spellCheck='false'
@@ -318,20 +348,48 @@ export default class InviteMemberModal extends React.Component {
type='button'
className='btn btn-default'
onClick={this.addInviteFields}
>{'Add another'}</button>
>
<FormattedMessage
id='invite_member.addAnother'
defaultMessage='Add another'
/>
</button>
<br/>
<br/>
<span>{'People invited automatically join the '}<strong>{defaultChannelName}</strong>{' channel.'}</span>
<span>
<FormattedHTMLMessage
id='invite_member.autoJoin'
defaultMessage='People invited automatically join the <strong>{channel}</strong> channel.'
values={{
channel: defaultChannelName
}}
/>
</span>
</div>
);
var sendButtonLabel = 'Send Invitation';
var sendButtonLabel = (
<FormattedMessage
id='invite_member.send'
defaultMessage='Send Invitation'
/>
);
if (this.state.isSendingEmails) {
sendButtonLabel = (
<span><i className='fa fa-spinner fa-spin' />{' Sending'}</span>
<span><i className='fa fa-spinner fa-spin' />
<FormattedMessage
id='invite_member.sending'
defaultMessage=' Sending'
/>
</span>
);
} else if (this.state.inviteIds.length > 1) {
sendButtonLabel = 'Send Invitations';
sendButtonLabel = (
<FormattedMessage
id='invite_member.send2'
defaultMessage='Send Invitations'
/>
);
}
sendButton = (
@@ -352,27 +410,46 @@ export default class InviteMemberModal extends React.Component {
href='#'
onClick={this.showGetTeamInviteLinkModal}
>
{'Team Invite Link'}
<FormattedMessage
id='invite_member.inviteLink'
defaultMessage='Team Invite Link'
/>
</a>
);
teamInviteLink = (
<p>
{'You can also invite people using the '}{link}{'.'}
<FormattedMessage
id='invite_member.teamInviteLink'
defaultMessage='You can also invite people using the {link}.'
values={{
link: (link)
}}
/>
</p>
);
}
content = (
<div>
<p>{'Email is currently disabled for your team, and email invitations cannot be sent. Contact your system administrator to enable email and email invitations.'}</p>
<p>
<FormattedMessage
id='invite_member.content'
defaultMessage='Email is currently disabled for your team, and email invitations cannot be sent. Contact your system administrator to enable email and email invitations.'
/>
</p>
{teamInviteLink}
</div>
);
} else {
content = (
<div>
<p>{'User creation has been disabled for your team. Please ask your team administrator for details.'}</p>
<p>
<FormattedMessage
id='invite_member.disabled'
defaultMessage='User creation has been disabled for your team. Please ask your team administrator for details.'
/>
</p>
</div>
);
}
@@ -387,7 +464,12 @@ export default class InviteMemberModal extends React.Component {
backdrop={this.state.isSendingEmails ? 'static' : true}
>
<Modal.Header closeButton={!this.state.isSendingEmails}>
<Modal.Title>{'Invite New Member'}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='invite_member.newMember'
defaultMessage='Invite New Member'
/>
</Modal.Title>
</Modal.Header>
<Modal.Body ref='modalBody'>
<form role='form'>
@@ -402,15 +484,18 @@ export default class InviteMemberModal extends React.Component {
onClick={this.handleHide.bind(this, true)}
disabled={this.state.isSendingEmails}
>
{'Cancel'}
<FormattedMessage
id='invite_member.cancel'
defaultMessage='Cancel'
/>
</button>
{sendButton}
</Modal.Footer>
</Modal>
<ConfirmModal
title='Discard Invitations?'
message='You have unsent invitations, are you sure you want to discard them?'
confirm_button='Yes, Discard'
title={formatMessage(holders.modalTitle)}
message={formatMessage(holders.modalMessage)}
confirm_button={formatMessage(holders.modalButton)}
show={this.state.showConfirmModal}
onConfirm={this.handleHide.bind(this, false)}
onCancel={() => this.setState({showConfirmModal: false})}
@@ -424,4 +509,7 @@ export default class InviteMemberModal extends React.Component {
}
InviteMemberModal.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(InviteMemberModal);

50
web/react/components/member_list_team_item.jsx
Просмотреть файл

@@ -6,6 +6,8 @@ import * as Client from '../utils/client.jsx';
import * as AsyncClient from '../utils/async_client.jsx';
import * as Utils from '../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
export default class MemberListTeamItem extends React.Component {
constructor(props) {
super(props);
@@ -78,14 +80,29 @@ export default class MemberListTeamItem extends React.Component {
}
const user = this.props.user;
let currentRoles = 'Member';
let currentRoles = (
<FormattedMessage
id='member_team_item.member'
defaultMessage='Member'
/>
);
const timestamp = UserStore.getCurrentUser().update_at;
if (user.roles.length > 0) {
if (Utils.isSystemAdmin(user.roles)) {
currentRoles = 'System Admin';
currentRoles = (
<FormattedMessage
id='member_team_item.systemAdmin'
defaultMessage='System Admin'
/>
);
} else if (Utils.isAdmin(user.roles)) {
currentRoles = 'Team Admin';
currentRoles = (
<FormattedMessage
id='member_team_item.teamAdmin'
defaultMessage='Team Admin'
/>
);
} else {
currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1);
}
@@ -98,7 +115,12 @@ export default class MemberListTeamItem extends React.Component {
let showMakeNotActive = user.roles !== 'system_admin';
if (user.delete_at > 0) {
currentRoles = 'Inactive';
currentRoles = (
<FormattedMessage
id='member_team_item.inactive'
defaultMessage='Inactive'
/>
);
showMakeMember = false;
showMakeAdmin = false;
showMakeActive = true;
@@ -114,7 +136,10 @@ export default class MemberListTeamItem extends React.Component {
href='#'
onClick={this.handleMakeAdmin}
>
{'Make Team Admin'}
<FormattedMessage
id='member_team_item.makeAdmin'
defaultMessage='Make Team Admin'
/>
</a>
</li>
);
@@ -129,7 +154,10 @@ export default class MemberListTeamItem extends React.Component {
href='#'
onClick={this.handleMakeMember}
>
{'Make Member'}
<FormattedMessage
id='member_team_item.makeMember'
defaultMessage='Make Member'
/>
</a>
</li>
);
@@ -144,7 +172,10 @@ export default class MemberListTeamItem extends React.Component {
href='#'
onClick={this.handleMakeActive}
>
{'Make Active'}
<FormattedMessage
id='member_team_item.makeActive'
defaultMessage='Make Active'
/>
</a>
</li>
);
@@ -159,7 +190,10 @@ export default class MemberListTeamItem extends React.Component {
href='#'
onClick={this.handleMakeNotActive}
>
{'Make Inactive'}
<FormattedMessage
id='member_team_item.makeInactive'
defaultMessage='Make Inactive'
/>
</a>
</li>
);

45
web/react/components/more_channels.jsx
Просмотреть файл

@@ -8,6 +8,8 @@ import ChannelStore from '../stores/channel_store.jsx';
import LoadingScreen from './loading_screen.jsx';
import NewChannelFlow from './new_channel_flow.jsx';
import {FormattedMessage} from 'mm-intl';
function getStateFromStores() {
return {
channels: ChannelStore.getMoreAll(),
@@ -100,7 +102,10 @@ export default class MoreChannels extends React.Component {
onClick={self.handleJoin.bind(self, channel, index)}
className='btn btn-primary'
>
Join
<FormattedMessage
id='more_channels.join'
defaultMessage='Join'
/>
</button>
);
}
@@ -123,8 +128,18 @@ export default class MoreChannels extends React.Component {
} else {
moreChannels = (
<div className='no-channel-message'>
<p className='primary-message'>No more channels to join</p>
<p className='secondary-message'>Click 'Create New Channel' to make a new one</p>
<p className='primary-message'>
<FormattedMessage
id='more_channels.noMore'
defaultMessage='No more channels to join'
/>
</p>
<p className='secondary-message'>
<FormattedMessage
id='more_channels.createClick'
defaultMessage="Click 'Create New Channel' to make a new one"
/>
</p>
</div>
);
}
@@ -148,15 +163,28 @@ export default class MoreChannels extends React.Component {
data-dismiss='modal'
>
<span aria-hidden='true'>{'×'}</span>
<span className='sr-only'>{'Close'}</span>
<span className='sr-only'>
<FormattedMessage
id='more_channels.close'
defaultMessage='Close'
/>
</span>
</button>
<h4 className='modal-title'>{'More Channels'}</h4>
<h4 className='modal-title'>
<FormattedMessage
id='more_channels.title'
defaultMessage='More Channels'
/>
</h4>
<button
type='button'
className='btn btn-primary channel-create-btn'
onClick={this.handleNewChannel}
>
{'Create New Channel'}
<FormattedMessage
id='more_channels.create'
defaultMessage='Create New Channel'
/>
</button>
<NewChannelFlow
show={this.state.showNewChannelModal}
@@ -174,7 +202,10 @@ export default class MoreChannels extends React.Component {
className='btn btn-default'
data-dismiss='modal'
>
{'Close'}
<FormattedMessage
id='more_channels.close'
defaultMessage='Close'
/>
</button>
</div>
</div>

71
web/react/components/more_direct_channels.jsx
Просмотреть файл

@@ -5,7 +5,20 @@ const Modal = ReactBootstrap.Modal;
import UserStore from '../stores/user_store.jsx';
import * as Utils from '../utils/utils.jsx';
export default class MoreDirectChannels extends React.Component {
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
member: {
id: 'more_direct_channels.member',
defaultMessage: 'Member'
},
search: {
id: 'more_direct_channels.search',
defaultMessage: 'Search members'
}
});
class MoreDirectChannels extends React.Component {
constructor(props) {
super(props);
@@ -148,7 +161,10 @@ export default class MoreDirectChannels extends React.Component {
className='btn btn-primary btn-message'
onClick={this.handleShowDirectChannel.bind(this, user)}
>
{'Message'}
<FormattedMessage
id='more_direct_channels.message'
defaultMessage='Message'
/>
</button>
);
}
@@ -180,6 +196,7 @@ export default class MoreDirectChannels extends React.Component {
}
render() {
const {formatMessage} = this.props.intl;
if (!this.props.show) {
return null;
}
@@ -199,19 +216,44 @@ export default class MoreDirectChannels extends React.Component {
const userEntries = users.map(this.createRowForUser);
if (userEntries.length === 0) {
userEntries.push(<tr key='no-users-found'><td>{'No users found :('}</td></tr>);
userEntries.push(
<tr key='no-users-found'><td>
<FormattedMessage
id='more_direct_channels.notFound'
defaultMessage='No users found :('
/>
</td></tr>);
}
let memberString = 'Member';
let memberString = formatMessage(holders.member);
if (users.length !== 1) {
memberString += 's';
}
let count;
if (users.length === this.state.users.length) {
count = `${users.length} ${memberString}`;
count = (
<FormattedMessage
id='more_direct_channels.count'
defaultMessage='{count} {member}'
values={{
count: users.length,
member: memberString
}}
/>
);
} else {
count = `${users.length} ${memberString} of ${this.state.users.length} Total`;
count = (
<FormattedMessage
id='more_direct_channels.countTotal'
defaultMessage='{count} {member} of {total} Total'
values={{
count: users.length,
member: memberString,
total: this.state.users.length
}}
/>
);
}
return (
@@ -221,7 +263,12 @@ export default class MoreDirectChannels extends React.Component {
onHide={this.handleHide}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'Direct Messages'}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='more_direct_channels.title'
defaultMessage='Direct Messages'
/>
</Modal.Title>
</Modal.Header>
<Modal.Body ref='modalBody'>
<div className='filter-row'>
@@ -229,7 +276,7 @@ export default class MoreDirectChannels extends React.Component {
<input
ref='filter'
className='form-control filter-textbox'
placeholder='Search members'
placeholder={formatMessage(holders.search)}
onInput={this.handleFilterChange}
/>
</div>
@@ -254,7 +301,10 @@ export default class MoreDirectChannels extends React.Component {
className='btn btn-default'
onClick={this.handleHide}
>
{'Close'}
<FormattedMessage
id='more_direct_channels.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>
@@ -263,6 +313,9 @@ export default class MoreDirectChannels extends React.Component {
}
MoreDirectChannels.propTypes = {
intl: intlShape.isRequired,
show: React.PropTypes.bool.isRequired,
onModalDismissed: React.PropTypes.func
};
export default injectIntl(MoreDirectChannels);

68
web/react/components/navbar_dropdown.jsx
Просмотреть файл

@@ -14,6 +14,8 @@ import UserSettingsModal from './user_settings/user_settings_modal.jsx';
import Constants from '../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
function getStateFromStores() {
const teams = [];
const teamsObject = UserStore.getTeams();
@@ -97,7 +99,10 @@ export default class NavbarDropdown extends React.Component {
href='#'
onClick={EventHelpers.showInviteMemberModal}
>
{'Invite New Member'}
<FormattedMessage
id='navbar_dropdown.inviteMember'
defaultMessage='Invite New Member'
/>
</a>
</li>
);
@@ -109,7 +114,10 @@ export default class NavbarDropdown extends React.Component {
href='#'
onClick={EventHelpers.showGetTeamInviteLinkModal}
>
{'Get Team Invite Link'}
<FormattedMessage
id='navbar_dropdown.teamLink'
defaultMessage='Get Team Invite Link'
/>
</a>
</li>
);
@@ -120,7 +128,10 @@ export default class NavbarDropdown extends React.Component {
manageLink = (
<li>
<ToggleModalButton dialogType={TeamMembersModal}>
{'Manage Members'}
<FormattedMessage
id='navbar_dropdown.manageMembers'
defaultMessage='Manage Members'
/>
</ToggleModalButton>
</li>
);
@@ -134,7 +145,10 @@ export default class NavbarDropdown extends React.Component {
data-toggle='modal'
data-target='#team_settings'
>
{'Team Settings'}
<FormattedMessage
id='navbar_dropdown.teamSettings'
defaultMessage='Team Settings'
/>
</a>
</li>
);
@@ -146,7 +160,10 @@ export default class NavbarDropdown extends React.Component {
<a
href={'/admin_console?' + Utils.getSessionIndex()}
>
{'System Console'}
<FormattedMessage
id='navbar_dropdown.console'
defaultMessage='System Console'
/>
</a>
</li>
);
@@ -165,7 +182,16 @@ export default class NavbarDropdown extends React.Component {
this.state.teams.forEach((team) => {
if (team.name !== this.props.teamName) {
teams.push(<li key={team.name}><a href={Utils.getWindowLocationOrigin() + '/' + team.name}>{'Switch to ' + team.display_name}</a></li>);
teams.push(
<li key={team.name}><a href={Utils.getWindowLocationOrigin() + '/' + team.name}>
<FormattedMessage
id='navbar_dropdown.switchTeam'
defaultMessage='Switch to {team}'
values={{
team: team.display_name
}}
/>
</a></li>);
}
});
}
@@ -178,7 +204,10 @@ export default class NavbarDropdown extends React.Component {
target='_blank'
href={Utils.getWindowLocationOrigin() + '/signup_team'}
>
{'Create a New Team'}
<FormattedMessage
id='navbar_dropdown.create'
defaultMessage='Create a New Team'
/>
</a>
</li>
);
@@ -192,7 +221,10 @@ export default class NavbarDropdown extends React.Component {
target='_blank'
href={global.window.mm_config.HelpLink}
>
{'Help'}
<FormattedMessage
id='navbar_dropdown.help'
defaultMessage='Help'
/>
</a>
</li>
);
@@ -206,7 +238,10 @@ export default class NavbarDropdown extends React.Component {
target='_blank'
href={global.window.mm_config.ReportAProblemLink}
>
{'Report a Problem'}
<FormattedMessage
id='navbar_dropdown.report'
defaultMessage='Report a Problem'
/>
</a>
</li>
);
@@ -239,7 +274,10 @@ export default class NavbarDropdown extends React.Component {
href='#'
onClick={() => this.setState({showUserSettingsModal: true})}
>
{'Account Settings'}
<FormattedMessage
id='navbar_dropdown.accountSettings'
defaultMessage='Account Settings'
/>
</a>
</li>
{inviteLink}
@@ -249,7 +287,10 @@ export default class NavbarDropdown extends React.Component {
href='#'
onClick={this.handleLogoutClick}
>
{'Logout'}
<FormattedMessage
id='navbar_dropdown.logout'
defaultMessage='Logout'
/>
</a>
</li>
{adminDivider}
@@ -265,7 +306,10 @@ export default class NavbarDropdown extends React.Component {
href='#'
onClick={this.handleAboutModal}
>
{'About Mattermost'}
<FormattedMessage
id='navbar_dropdown.about'
defaultMessage='About Mattermost'
/>
</a>
</li>
<UserSettingsModal

66
web/react/components/new_channel_flow.jsx
Просмотреть файл

@@ -9,11 +9,47 @@ import UserStore from '../stores/user_store.jsx';
import NewChannelModal from './new_channel_modal.jsx';
import ChangeURLModal from './change_url_modal.jsx';
import {intlShape, injectIntl, defineMessages} from 'mm-intl';
const SHOW_NEW_CHANNEL = 1;
const SHOW_EDIT_URL = 2;
const SHOW_EDIT_URL_THEN_COMPLETE = 3;
const messages = defineMessages({
invalidName: {
id: 'channel_flow.invalidName',
defaultMessage: 'Invalid Channel Name'
},
alreadyExist: {
id: 'channel_flow.alreadyExist',
defaultMessage: 'A channel with that URL already exists'
},
channel: {
id: 'channel_flow.channel',
defaultMessage: 'Channel'
},
group: {
id: 'channel_flow.group',
defaultMessage: 'Group'
},
change: {
id: 'channel_flow.changeUrlTitle',
defaultMessage: 'Change {term} URL'
},
set: {
id: 'channel_flow.set_url_title',
defaultMessage: 'Set {term} URL'
},
create: {
id: 'channel_flow.create',
defaultMessage: 'Create {term}'
},
changeUrlDescription: {
id: 'channel_flow.changeUrlDescription',
defaultMessage: 'Some characters are not allowed in URLs and may be removed.'
}
});
export default class NewChannelFlow extends React.Component {
class NewChannelFlow extends React.Component {
constructor(props) {
super(props);
@@ -51,9 +87,10 @@ export default class NewChannelFlow extends React.Component {
doSubmit() {
var channel = {};
const {formatMessage} = this.props.intl;
channel.display_name = this.state.channelDisplayName;
if (!channel.display_name) {
this.setState({serverError: 'Invalid Channel Name'});
this.setState({serverError: formatMessage(messages.invalidName)});
return;
}
@@ -75,11 +112,11 @@ export default class NewChannelFlow extends React.Component {
Utils.switchChannel(data);
},
(err) => {
if (err.message === 'Name must be 2 or more lowercase alphanumeric characters') {
if (err.id === 'model.channel.is_valid.2_or_more.app_error') {
this.setState({flowState: SHOW_EDIT_URL_THEN_COMPLETE});
}
if (err.message === 'A channel with that handle already exists') {
this.setState({serverError: 'A channel with that URL already exists'});
if (err.id === 'store.sql_channel.update.exists.app_error') {
this.setState({serverError: formatMessage(messages.alreadyExist)});
return;
}
this.setState({serverError: err.message});
@@ -130,27 +167,29 @@ export default class NewChannelFlow extends React.Component {
let changeURLSubmitButtonText = '';
let channelTerm = '';
const {formatMessage} = this.props.intl;
// Only listen to flow state if we are being shown
if (this.props.show) {
switch (this.state.flowState) {
case SHOW_NEW_CHANNEL:
if (this.state.channelType === 'O') {
showChannelModal = true;
channelTerm = 'Channel';
channelTerm = formatMessage(messages.channel);
} else {
showGroupModal = true;
channelTerm = 'Group';
channelTerm = formatMessage(messages.group);
}
break;
case SHOW_EDIT_URL:
showChangeURLModal = true;
changeURLTitle = 'Change ' + channelTerm + ' URL';
changeURLSubmitButtonText = 'Change ' + channelTerm + ' URL';
changeURLTitle = formatMessage(messages.change, {term: channelTerm});
changeURLSubmitButtonText = formatMessage(messages.change, {term: channelTerm});
break;
case SHOW_EDIT_URL_THEN_COMPLETE:
showChangeURLModal = true;
changeURLTitle = 'Set ' + channelTerm + ' URL';
changeURLSubmitButtonText = 'Create ' + channelTerm;
changeURLTitle = formatMessage(messages.set, {term: channelTerm});
changeURLSubmitButtonText = formatMessage(messages.create, {term: channelTerm});
break;
}
}
@@ -181,7 +220,7 @@ export default class NewChannelFlow extends React.Component {
<ChangeURLModal
show={showChangeURLModal}
title={changeURLTitle}
description={'Some characters are not allowed in URLs and may be removed.'}
description={formatMessage(messages.changeUrlDescription)}
urlLabel={channelTerm + ' URL'}
submitButtonText={changeURLSubmitButtonText}
currentURL={this.state.channelName}
@@ -200,7 +239,10 @@ NewChannelFlow.defaultProps = {
};
NewChannelFlow.propTypes = {
intl: intlShape.isRequired,
show: React.PropTypes.bool.isRequired,
channelType: React.PropTypes.string.isRequired,
onModalDismissed: React.PropTypes.func.isRequired
};
export default injectIntl(NewChannelFlow);

118
web/react/components/new_channel_modal.jsx
Просмотреть файл

@@ -2,9 +2,19 @@
// See License.txt for license information.
import * as Utils from '../utils/utils.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
var Modal = ReactBootstrap.Modal;
export default class NewChannelModal extends React.Component {
const holders = defineMessages({
nameEx: {
id: 'channel_modal.nameEx',
defaultMessage: 'E.g.: "Bugs", "Marketing", "办公室恋情"'
}
});
class NewChannelModal extends React.Component {
constructor(props) {
super(props);
@@ -32,7 +42,7 @@ export default class NewChannelModal extends React.Component {
const displayName = ReactDOM.findDOMNode(this.refs.display_name).value.trim();
if (displayName.length < 1) {
this.setState({displayNameError: 'This field is required'});
this.setState({displayNameError: true});
return;
}
@@ -51,7 +61,15 @@ export default class NewChannelModal extends React.Component {
var displayNameClass = 'form-group';
if (this.state.displayNameError) {
displayNameError = <p className='input__help error'>{this.state.displayNameError}</p>;
displayNameError = (
<p className='input__help error'>
<FormattedMessage
id='channel_modal.displayNameError'
defaultMessage='This field is required'
/>
{this.state.displayNameError}
</p>
);
displayNameClass += ' has-error';
}
@@ -63,29 +81,51 @@ export default class NewChannelModal extends React.Component {
var channelSwitchText = '';
switch (this.props.channelType) {
case 'P':
channelTerm = 'Group';
channelTerm = (
<FormattedMessage
id='channel_modal.group'
defaultMessage='Group'
/>
);
channelSwitchText = (
<div className='modal-intro'>
{'Create a new private group with restricted membership. '}
<FormattedMessage
id='channel_modal.privateGroup1'
defaultMessage='Create a new private group with restricted membership. '
/>
<a
href='#'
onClick={this.props.onTypeSwitched}
>
{'Create a public channel'}
<FormattedMessage
id='channel_modal.publicChannel1'
defaultMessage='Create a public channel'
/>
</a>
</div>
);
break;
case 'O':
channelTerm = 'Channel';
channelTerm = (
<FormattedMessage
id='channel_modal.channel'
defaultMessage='Channel'
/>
);
channelSwitchText = (
<div className='modal-intro'>
{'Create a new public channel anyone can join. '}
<FormattedMessage
id='channel_modal.publicChannel2'
defaultMessage='Create a new public channel anyone can join. '
/>
<a
href='#'
onClick={this.props.onTypeSwitched}
>
{'Create a private group'}
<FormattedMessage
id='channel_modal.privateGroup2'
defaultMessage='Create a private group'
/>
</a>
</div>
);
@@ -102,7 +142,13 @@ export default class NewChannelModal extends React.Component {
onHide={this.props.onModalDismissed}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'New ' + channelTerm}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='channel_modal.modalTitle'
defaultMessage='New '
/>
{channelTerm}
</Modal.Title>
</Modal.Header>
<form
role='form'
@@ -113,14 +159,19 @@ export default class NewChannelModal extends React.Component {
{channelSwitchText}
</div>
<div className={displayNameClass}>
<label className='col-sm-3 form__label control-label'>{'Name'}</label>
<label className='col-sm-3 form__label control-label'>
<FormattedMessage
id='channel_modal.name'
defaultMessage='Name'
/>
</label>
<div className='col-sm-9'>
<input
onChange={this.handleChange}
type='text'
ref='display_name'
className='form-control'
placeholder='E.g.: "Bugs", "Marketing", "办公室恋情"'
placeholder={this.props.intl.formatMessage(holders.nameEx)}
maxLength='22'
value={this.props.channelData.displayName}
autoFocus={true}
@@ -133,7 +184,10 @@ export default class NewChannelModal extends React.Component {
href='#'
onClick={this.props.onChangeURLPressed}
>
{'Edit'}
<FormattedMessage
id='channel_modal.edit'
defaultMessage='Edit'
/>
</a>
{')'}
</p>
@@ -141,22 +195,38 @@ export default class NewChannelModal extends React.Component {
</div>
<div className='form-group less'>
<div className='col-sm-3'>
<label className='form__label control-label'>{'Purpose'}</label>
<label className='form__label light'>{'(optional)'}</label>
<label className='form__label control-label'>
<FormattedMessage
id='channel_modal.purpose'
defaultMessage='Purpose'
/>
</label>
<label className='form__label light'>
<FormattedMessage
id='channel_modal.optional'
defaultMessage='(optional)'
/>
</label>
</div>
<div className='col-sm-9'>
<textarea
className='form-control no-resize'
ref='channel_purpose'
rows='4'
placeholder='Purpose'
placeholder={this.props.intl.formatMessage({id: 'channel_modal.purpose'})}
maxLength='128'
value={this.props.channelData.purpose}
onChange={this.handleChange}
tabIndex='2'
/>
<p className='input__help'>
{`Describe how this ${channelTerm} should be used.`}
<FormattedMessage
id='channel_modal.descriptionHelp'
defaultMessage='Describe how this {term} should be used.'
values={{
term: (channelTerm)
}}
/>
</p>
{serverError}
</div>
@@ -168,7 +238,10 @@ export default class NewChannelModal extends React.Component {
className='btn btn-default'
onClick={this.props.onModalDismissed}
>
{'Cancel'}
<FormattedMessage
id='channel_modal.cancel'
defaultMessage='Cancel'
/>
</button>
<button
onClick={this.handleSubmit}
@@ -176,7 +249,11 @@ export default class NewChannelModal extends React.Component {
className='btn btn-primary'
tabIndex='3'
>
{'Create New ' + channelTerm}
<FormattedMessage
id='channel_modal.createNew'
defaultMessage='Create New '
/>
{channelTerm}
</button>
</Modal.Footer>
</form>
@@ -192,6 +269,7 @@ NewChannelModal.defaultProps = {
serverError: ''
};
NewChannelModal.propTypes = {
intl: intlShape.isRequired,
show: React.PropTypes.bool.isRequired,
channelType: React.PropTypes.string.isRequired,
channelData: React.PropTypes.object.isRequired,
@@ -202,3 +280,5 @@ NewChannelModal.propTypes = {
onChangeURLPressed: React.PropTypes.func.isRequired,
onDataChanged: React.PropTypes.func.isRequired
};
export default injectIntl(NewChannelModal);

21
web/react/components/setting_upload.jsx
Просмотреть файл

@@ -1,6 +1,8 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {FormattedMessage} from 'mm-intl';
export default class SettingsUpload extends React.Component {
constructor(props) {
super(props);
@@ -41,7 +43,7 @@ export default class SettingsUpload extends React.Component {
if (inputnode.files && inputnode.files[0]) {
this.props.submit(inputnode.files[0]);
} else {
this.setState({clientError: 'No file selected.'});
this.setState({clientError: true});
}
}
@@ -49,7 +51,12 @@ export default class SettingsUpload extends React.Component {
let clientError = null;
if (this.state.clientError) {
clientError = (
<div className='file-status'>{this.state.clientError}</div>
<div className='file-status'>
<FormattedMessage
id='setting_upload.noFile'
defaultMessage='No file selected.'
/>
</div>
);
}
let serverError = null;
@@ -75,7 +82,10 @@ export default class SettingsUpload extends React.Component {
<ul className='setting-list'>
<li className='setting-list-item'>
<span className='btn btn-sm btn-primary btn-file sel-btn'>
{'Select file'}
<FormattedMessage
id='setting_upload.select'
defaultMessage='Select file'
/>
<input
ref='uploadinput'
accept={this.props.fileTypesAccepted}
@@ -87,7 +97,10 @@ export default class SettingsUpload extends React.Component {
className={submitButtonClass}
onClick={this.doSubmit}
>
{'Import'}
<FormattedMessage
id='setting_upload.import'
defaultMessage='Import'
/>
</a>
{fileNameText}
{serverError}

109
web/react/components/sidebar.jsx
Просмотреть файл

@@ -17,6 +17,9 @@ import * as Client from '../utils/client.jsx';
import * as Utils from '../utils/utils.jsx';
import Constants from '../utils/constants.jsx';
import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
const Preferences = Constants.Preferences;
const TutorialSteps = Constants.TutorialSteps;
@@ -275,34 +278,33 @@ export default class Sidebar extends React.Component {
screens.push(
<div>
<h4>{'Channels'}</h4>
<p><strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'}
</p>
<FormattedHTMLMessage
id='sidebar.tutorialScreen1'
defaultMessage='<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Groups</strong> for multiple people.</p>'
/>
</div>
);
screens.push(
<div>
<h4>{'"Town Square" and "Off-Topic" channels'}</h4>
<p>{'Here are two public channels to start:'}</p>
<p>
<strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'}
</p>
<p>
<strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'}
</p>
<FormattedHTMLMessage
id='sidebar.tutorialScreen2'
defaultMessage='<h4>"Town Square" and "Off-Topic" channels</h4>
<p>Here are two public channels to start:</p>
<p><strong>Town Square</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p>
<p><strong>Off-Topic</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>'
/>
</div>
);
screens.push(
<div>
<h4>{'Creating and Joining Channels'}</h4>
<p>
{'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'}
</p>
<p>
{'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'}
</p>
<FormattedHTMLMessage
id='sidebar.tutorialScreen3'
defaultMessage='<h4>Creating and Joining Channels</h4>
<p>Click <strong>"More..."</strong> to create a new channel or join an existing one.</p>
<p>You can also create a new channel or private group by clicking the <strong>"+" symbol</strong> next to the channel or private group header.</p>'
/>
</div>
);
@@ -437,7 +439,12 @@ export default class Sidebar extends React.Component {
let closeButton = null;
const removeTooltip = (
<Tooltip id='remove-dm-tooltip'>{'Remove from list'}</Tooltip>
<Tooltip id='remove-dm-tooltip'>
<FormattedMessage
id='sidebar.removeList'
defaultMessage='Remove from list'
/>
</Tooltip>
);
if (handleClose && !badge) {
closeButton = (
@@ -525,7 +532,13 @@ export default class Sidebar extends React.Component {
href='#'
onClick={this.showMoreDirectChannelsModal}
>
{'More (' + this.state.hiddenDirectChannelCount + ')'}
<FormattedMessage
id='sidebar.more'
defaultMessage='More ({count})'
values={{
count: this.state.hiddenDirectChannelCount
}}
/>
</a>
</li>
);
@@ -537,10 +550,34 @@ export default class Sidebar extends React.Component {
}
const createChannelTootlip = (
<Tooltip id='new-channel-tooltip' >{'Create new channel'}</Tooltip>
<Tooltip id='new-channel-tooltip' >
<FormattedMessage
id='sidebar.createChannel'
defaultMessage='Create new channel'
/>
</Tooltip>
);
const createGroupTootlip = (
<Tooltip id='new-group-tooltip'>{'Create new group'}</Tooltip>
<Tooltip id='new-group-tooltip'>
<FormattedMessage
id='sidebar.createGroup'
defaultMessage='Create new group'
/>
</Tooltip>
);
const above = (
<FormattedMessage
id='sidebar.unreadAbove'
defaultMessage='Unread post(s) above'
/>
);
const below = (
<FormattedMessage
id='sidebar.unreadBelow'
defaultMessage='Unread post(s) below'
/>
);
return (
@@ -564,12 +601,12 @@ export default class Sidebar extends React.Component {
<UnreadChannelIndicator
show={this.state.showTopUnread}
extraClass='nav-pills__unread-indicator-top'
text={'Unread post(s) above'}
text={above}
/>
<UnreadChannelIndicator
show={this.state.showBottomUnread}
extraClass='nav-pills__unread-indicator-bottom'
text={'Unread post(s) below'}
text={below}
/>
<div
@@ -580,7 +617,10 @@ export default class Sidebar extends React.Component {
<ul className='nav nav-pills nav-stacked'>
<li>
<h4>
{'Channels'}
<FormattedMessage
id='sidebar.channels'
defaultMessage='Channels'
/>
<OverlayTrigger
delayShow={500}
placement='top'
@@ -603,7 +643,10 @@ export default class Sidebar extends React.Component {
className='nav-more'
onClick={this.showMoreChannelsModal}
>
{'More...'}
<FormattedMessage
id='sidebar.moreElips'
defaultMessage='More...'
/>
</a>
</li>
</ul>
@@ -611,7 +654,10 @@ export default class Sidebar extends React.Component {
<ul className='nav nav-pills nav-stacked'>
<li>
<h4>
{'Private Groups'}
<FormattedMessage
id='sidebar.pg'
defaultMessage='Private Groups'
/>
<OverlayTrigger
delayShow={500}
placement='top'
@@ -630,7 +676,14 @@ export default class Sidebar extends React.Component {
{privateChannelItems}
</ul>
<ul className='nav nav-pills nav-stacked'>
<li><h4>{'Direct Messages'}</h4></li>
<li>
<h4>
<FormattedMessage
id='sidebar.direct'
defaultMessage='Direct Messages'
/>
</h4>
</li>
{directMessageItems}
{directMessageMore}
</ul>

23
web/react/components/sidebar_header.jsx
Просмотреть файл

@@ -9,6 +9,9 @@ import PreferenceStore from '../stores/preference_store.jsx';
import * as Utils from '../utils/utils.jsx';
import Constants from '../utils/constants.jsx';
import {FormattedHTMLMessage} from 'mm-intl';
const Preferences = Constants.Preferences;
const TutorialSteps = Constants.TutorialSteps;
@@ -51,20 +54,12 @@ export default class SidebarHeader extends React.Component {
screens.push(
<div>
<h4>{'Main Menu'}</h4>
<p>
{'The '}<strong>{'Main Menu'}</strong>{' is where you can '}
<strong>{'Invite New Members'}</strong>
{', access your '}
<strong>{'Account Settings'}</strong>
{' and set your '}<strong>{'Theme Color'}</strong>{'.'}
</p>
<p>
{'Team administrators can also access their '}<strong>{'Team Settings'}</strong>{' from this menu.'}
</p>
<p>
{'System administrators will find a '}<strong>{'System Console'}</strong>{' option to administrate the entire system.'}
</p>
<FormattedHTMLMessage
id='sidebar_header.tutorial'
defaultMessage='<h4>Main Menu</h4>
<p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p>
<p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>'
/>
</div>
);

44
web/react/components/team_export_tab.jsx
Просмотреть файл

@@ -3,6 +3,8 @@
import * as Client from '../utils/client.jsx';
import {FormattedMessage} from 'mm-intl';
export default class TeamExportTab extends React.Component {
constructor(props) {
super(props);
@@ -35,7 +37,10 @@ export default class TeamExportTab extends React.Component {
messageSection = (
<p className='confirm-import alert alert-warning'>
<i className='fa fa-spinner fa-pulse' />
{' Exporting...'}
<FormattedMessage
id='team_export_tab.exporting'
defaultMessage=' Exporting...'
/>
</p>
);
break;
@@ -43,12 +48,18 @@ export default class TeamExportTab extends React.Component {
messageSection = (
<p className='confirm-import alert alert-success'>
<i className='fa fa-check' />
{' Ready for '}
<FormattedMessage
id='team_export_tab.ready'
defaultMessage=' Ready for '
/>
<a
href={this.state.link}
download={true}
>
{'download'}
<FormattedMessage
id='team_export_tab.download'
defaultMessage='download'
/>
</a>
</p>
);
@@ -57,7 +68,13 @@ export default class TeamExportTab extends React.Component {
messageSection = (
<p className='confirm-import alert alert-warning'>
<i className='fa fa-warning' />
{' Unable to export: ' + this.state.err}
<FormattedMessage
id='team_export_tab.unable'
defaultMessage=' Unable to export: {error}'
values={{
error: this.state.err
}}
/>
</p>
);
break;
@@ -68,10 +85,20 @@ export default class TeamExportTab extends React.Component {
ref='wrapper'
className='user-settings'
>
<h3 className='tab-header'>{'Export'}</h3>
<h3 className='tab-header'>
<FormattedMessage
id='team_export_tab.export'
defaultMessage='Export'
/>
</h3>
<div className='divider-dark first'/>
<ul className='section-max'>
<li className='col-xs-12 section-title'>{'Export your team'}</li>
<li className='col-xs-12 section-title'>
<FormattedMessage
id='team_export_tab.exportTeam'
defaultMessage='Export your team'
/>
</li>
<li className='col-xs-offset-3 col-xs-8'>
<ul className='setting-list'>
<li className='setting-list-item'>
@@ -80,7 +107,10 @@ export default class TeamExportTab extends React.Component {
href='#'
onClick={this.doExport}
>
{'Export'}
<FormattedMessage
id='team_export_tab.export'
defaultMessage='Export'
/>
</a>
</li>
</ul>

176
web/react/components/team_general_tab.jsx
Просмотреть файл

@@ -8,7 +8,56 @@ import * as Client from '../utils/client.jsx';
import * as Utils from '../utils/utils.jsx';
import TeamStore from '../stores/team_store.jsx';
export default class GeneralTab extends React.Component {
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
dirDisabled: {
id: 'general_tab.dirDisabled',
defaultMessage: 'Team Directory has been disabled. Please ask a System Admin to enable the Team Directory in the System Console team settings.'
},
required: {
id: 'general_tab.required',
defaultMessage: 'This field is required'
},
chooseName: {
id: 'general_tab.chooseName',
defaultMessage: 'Please choose a new name for your team'
},
includeDirTitle: {
id: 'general_tab.includeDirTitle',
defaultMessage: 'Include this team in the Team Directory'
},
yes: {
id: 'general_tab.yes',
defaultMessage: 'Yes'
},
no: {
id: 'general_tab.no',
defaultMessage: 'No'
},
dirOff: {
id: 'general_tab.dirOff',
defaultMessage: 'Team directory is turned off for this system.'
},
openInviteTitle: {
id: 'general_tab.openInviteTitle',
defaultMessage: 'Allow anyone to sign-up from login page'
},
codeTitle: {
id: 'general_tab.codeTitle',
defaultMessage: 'Invite Code'
},
codeDesc: {
id: 'general_tab.codeDesc',
defaultMessage: "Click 'Edit' to regenerate Invite Code."
},
teamNameInfo: {
id: 'general_tab.teamNameInfo',
defaultMessage: 'Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.'
}
});
class GeneralTab extends React.Component {
constructor(props) {
super(props);
@@ -66,7 +115,7 @@ export default class GeneralTab extends React.Component {
handleTeamListingRadio(listing) {
if (global.window.mm_config.EnableTeamListing !== 'true' && listing) {
this.setState({clientError: 'Team Directory has been disabled. Please ask a System Admin to enable the Team Directory in the System Console team settings.'});
this.setState({clientError: this.props.intl.formatMessage(holders.dirDisabled)});
} else {
this.setState({allow_team_listing: listing});
}
@@ -118,12 +167,13 @@ export default class GeneralTab extends React.Component {
var state = {serverError: '', clientError: ''};
let valid = true;
const {formatMessage} = this.props.intl;
const name = this.state.name.trim();
if (!name) {
state.clientError = 'This field is required';
state.clientError = formatMessage(holders.required);
valid = false;
} else if (name === this.props.team.display_name) {
state.clientError = 'Please choose a new name for your team';
state.clientError = formatMessage(holders.chooseName);
valid = false;
} else {
state.clientError = '';
@@ -160,7 +210,7 @@ export default class GeneralTab extends React.Component {
if (inviteId) {
state.clientError = '';
} else {
state.clientError = 'This field is required';
state.clientError = this.props.intl.fromatMessage(holders.required);
valid = false;
}
@@ -260,6 +310,7 @@ export default class GeneralTab extends React.Component {
}
const enableTeamListing = global.window.mm_config.EnableTeamListing === 'true';
const {formatMessage} = this.props.intl;
let teamListingSection;
if (this.props.activeSection === 'team_listing') {
@@ -279,7 +330,10 @@ export default class GeneralTab extends React.Component {
defaultChecked={this.state.allow_team_listing}
onChange={this.handleTeamListingRadio.bind(this, true)}
/>
{'Yes'}
<FormattedMessage
id='general_tab.yes'
defaultMessage='Yes'
/>
</label>
<br/>
</div>
@@ -292,24 +346,39 @@ export default class GeneralTab extends React.Component {
defaultChecked={!this.state.allow_team_listing}
onChange={this.handleTeamListingRadio.bind(this, false)}
/>
{'No'}
<FormattedMessage
id='general_tab.no'
defaultMessage='No'
/>
</label>
<br/>
</div>
<div><br/>{'Including this team will display the team name from the Team Directory section of the Home Page, and provide a link to the sign-in page.'}</div>
<div>
<br/>
<FormattedMessage
id='general_tab.includeDirDesc'
defaultMessage='Including this team will display the team name from the Team Directory section of the Home Page, and provide a link to the sign-in page.'
/>
</div>
</div>
);
} else {
inputs.push(
<div key='userTeamListingOptions'>
<div><br/>{'Contact your system administrator to turn on the team directory on the system home page.'}</div>
<div>
<br/>
<FormattedMessage
id='general_tab.dirContact'
defaultMessage='Contact your system administrator to turn on the team directory on the system home page.'
/>
</div>
</div>
);
}
teamListingSection = (
<SettingItemMax
title='Include this team in the Team Directory'
title={formatMessage(holders.includeDirTitle)}
inputs={inputs}
submit={submitHandle}
server_error={serverError}
@@ -322,17 +391,17 @@ export default class GeneralTab extends React.Component {
if (enableTeamListing) {
if (this.state.allow_team_listing === true) {
describe = 'Yes';
describe = formatMessage(holders.yes);
} else {
describe = 'No';
describe = formatMessage(holders.no);
}
} else {
describe = 'Team directory is turned off for this system.';
describe = formatMessage(holders.dirOff);
}
teamListingSection = (
<SettingItemMin
title='Include this team in the Team Directory'
title={formatMessage(holders.includeDirTitle)}
describe={describe}
updateSection={this.onUpdateTeamListingSection}
/>
@@ -351,7 +420,10 @@ export default class GeneralTab extends React.Component {
defaultChecked={this.state.allow_open_invite}
onChange={this.handleOpenInviteRadio.bind(this, true)}
/>
{'Yes'}
<FormattedMessage
id='general_tab.yes'
defaultMessage='Yes'
/>
</label>
<br/>
</div>
@@ -363,17 +435,26 @@ export default class GeneralTab extends React.Component {
defaultChecked={!this.state.allow_open_invite}
onChange={this.handleOpenInviteRadio.bind(this, false)}
/>
{'No'}
<FormattedMessage
id='general_tab.no'
defaultMessage='No'
/>
</label>
<br/>
</div>
<div><br/>{'When allowed, a link to account creation will be included on the sign-in page of this team and allow any visitor to sign-up.'}</div>
<div>
<br/>
<FormattedMessage
id='general_tab.openInviteDesc'
defaultMessage='When allowed, a link to account creation will be included on the sign-in page of this team and allow any visitor to sign-up.'
/>
</div>
</div>
];
openInviteSection = (
<SettingItemMax
title='Allow anyone to sign-up from login page'
title={formatMessage(holders.openInviteTitle)}
inputs={inputs}
submit={this.handleOpenInviteSubmit}
server_error={serverError}
@@ -383,14 +464,14 @@ export default class GeneralTab extends React.Component {
} else {
let describe = '';
if (this.state.allow_open_invite === true) {
describe = 'Yes';
describe = formatMessage(holders.yes);
} else {
describe = 'No';
describe = formatMessage(holders.no);
}
openInviteSection = (
<SettingItemMin
title='Allow anyone to sign-up from login page'
title={formatMessage(holders.openInviteTitle)}
describe={describe}
updateSection={this.onUpdateOpenInviteSection}
/>
@@ -405,7 +486,12 @@ export default class GeneralTab extends React.Component {
inputs.push(
<div key='teamInviteSetting'>
<div className='row'>
<label className='col-sm-5 control-label'>{'Invite Code'}</label>
<label className='col-sm-5 control-label'>
<FormattedMessage
id='general_tab.codeTitle'
defaultMessage='Invite Code'
/>
</label>
<div className='col-sm-7'>
<input
className='form-control'
@@ -419,18 +505,26 @@ export default class GeneralTab extends React.Component {
href='#'
onClick={this.handleGenerateInviteId}
>
{'Re-Generate'}
<FormattedMessage
id='general_tab.regenerate'
defaultMessage='Re-Generate'
/>
</a>
</div>
</div>
</div>
<div className='setting-list__hint'>{'The Invite Code is used as part of the URL in the team invitation link created by **Get Team Invite Link** in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.'}</div>
<div className='setting-list__hint'>
<FormattedMessage
id='general_tab.codeLongDesc'
defaultMessage='The Invite Code is used as part of the URL in the team invitation link created by **Get Team Invite Link** in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.'
/>
</div>
</div>
);
inviteSection = (
<SettingItemMax
title={`Invite Code`}
title={formatMessage(holders.codeTitle)}
inputs={inputs}
submit={this.handleInviteIdSubmit}
server_error={serverError}
@@ -441,8 +535,8 @@ export default class GeneralTab extends React.Component {
} else {
inviteSection = (
<SettingItemMin
title={`Invite Code`}
describe={`Click 'Edit' to regenerate Invite Code.`}
title={formatMessage(holders.codeTitle)}
describe={formatMessage(holders.codeDesc)}
updateSection={this.onUpdateInviteIdSection}
/>
);
@@ -453,7 +547,12 @@ export default class GeneralTab extends React.Component {
if (this.props.activeSection === 'name') {
const inputs = [];
let teamNameLabel = 'Team Name';
let teamNameLabel = (
<FormattedMessage
id='general_tab.teamName'
defaultMessage='Team Name'
/>
);
if (Utils.isMobile()) {
teamNameLabel = '';
}
@@ -478,13 +577,13 @@ export default class GeneralTab extends React.Component {
nameSection = (
<SettingItemMax
title={`Team Name`}
title={formatMessage({id: 'general_tab.teamName'})}
inputs={inputs}
submit={this.handleNameSubmit}
server_error={serverError}
client_error={clientError}
updateSection={this.onUpdateNameSection}
extraInfo='Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.'
extraInfo={formatMessage(holders.teamNameInfo)}
/>
);
} else {
@@ -492,7 +591,7 @@ export default class GeneralTab extends React.Component {
nameSection = (
<SettingItemMin
title={`Team Name`}
title={formatMessage({id: 'general_tab.teamName'})}
describe={describe}
updateSection={this.onUpdateNameSection}
/>
@@ -515,14 +614,22 @@ export default class GeneralTab extends React.Component {
ref='title'
>
<i className='modal-back'></i>
{'General Settings'}
<FormattedMessage
id='general_tab.title'
defaultMessage='General Settings'
/>
</h4>
</div>
<div
ref='wrapper'
className='user-settings'
>
<h3 className='tab-header'>{'General Settings'}</h3>
<h3 className='tab-header'>
<FormattedMessage
id='general_tab.title'
defaultMessage='General Settings'
/>
</h3>
<div className='divider-dark first'/>
{nameSection}
<div className='divider-light'/>
@@ -539,7 +646,10 @@ export default class GeneralTab extends React.Component {
}
GeneralTab.propTypes = {
intl: intlShape.isRequired,
updateSection: React.PropTypes.func.isRequired,
team: React.PropTypes.object.isRequired,
activeSection: React.PropTypes.string.isRequired
};
export default injectIntl(GeneralTab);

67
web/react/components/team_import_tab.jsx
Просмотреть файл

@@ -4,7 +4,16 @@
import * as utils from '../utils/utils.jsx';
import SettingUpload from './setting_upload.jsx';
export default class TeamImportTab extends React.Component {
import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
const holders = defineMessages({
importSlack: {
id: 'team_import_tab.importSlack',
defaultMessage: 'Import from Slack (Beta)'
}
});
class TeamImportTab extends React.Component {
constructor(props) {
super(props);
@@ -32,16 +41,19 @@ export default class TeamImportTab extends React.Component {
}
render() {
const {formatMessage} = this.props.intl;
var uploadHelpText = (
<div>
<p>{'To import a team from Slack go to Slack > Team Settings > Import/Export Data > Export > Start Export. Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team\'\s public channels.'}</p>
<p>{'The Slack import to Mattermost is in "Beta". Slack bot posts do not yet import and Slack @mentions are not currently supported.'}</p>
<FormattedHTMLMessage
id='team_import_tab.importHelp'
defaultMessage="<p>To import a team from Slack go to Slack > Team Settings > Import/Export Data > Export > Start Export. Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team's public channels.</p><p>The Slack import to Mattermost is in 'Beta'. Slack bot posts do not yet import and Slack @mentions are not currently supported.</p>"
/>
</div>
);
var uploadSection = (
<SettingUpload
title='Import from Slack (Beta)'
title={formatMessage(holders.importSlack)}
submit={this.doImportSlack}
helpText={uploadHelpText}
fileTypesAccepted='.zip'
@@ -56,19 +68,30 @@ export default class TeamImportTab extends React.Component {
break;
case 'in-progress':
messageSection = (
<p className='confirm-import alert alert-warning'><i className='fa fa-spinner fa-pulse'></i>{' Importing...'}</p>
<p className='confirm-import alert alert-warning'><i className='fa fa-spinner fa-pulse'></i>
<FormattedMessage
id='team_import_tab.importing'
defaultMessage=' Importing...'
/>
</p>
);
break;
case 'done':
messageSection = (
<p className='confirm-import alert alert-success'>
<i className='fa fa-check' />
{' Import successful: '}
<FormattedMessage
id='team_import_tab.successful'
defaultMessage=' Import successful: '
/>
<a
href={this.state.link}
download='MattermostImportSummary.txt'
>
{'View Summary'}
<FormattedMessage
id='team_import_tab.summary'
defaultMessage='View Summary'
/>
</a>
</p>
);
@@ -77,12 +100,18 @@ export default class TeamImportTab extends React.Component {
messageSection = (
<p className='confirm-import alert alert-warning'>
<i className='fa fa-warning' />
{' Import failure: '}
<FormattedMessage
id='team_import_tab.failure'
defaultMessage=' Import failure: '
/>
<a
href={this.state.link}
download='MattermostImportSummary.txt'
>
{'View Summary'}
<FormattedMessage
id='team_import_tab.summary'
defaultMessage='View Summary'
/>
</a>
</p>
);
@@ -102,13 +131,23 @@ export default class TeamImportTab extends React.Component {
<h4
className='modal-title'
ref='title'
><i className='modal-back'></i>{'Import'}</h4>
><i className='modal-back'></i>
<FormattedMessage
id='team_import_tab.import'
defaultMessage='Import'
/>
</h4>
</div>
<div
ref='wrapper'
className='user-settings'
>
<h3 className='tab-header'>{'Import'}</h3>
<h3 className='tab-header'>
<FormattedMessage
id='team_import_tab.import'
defaultMessage='Import'
/>
</h3>
<div className='divider-dark first'/>
{uploadSection}
<div className='divider-dark'/>
@@ -118,3 +157,9 @@ export default class TeamImportTab extends React.Component {
);
}
}
TeamImportTab.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(TeamImportTab);

15
web/react/components/team_members_modal.jsx
Просмотреть файл

@@ -4,6 +4,8 @@
import MemberListTeam from './member_list_team.jsx';
import TeamStore from '../stores/team_store.jsx';
import {FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class TeamMembersModal extends React.Component {
@@ -44,7 +46,13 @@ export default class TeamMembersModal extends React.Component {
onHide={this.props.onHide}
>
<Modal.Header closeButton={true}>
{team.display_name + ' Members'}
<FormattedMessage
id='team_member_modal.members'
defaultMessage='{team} Members'
values={{
team: team.display_name
}}
/>
</Modal.Header>
<Modal.Body ref='modalBody'>
<div className='team-member-list'>
@@ -57,7 +65,10 @@ export default class TeamMembersModal extends React.Component {
className='btn btn-default'
onClick={this.props.onHide}
>
{'Close'}
<FormattedMessage
id='team_member_modal.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>

34
web/react/components/team_settings_modal.jsx
Просмотреть файл

@@ -4,7 +4,24 @@
import SettingsSidebar from './settings_sidebar.jsx';
import TeamSettings from './team_settings.jsx';
export default class TeamSettingsModal extends React.Component {
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
generalTab: {
id: 'team_settings_modal.generalTab',
defaultMessage: 'General'
},
importTab: {
id: 'team_settings_modal.importTab',
defaultMessage: 'Import'
},
exportTab: {
id: 'team_settings_modal.exportTab',
defaultMessage: 'Export'
}
});
class TeamSettingsModal extends React.Component {
constructor(props) {
super(props);
@@ -36,12 +53,13 @@ export default class TeamSettingsModal extends React.Component {
this.setState({activeSection: section});
}
render() {
const {formatMessage} = this.props.intl;
const tabs = [];
tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'});
tabs.push({name: 'import', uiName: 'Import', icon: 'glyphicon glyphicon-upload'});
tabs.push({name: 'general', uiName: formatMessage(holders.generalTab), icon: 'glyphicon glyphicon-cog'});
tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'glyphicon glyphicon-upload'});
// To enable export uncomment this line
//tabs.push({name: 'export', uiName: 'Export', icon: 'glyphicon glyphicon-download'});
//tabs.push({name: 'export', uiName: formatMessage(holders.exportTab), icon: 'glyphicon glyphicon-download'});
return (
<div
@@ -67,7 +85,10 @@ export default class TeamSettingsModal extends React.Component {
className='modal-title'
ref='title'
>
{'Team Settings'}
<FormattedMessage
id='team_settings_modal.title'
defaultMessage='Team Settings'
/>
</h4>
</div>
<div className='modal-body'>
@@ -96,4 +117,7 @@ export default class TeamSettingsModal extends React.Component {
}
TeamSettingsModal.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(TeamSettingsModal);

2
web/react/components/unread_channel_indicator.jsx
Просмотреть файл

@@ -31,5 +31,5 @@ UnreadChannelIndicator.defaultProps = {
UnreadChannelIndicator.propTypes = {
show: React.PropTypes.bool,
extraClass: React.PropTypes.string,
text: React.PropTypes.string
text: React.PropTypes.object
};