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

Merge pull request #2051 from ZBoxApp/PLT-7-channel-modals

Просмотр исходного кода 
PLT-7: Refactoring frontend (chunk 10)
Этот коммит содержится в:
Joram Wilander
2016-02-03 07:37:27 -05:00
родитель 5be7d00230 d424c9eaf1
Коммит 0571953755
22 изменённых файлов: 887 добавлений и 153 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@@ -24,8 +24,10 @@ import * as TextFormatting from '../utils/text_formatting.jsx';
import * as AsyncClient from '../utils/async_client.jsx';
import * as Client from '../utils/client.jsx';
import Constants from '../utils/constants.jsx';
const ActionTypes = Constants.ActionTypes;
import {FormattedMessage} from 'mm-intl';
const ActionTypes = Constants.ActionTypes;
const Popover = ReactBootstrap.Popover;
const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Tooltip = ReactBootstrap.Tooltip;
@@ -124,7 +126,14 @@ export default class ChannelHeader extends React.Component {
}
const channel = this.state.channel;
const recentMentionsTooltip = <Tooltip id='recentMentionsTooltip'>{'Recent Mentions'}</Tooltip>;
const recentMentionsTooltip = (
<Tooltip id='recentMentionsTooltip'>
<FormattedMessage
id='channel_header.recentMentions'
defaultMessage='Recent Mentions'
/>
</Tooltip>
);
const popoverContent = (
<Popover
id='hader-popover'
@@ -157,9 +166,19 @@ export default class ChannelHeader extends React.Component {
}
}
let channelTerm = 'Channel';
if (channel.type === 'P') {
channelTerm = 'Group';
let channelTerm = (
<FormattedMessage
id='channel_header.channel'
defaultMessage='Channel'
/>
);
if (channel.type === Constants.PRIVATE_CHANNEL) {
channelTerm = (
<FormattedMessage
id='channel_header.group'
defaultMessage='Group'
/>
);
}
const dropdownContents = [];
@@ -174,7 +193,10 @@ export default class ChannelHeader extends React.Component {
dialogType={EditChannelHeaderModal}
dialogProps={{channel}}
>
{'Set Channel Header...'}
<FormattedMessage
id='channel_header.channelHeader'
defaultMessage='Set Channel Header...'
/>
</ToggleModalButton>
</li>
);
@@ -189,7 +211,10 @@ export default class ChannelHeader extends React.Component {
dialogType={ChannelInfoModal}
dialogProps={{channel}}
>
{'View Info'}
<FormattedMessage
id='channel_header.viewInfo'
defaultMessage='View Info'
/>
</ToggleModalButton>
</li>
);
@@ -205,7 +230,10 @@ export default class ChannelHeader extends React.Component {
dialogType={ChannelInviteModal}
dialogProps={{channel}}
>
{'Add Members'}
<FormattedMessage
id='chanel_header.addMembers'
defaultMessage='Add Members'
/>
</ToggleModalButton>
</li>
);
@@ -221,7 +249,10 @@ export default class ChannelHeader extends React.Component {
href='#'
onClick={() => this.setState({showMembersModal: true})}
>
{'Manage Members'}
<FormattedMessage
id='channel_header.manageMembers'
defaultMessage='Manage Members'
/>
</a>
</li>
);
@@ -238,7 +269,13 @@ export default class ChannelHeader extends React.Component {
dialogType={EditChannelHeaderModal}
dialogProps={{channel}}
>
{`Set ${channelTerm} Header...`}
<FormattedMessage
id='channel_header.setHeader'
defaultMessage='Set {term} Header...'
values={{
term: (channelTerm)
}}
/>
</ToggleModalButton>
</li>
);
@@ -252,7 +289,13 @@ export default class ChannelHeader extends React.Component {
href='#'
onClick={() => this.setState({showEditChannelPurposeModal: true})}
>
{'Set '}{channelTerm}{' Purpose...'}
<FormattedMessage
id='channel_header.setPurpose'
defaultMessage='Set {term} Purpose...'
values={{
term: (channelTerm)
}}
/>
</a>
</li>
);
@@ -266,7 +309,10 @@ export default class ChannelHeader extends React.Component {
dialogType={ChannelNotificationsModal}
dialogProps={{channel}}
>
{'Notification Preferences'}
<FormattedMessage
id='channel_header.notificationPreferences'
defaultMessage='Notification Preferences'
/>
</ToggleModalButton>
</li>
);
@@ -286,7 +332,13 @@ export default class ChannelHeader extends React.Component {
data-name={channel.name}
data-channelid={channel.id}
>
{'Rename '}{channelTerm}{'...'}
<FormattedMessage
id='channel_header.rename'
defaultMessage='Rename {term}...'
values={{
term: (channelTerm)
}}
/>
</a>
</li>
);
@@ -302,7 +354,13 @@ export default class ChannelHeader extends React.Component {
dialogType={DeleteChannelModal}
dialogProps={{channel}}
>
{'Delete '}{channelTerm}{'...'}
<FormattedMessage
id='channel_header.delete'
defaultMessage='Delete {term}...'
values={{
term: (channelTerm)
}}
/>
</ToggleModalButton>
</li>
);
@@ -320,7 +378,13 @@ export default class ChannelHeader extends React.Component {
href='#'
onClick={this.handleLeave}
>
{'Leave '}{channelTerm}
<FormattedMessage
id='channel_header.leave'
defaultMessage='Leave {term}'
values={{
term: (channelTerm)
}}
/>
</a>
</li>
);

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

@@ -2,17 +2,28 @@
// See License.txt for license information.
import * as Utils from '../utils/utils.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class ChannelInfoModal extends React.Component {
const holders = defineMessages({
notFound: {
id: 'channel_info.notFound',
defaultMessage: 'No Channel Found'
}
});
class ChannelInfoModal extends React.Component {
render() {
const {formatMessage} = this.props.intl;
let channel = this.props.channel;
if (!channel) {
channel = {
display_name: 'No Channel Found',
name: 'No Channel Found',
purpose: 'No Channel Found',
id: 'No Channel Found'
display_name: formatMessage(holders.notFound),
name: formatMessage(holders.notFound),
purpose: formatMessage(holders.notFound),
id: formatMessage(holders.notFound)
};
}
@@ -28,19 +39,39 @@ export default class ChannelInfoModal extends React.Component {
</Modal.Header>
<Modal.Body ref='modalBody'>
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Channel Name:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='channel_info.name'
defaultMessage='Channel Name:'
/>
</div>
<div className='col-sm-9'>{channel.display_name}</div>
</div>
<div className='row form-group'>
<div className='col-sm-3 info__label'>{'Channel URL:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='channel_info.url'
defaultMessage='Channel URL:'
/>
</div>
<div className='col-sm-9'>{channelURL}</div>
</div>
<div className='row'>
<div className='col-sm-3 info__label'>{'Channel ID:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='channel_info.id'
defaultMessage='Channel ID:'
/>
</div>
<div className='col-sm-9'>{channel.id}</div>
</div>
<div className='row'>
<div className='col-sm-3 info__label'>{'Channel Purpose:'}</div>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='channel_info.purpose'
defaultMessage='Channel Purpose:'
/>
</div>
<div className='col-sm-9'>{channel.purpose}</div>
</div>
</Modal.Body>
@@ -50,7 +81,10 @@ export default class ChannelInfoModal extends React.Component {
className='btn btn-default'
onClick={this.props.onHide}
>
{'Close'}
<FormattedMessage
id='channel_info.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>
@@ -59,7 +93,10 @@ export default class ChannelInfoModal extends React.Component {
}
ChannelInfoModal.propTypes = {
intl: intlShape.isRequired,
show: React.PropTypes.bool.isRequired,
onHide: React.PropTypes.func.isRequired,
channel: React.PropTypes.object.isRequired
};
export default injectIntl(ChannelInfoModal);

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

@@ -11,6 +11,8 @@ import * as Utils from '../utils/utils.jsx';
import * as Client from '../utils/client.jsx';
import * as AsyncClient from '../utils/async_client.jsx';
import {FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class ChannelInviteModal extends React.Component {
@@ -154,7 +156,13 @@ export default class ChannelInviteModal extends React.Component {
onHide={this.props.onHide}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'Add New Members to '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title>
<Modal.Title>
<FormattedMessage
id='channel_invite.addNewMembers'
defaultMessage='Add New Members to '
/>
<span className='name'>{this.props.channel.display_name}</span>
</Modal.Title>
</Modal.Header>
<Modal.Body
ref='modalBody'
@@ -168,7 +176,10 @@ export default class ChannelInviteModal extends React.Component {
className='btn btn-default'
onClick={this.props.onHide}
>
{'Close'}
<FormattedMessage
id='channel_invite.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>

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

@@ -12,6 +12,8 @@ import * as AsyncClient from '../utils/async_client.jsx';
import * as Client from '../utils/client.jsx';
import * as Utils from '../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class ChannelMembersModal extends React.Component {
@@ -191,7 +193,13 @@ export default class ChannelMembersModal extends React.Component {
onHide={this.props.onModalDismissed}
>
<Modal.Header closeButton={true}>
<Modal.Title><span className='name'>{this.props.channel.display_name}</span>{' Members'}</Modal.Title>
<Modal.Title>
<span className='name'>{this.props.channel.display_name}</span>
<FormattedMessage
id='channel_memebers_modal.members'
defaultMessage=' Members'
/>
</Modal.Title>
<a
className='btn btn-md btn-primary'
href='#'
@@ -200,7 +208,11 @@ export default class ChannelMembersModal extends React.Component {
this.props.onModalDismissed();
}}
>
<i className='glyphicon glyphicon-envelope'/>{' Add New Members'}
<i className='glyphicon glyphicon-envelope'/>
<FormattedMessage
id='channel_members_modal.addNew'
defaultMessage=' Add New Members'
/>
</a>
</Modal.Header>
<Modal.Body
@@ -215,7 +227,10 @@ export default class ChannelMembersModal extends React.Component {
className='btn btn-default'
onClick={this.props.onModalDismissed}
>
{'Close'}
<FormattedMessage
id='channel_members_modal.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>

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

@@ -9,6 +9,8 @@ import * as Client from '../utils/client.jsx';
import UserStore from '../stores/user_store.jsx';
import ChannelStore from '../stores/channel_store.jsx';
import {FormattedMessage} from 'mm-intl';
export default class ChannelNotificationsModal extends React.Component {
constructor(props) {
super(props);
@@ -97,13 +99,35 @@ export default class ChannelNotificationsModal extends React.Component {
let globalNotifyLevelName;
if (globalNotifyLevel === 'all') {
globalNotifyLevelName = 'For all activity';
globalNotifyLevelName = (
<FormattedMessage
id='channel_notifications.allActivity'
defaultMessage='For all activity'
/>
);
} else if (globalNotifyLevel === 'mention') {
globalNotifyLevelName = 'Only for mentions';
globalNotifyLevelName = (
<FormattedMessage
id='channel_notifications.onlyMentions'
defaultMessage='Only for mentions'
/>
);
} else {
globalNotifyLevelName = 'Never';
globalNotifyLevelName = (
<FormattedMessage
id='channel_notifications.never'
defaultMessage='Never'
/>
);
}
const sendDesktop = (
<FormattedMessage
id='channel_notifications.sendDesktop'
defaultMessage='Send desktop notifications'
/>
);
if (this.state.activeSection === 'desktop') {
var notifyActive = [false, false, false, false];
if (this.state.notifyLevel === 'default') {
@@ -127,7 +151,13 @@ export default class ChannelNotificationsModal extends React.Component {
checked={notifyActive[0]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'default')}
/>
{`Global default (${globalNotifyLevelName})`}
<FormattedMessage
id='channel_notifications.globalDefault'
defaultMessage='Global default ({notifyLevel}'
values={{
notifyLevel: (globalNotifyLevelName)
}}
/>
</label>
<br/>
</div>
@@ -138,7 +168,7 @@ export default class ChannelNotificationsModal extends React.Component {
checked={notifyActive[1]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'all')}
/>
{'For all activity'}
<FormattedMessage id='channel_notifications.allActivity' />
</label>
<br/>
</div>
@@ -149,7 +179,7 @@ export default class ChannelNotificationsModal extends React.Component {
checked={notifyActive[2]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')}
/>
{'Only for mentions'}
<FormattedMessage id='channel_notifications.onlyMentions' />
</label>
<br/>
</div>
@@ -160,7 +190,7 @@ export default class ChannelNotificationsModal extends React.Component {
checked={notifyActive[3]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'none')}
/>
{'Never'}
<FormattedMessage id='channel_notifications.never' />
</label>
</div>
</div>
@@ -174,13 +204,16 @@ export default class ChannelNotificationsModal extends React.Component {
const extraInfo = (
<span>
{'Selecting an option other than "Default" will override the global notification settings. Desktop notifications are available on Firefox, Safari, and Chrome.'}
<FormattedMessage
id='channel_notifications.override'
defaultMessage='Selecting an option other than "Default" will override the global notification settings. Desktop notifications are available on Firefox, Safari, and Chrome.'
/>
</span>
);
return (
<SettingItemMax
title='Send desktop notifications'
title={sendDesktop}
inputs={inputs}
submit={this.handleSubmitNotifyLevel}
server_error={serverError}
@@ -192,13 +225,20 @@ export default class ChannelNotificationsModal extends React.Component {
var describe;
if (this.state.notifyLevel === 'default') {
describe = `Global default (${globalNotifyLevelName})`;
describe = (
<FormattedMessage
id='channel_notifications.globalDefault'
values={{
notifyLevel: (globalNotifyLevelName)
}}
/>
);
} else if (this.state.notifyLevel === 'mention') {
describe = 'Only for mentions';
describe = (<FormattedMessage id='channel_notifications.onlyMentions' />);
} else if (this.state.notifyLevel === 'all') {
describe = 'For all activity';
describe = (<FormattedMessage id='channel_notifications.allActivity' />);
} else {
describe = 'Never';
describe = (<FormattedMessage id='channel_notifications.never' />);
}
handleUpdateSection = function updateSection(e) {
@@ -208,7 +248,7 @@ export default class ChannelNotificationsModal extends React.Component {
return (
<SettingItemMin
title='Send desktop notifications'
title={sendDesktop}
describe={describe}
updateSection={handleUpdateSection}
/>
@@ -250,6 +290,12 @@ export default class ChannelNotificationsModal extends React.Component {
createMarkUnreadLevelSection(serverError) {
let content;
const markUnread = (
<FormattedMessage
id='channel_notifications.markUnread'
defaultMessage='Mark Channel Unread'
/>
);
if (this.state.activeSection === 'markUnreadLevel') {
const inputs = [(
<div key='channel-notification-unread-radio'>
@@ -260,7 +306,10 @@ export default class ChannelNotificationsModal extends React.Component {
checked={this.state.markUnreadLevel === 'all'}
onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'all')}
/>
{'For all unread messages'}
<FormattedMessage
id='channel_notifications.allUnread'
defaultMessage='For all unread messages'
/>
</label>
<br />
</div>
@@ -271,7 +320,7 @@ export default class ChannelNotificationsModal extends React.Component {
checked={this.state.markUnreadLevel === 'mention'}
onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'mention')}
/>
{'Only for mentions'}
<FormattedMessage id='channel_notifications.onlyMentions' />
</label>
<br />
</div>
@@ -284,11 +333,18 @@ export default class ChannelNotificationsModal extends React.Component {
e.preventDefault();
}.bind(this);
const extraInfo = <span>{'The channel name is bolded in the sidebar when there are unread messages. Selecting "Only for mentions" will bold the channel only when you are mentioned.'}</span>;
const extraInfo = (
<span>
<FormattedMessage
id='channel_notifications.unreadInfo'
defaultMessage='The channel name is bolded in the sidebar when there are unread messages. Selecting "Only for mentions" will bold the channel only when you are mentioned.'
/>
</span>
);
content = (
<SettingItemMax
title='Mark Channel Unread'
title={markUnread}
inputs={inputs}
submit={this.handleSubmitMarkUnreadLevel}
server_error={serverError}
@@ -300,9 +356,14 @@ export default class ChannelNotificationsModal extends React.Component {
let describe;
if (!this.state.markUnreadLevel || this.state.markUnreadLevel === 'all') {
describe = 'For all unread messages';
describe = (
<FormattedMessage
id='channel_notifications.allUnread'
defaultMessage='For all unread messages'
/>
);
} else {
describe = 'Only for mentions';
describe = (<FormattedMessage id='channel_notifications.onlyMentions' />);
}
const handleUpdateSection = function handleUpdateSection(e) {
@@ -312,7 +373,7 @@ export default class ChannelNotificationsModal extends React.Component {
content = (
<SettingItemMin
title='Mark Channel Unread'
title={markUnread}
describe={describe}
updateSection={handleUpdateSection}
/>
@@ -335,7 +396,13 @@ export default class ChannelNotificationsModal extends React.Component {
onHide={this.props.onHide}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title>
<Modal.Title>
<FormattedMessage
id='channel_notifications.preferences'
defaultMessage='Notification Preferences for '
/>
<span className='name'>{this.props.channel.display_name}</span>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className='settings-table'>

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

@@ -5,7 +5,9 @@ import * as AsyncClient from '../utils/async_client.jsx';
import * as Client from '../utils/client.jsx';
const Modal = ReactBootstrap.Modal;
import TeamStore from '../stores/team_store.jsx';
import * as Utils from '../utils/utils.jsx';
import Constants from '../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
export default class DeleteChannelModal extends React.Component {
constructor(props) {
@@ -32,7 +34,20 @@ export default class DeleteChannelModal extends React.Component {
}
render() {
const channelTerm = Utils.getChannelTerm(this.props.channel.type).toLowerCase();
let channelTerm = (
<FormattedMessage
id='delete_channel.channel'
defaultMessage='channel'
/>
);
if (this.props.channel.type === Constants.PRIVATE_CHANNEL) {
channelTerm = (
<FormattedMessage
id='delete_channel.group'
defaultMessage='group'
/>
);
}
return (
<Modal
@@ -40,10 +55,22 @@ export default class DeleteChannelModal extends React.Component {
onHide={this.props.onHide}
>
<Modal.Header closeButton={true}>
<h4 className='modal-title'>{'Confirm DELETE Channel'}</h4>
<h4 className='modal-title'>
<FormattedMessage
id='delete_channel.confirm'
defaultMessage='Confirm DELETE Channel'
/>
</h4>
</Modal.Header>
<Modal.Body>
{`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`}
<FormattedMessage
id='delete_channel.question'
defaultMessage='Are you sure you wish to delete the {display_name} {term}?'
values={{
display_name: this.props.channel.display_name,
term: (channelTerm)
}}
/>
</Modal.Body>
<Modal.Footer>
<button
@@ -51,7 +78,10 @@ export default class DeleteChannelModal extends React.Component {
className='btn btn-default'
onClick={this.props.onHide}
>
{'Cancel'}
<FormattedMessage
id='delete_channel.cancel'
defaultMessage='Cancel'
/>
</button>
<button
type='button'
@@ -59,7 +89,10 @@ export default class DeleteChannelModal extends React.Component {
data-dismiss='modal'
onClick={this.handleDelete}
>
{'Delete'}
<FormattedMessage
id='delete_channel.del'
defaultMessage='Delete'
/>
</button>
</Modal.Footer>
</Modal>

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

@@ -9,6 +9,9 @@ import * as Utils from '../utils/utils.jsx';
import * as AsyncClient from '../utils/async_client.jsx';
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import Constants from '../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
var ActionTypes = Constants.ActionTypes;
export default class DeletePostModal extends React.Component {
@@ -128,10 +131,28 @@ export default class DeletePostModal extends React.Component {
var commentWarning = '';
if (this.state.commentCount > 0) {
commentWarning = 'This post has ' + this.state.commentCount + ' comment(s) on it.';
commentWarning = (
<FormattedMessage
id='delete_post.warning'
defaultMessage='This post has {count} comment(s) on it.'
values={{
count: this.state.commentCount
}}
/>
);
}
const postTerm = Utils.getPostTerm(this.state.post);
const postTerm = this.state.post.root_id ? (
<FormattedMessage
id='delete_post.comment'
defaultMessage='Comment'
/>
) : (
<FormattedMessage
id='delete_post.post'
defaultMessage='Post'
/>
);
return (
<Modal
@@ -139,10 +160,24 @@ export default class DeletePostModal extends React.Component {
onHide={this.handleHide}
>
<Modal.Header closeButton={true}>
<Modal.Title>{`Confirm ${postTerm} Delete`}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='delete_post.confirm'
defaultMessage='Confirm {term} Delete'
values={{
term: (postTerm)
}}
/>
</Modal.Title>
</Modal.Header>
<Modal.Body>
{`Are you sure you want to delete this ${postTerm.toLowerCase()}?`}
<FormattedMessage
id='delete_post.question'
defaultMessage='Are you sure you want to delete this ${term}?'
values={{
term: (postTerm)
}}
/>
<br />
<br />
{commentWarning}
@@ -154,7 +189,10 @@ export default class DeletePostModal extends React.Component {
className='btn btn-default'
onClick={this.handleHide}
>
{'Cancel'}
<FormattedMessage
id='delete_post.cancel'
defaultMessage='Cancel'
/>
</button>
<button
ref='deletePostBtn'
@@ -162,7 +200,10 @@ export default class DeletePostModal extends React.Component {
className='btn btn-danger'
onClick={this.handleDelete}
>
{'Delete'}
<FormattedMessage
id='delete_post.del'
defaultMessage='Delete'
/>
</button>
</Modal.Footer>
</Modal>

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

@@ -6,9 +6,18 @@ import * as Client from '../utils/client.jsx';
import Constants from '../utils/constants.jsx';
import * as Utils from '../utils/utils.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
export default class EditChannelHeaderModal extends React.Component {
const holders = defineMessages({
error: {
id: 'edit_channel_header_modal.error',
defaultMessage: 'This channel header is too long, please enter a shorter one'
}
});
class EditChannelHeaderModal extends React.Component {
constructor(props) {
super(props);
@@ -64,8 +73,8 @@ export default class EditChannelHeaderModal extends React.Component {
});
},
(err) => {
if (err.message === 'Invalid channel_header parameter') {
this.setState({serverError: 'This channel header is too long, please enter a shorter one'});
if (err.id === 'api.context.invalid_param.app_error') {
this.setState({serverError: this.props.intl.formatMessage(holders.error)});
} else {
this.setState({serverError: err.message});
}
@@ -99,10 +108,23 @@ export default class EditChannelHeaderModal extends React.Component {
onHide={this.onHide}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'Edit Header for ' + this.props.channel.display_name}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='edit_channel_header_modal.title'
defaultMessage='Edit Header for {channel}'
values={{
channel: this.props.channel.display_name
}}
/>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{'Edit the text appearing next to the channel name in the channel header.'}</p>
<p>
<FormattedMessage
id='edit_channel_header_modal.description'
defaultMessage='Edit the text appearing next to the channel name in the channel header.'
/>
</p>
<textarea
ref='textarea'
className='form-control no-resize'
@@ -120,14 +142,20 @@ export default class EditChannelHeaderModal extends React.Component {
className='btn btn-default'
onClick={this.onHide}
>
{'Cancel'}
<FormattedMessage
id='edit_channel_header_modal.cancel'
defaultMessage='Cancel'
/>
</button>
<button
type='button'
className='btn btn-primary'
onClick={this.handleSubmit}
>
{'Save'}
<FormattedMessage
id='edit_channel_header_modal.save'
defaultMessage='Save'
/>
</button>
</Modal.Footer>
</Modal>
@@ -136,7 +164,10 @@ export default class EditChannelHeaderModal extends React.Component {
}
EditChannelHeaderModal.propTypes = {
intl: intlShape.isRequired,
show: React.PropTypes.bool.isRequired,
onHide: React.PropTypes.func.isRequired,
channel: React.PropTypes.object.isRequired
};
export default injectIntl(EditChannelHeaderModal);

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

@@ -3,10 +3,19 @@
import * as AsyncClient from '../utils/async_client.jsx';
import * as Client from '../utils/client.jsx';
import * as Utils from '../utils/utils.jsx';
import Constants from '../utils/constants.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const Modal = ReactBootstrap.Modal;
const holders = defineMessages({
error: {
id: 'edit_channel_purpose_modal.error',
defaultMessage: 'This channel purpose is too long, please enter a shorter one'
}
});
export default class EditChannelPurposeModal extends React.Component {
constructor(props) {
super(props);
@@ -48,8 +57,8 @@ export default class EditChannelPurposeModal extends React.Component {
this.handleHide();
},
(err) => {
if (err.message === 'Invalid channel_purpose parameter') {
this.setState({serverError: 'This channel purpose is too long, please enter a shorter one'});
if (err.id === 'api.context.invalid_param.app_error') {
this.setState({serverError: this.props.intl.formatMessage(holders.error)});
} else {
this.setState({serverError: err.message});
}
@@ -72,9 +81,39 @@ export default class EditChannelPurposeModal extends React.Component {
);
}
let title = <span>{'Edit Purpose'}</span>;
let title = (
<span>
<FormattedMessage
id='edit_channel_purpose_modal.title1'
defaultMessage='Edit Purpose'
/>
</span>
);
if (this.props.channel.display_name) {
title = <span>{'Edit Purpose for '}<span className='name'>{this.props.channel.display_name}</span></span>;
title = (
<span>
<FormattedMessage
id='edit_channel_purpose_modal.title2'
defaultMessage='Edit Purpose for '
/>
<span className='name'>{this.props.channel.display_name}</span>
</span>
);
}
let channelType = (
<FormattedMessage
id='edit_channel_purpose_modal.channel'
defaultMessage='Channel'
/>
);
if (this.props.channel.type === Constants.PRIVATE_CHANNEL) {
channelType = (
<FormattedMessage
id='edit_channel_purpose_modal.group'
defaultMessage='Group'
/>
);
}
return (
@@ -90,7 +129,15 @@ export default class EditChannelPurposeModal extends React.Component {
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{`Describe how this ${Utils.getChannelTerm(this.props.channel.channelType)} should be used. This text appears in the channel list in the "More..." menu and helps others decide whether to join.`}</p>
<p>
<FormattedMessage
id='edit_channel_purpose_modal.body'
defaultMessage='Describe how this {type} should be used. This text appears in the channel list in the "More..." menu and helps others decide whether to join.'
values={{
type: (channelType)
}}
/>
</p>
<textarea
ref='purpose'
className='form-control no-resize'
@@ -106,14 +153,20 @@ export default class EditChannelPurposeModal extends React.Component {
className='btn btn-default'
onClick={this.handleHide}
>
{'Cancel'}
<FormattedMessage
id='edit_channel_purpose_modal.cancel'
defaultMessage='Cancel'
/>
</button>
<button
type='button'
className='btn btn-primary'
onClick={this.handleSave}
>
{'Save'}
<FormattedMessage
id='edit_channel_purpose_modal.save'
defaultMessage='Save'
/>
</button>
</Modal.Footer>
</Modal>
@@ -122,7 +175,10 @@ export default class EditChannelPurposeModal extends React.Component {
}
EditChannelPurposeModal.propTypes = {
intl: intlShape.isRequired,
show: React.PropTypes.bool.isRequired,
channel: React.PropTypes.object,
onModalDismissed: React.PropTypes.func.isRequired
};
export default injectIntl(EditChannelPurposeModal);

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

@@ -10,9 +10,19 @@ import PostStore from '../stores/post_store.jsx';
import PreferenceStore from '../stores/preference_store.jsx';
import Constants from '../utils/constants.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
var KeyCodes = Constants.KeyCodes;
export default class EditPostModal extends React.Component {
const holders = defineMessages({
editPost: {
id: 'edit_post.editPost',
defaultMessage: 'Edit the post...'
}
});
class EditPostModal extends React.Component {
constructor() {
super();
@@ -151,7 +161,15 @@ export default class EditPostModal extends React.Component {
>
<span aria-hidden='true'>&times;</span>
</button>
<h4 className='modal-title'>Edit {this.state.title}</h4>
<h4 className='modal-title'>
<FormattedMessage
id='edit_post.edit'
defaultMessage='Edit {title}'
values={{
title: this.state.title
}}
/>
</h4>
</div>
<div className='edit-modal-body modal-body'>
<Textbox
@@ -159,7 +177,7 @@ export default class EditPostModal extends React.Component {
onKeyPress={this.handleEditKeyPress}
onKeyDown={this.handleKeyDown}
messageText={this.state.editText}
createMessage='Edit the post...'
createMessage={this.props.intl.formatMessage(holders.editPost)}
supportsCommands={false}
id='edit_textbox'
ref='editbox'
@@ -172,14 +190,20 @@ export default class EditPostModal extends React.Component {
className='btn btn-default'
data-dismiss='modal'
>
Cancel
<FormattedMessage
id='edit_post.cancel'
defaultMessage='Cancel'
/>
</button>
<button
type='button'
className='btn btn-primary'
onClick={this.handleEdit}
>
Save
<FormattedMessage
id='edit_post.save'
defaultMessage='Save'
/>
</button>
</div>
</div>
@@ -188,3 +212,9 @@ export default class EditPostModal extends React.Component {
);
}
}
EditPostModal.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(EditPostModal);

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

@@ -4,6 +4,8 @@
import UserStore from '../stores/user_store.jsx';
import * as Utils from '../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
export default class MemberListItem extends React.Component {
constructor(props) {
super(props);
@@ -38,7 +40,10 @@ export default class MemberListItem extends React.Component {
className='btn btn-sm btn-primary'
>
<i className='glyphicon glyphicon-envelope'/>
{' Add'}
<FormattedMessage
id='member_item.add'
defaultMessage=' Add'
/>
</a>
);
} else if (isAdmin && !isMemberAdmin && (member.id !== UserStore.getCurrentId())) {
@@ -53,7 +58,10 @@ export default class MemberListItem extends React.Component {
role='menuitem'
onClick={self.handleMakeAdmin}
>
Make Admin
<FormattedMessage
id='member_item.makeAdmin'
defaultMessage='Make Admin'
/>
</a>
</li>);
}
@@ -67,7 +75,10 @@ export default class MemberListItem extends React.Component {
role='menuitem'
onClick={self.handleRemove}
>
Remove Member
<FormattedMessage
id='member_item.removeMember'
defaultMessage='Remove Member'
/>
</a>
</li>);
}
@@ -82,7 +93,14 @@ export default class MemberListItem extends React.Component {
aria-expanded='true'
>
<span className='fa fa-pencil'></span>
<span className='text-capitalize'>{member.roles || 'Member'} </span>
<span className='text-capitalize'>
{member.roles ||
<FormattedMessage
id='member_item.member'
defaultMessage='Member'
/>
}
</span>
</a>
<ul
className='dropdown-menu member-menu'
@@ -94,7 +112,7 @@ export default class MemberListItem extends React.Component {
</div>
);
} else {
invite = <div className='member-role text-capitalize'><span className='fa fa-pencil hidden'></span>{member.roles || 'Member'}</div>;
invite = (<div className='member-role text-capitalize'><span className='fa fa-pencil hidden'></span>{member.roles || <FormattedMessage id='member_item.member' />}</div>);
}
return (

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

@@ -106,9 +106,9 @@ class MsgTyping extends React.Component {
<FormattedMessage
id='msg_typing.areTyping'
defaultMessage='{users} and {last} are typing...'
vaues={{
users: users.join(', '),
last: last
values={{
users: (users.join(', ')),
last: (last)
}}
/>
);

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

@@ -9,6 +9,8 @@ import Constants from '../utils/constants.jsx';
import ChannelStore from '../stores/channel_store.jsx';
import {FormattedMessage} from 'mm-intl';
export default class PopoverListMembers extends React.Component {
constructor(props) {
super(props);
@@ -92,7 +94,10 @@ export default class PopoverListMembers extends React.Component {
className='btn-message'
onClick={(e) => this.handleShowDirectChannel(m, e)}
>
{'Message'}
<FormattedMessage
id='members_popover.msg'
defaultMessage='Message'
/>
</a>
);
}
@@ -147,6 +152,12 @@ export default class PopoverListMembers extends React.Component {
countText = count.toString();
}
const title = (
<FormattedMessage
id='members_popover.title'
defaultMessage='Members'
/>
);
return (
<div>
<div
@@ -171,7 +182,7 @@ export default class PopoverListMembers extends React.Component {
>
<Popover
ref='memebersPopover'
title='Members'
title={title}
id='member-list-popover'
>
{popoverHtml}

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

@@ -4,6 +4,9 @@
import UserStore from '../stores/user_store.jsx';
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import Constants from '../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
var ActionTypes = Constants.ActionTypes;
export default class PostDeletedModal extends React.Component {
@@ -65,11 +68,19 @@ export default class PostDeletedModal extends React.Component {
className='modal-title'
id='myModalLabel'
>
{'Comment could not be posted'}
<FormattedMessage
id='post_delete.notPosted'
defaultMessage='Comment could not be posted'
/>
</h4>
</div>
<div className='modal-body'>
<p>{'Someone deleted the message on which you tried to post a comment.'}</p>
<p>
<FormattedMessage
id='post_delete.someone'
defaultMessage='Someone deleted the message on which you tried to post a comment.'
/>
</p>
</div>
<div className='modal-footer'>
<button
@@ -77,7 +88,10 @@ export default class PostDeletedModal extends React.Component {
className='btn btn-primary'
data-dismiss='modal'
>
{'Okay'}
<FormattedMessage
id='post_delete.okay'
defaultMessage='Okay'
/>
</button>
</div>
</div>

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

@@ -6,6 +6,8 @@ import UserStore from '../stores/user_store.jsx';
import BrowserStore from '../stores/browser_store.jsx';
import * as utils from '../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
export default class RemovedFromChannelModal extends React.Component {
constructor(props) {
super(props);
@@ -49,12 +51,22 @@ export default class RemovedFromChannelModal extends React.Component {
render() {
var currentUser = UserStore.getCurrentUser();
var channelName = 'the channel';
var channelName = (
<FormattedMessage
id='removed_channel.channelName'
defaultMessage='the channel'
/>
);
if (this.state.channelName) {
channelName = this.state.channelName;
}
var remover = 'Someone';
var remover = (
<FormattedMessage
id='removed_channel.someone'
defaultMessage='Someone'
/>
);
if (this.state.remover) {
remover = this.state.remover;
}
@@ -78,17 +90,36 @@ export default class RemovedFromChannelModal extends React.Component {
data-dismiss='modal'
aria-label='Close'
><span aria-hidden='true'>&times;</span></button>
<h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4>
<h4 className='modal-title'>
<FormattedMessage
id='removed_channel.from'
defaultMessage='Removed from '
/>
<span className='name'>{channelName}</span></h4>
</div>
<div className='modal-body'>
<p>{remover} removed you from {channelName}</p>
<p>
<FormattedMessage
id='removed_channel.remover'
defaultMessage='{remover} removed you from {channel}'
values={{
remover: (remover),
channel: (channelName)
}}
/>
</p>
</div>
<div className='modal-footer'>
<button
type='button'
className='btn btn-primary'
data-dismiss='modal'
>Okay</button>
>
<FormattedMessage
id='removed_channel.okay'
defaultMessage='Okay'
/>
</button>
</div>
</div>
</div>

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

@@ -7,6 +7,39 @@ import * as AsyncClient from '../utils/async_client.jsx';
import ChannelStore from '../stores/channel_store.jsx';
import Constants from '../utils/constants.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
required: {
id: 'rename_channel.required',
defaultMessage: 'This field is required'
},
maxLength: {
id: 'rename_channel.maxLength',
defaultMessage: 'This field must be less than 22 characters'
},
lowercase: {
id: 'rename_channel.lowercase',
defaultMessage: 'Must be lowercase alphanumeric characters'
},
handle: {
id: 'rename_channel.handle',
defaultMessage: 'Handle'
},
defaultError: {
id: 'rename_channel.defaultError',
defaultMessage: ' - Cannot be changed for the default channel'
},
displayNameHolder: {
id: 'rename_channel.displayNameHolder',
defaultMessage: 'Enter display name'
},
handleHolder: {
id: 'rename_channel.handleHolder',
defaultMessage: 'lowercase alphanumeric&#39;s only'
}
});
export default class RenameChannelModal extends React.Component {
constructor(props) {
super(props);
@@ -41,13 +74,14 @@ export default class RenameChannelModal extends React.Component {
const oldName = channel.name;
const oldDisplayName = channel.displayName;
const state = {serverError: ''};
const {formatMessage} = this.props.intl;
channel.display_name = this.state.displayName.trim();
if (!channel.display_name) {
state.displayNameError = 'This field is required';
state.displayNameError = formatMessage(holders.required);
state.invalid = true;
} else if (channel.display_name.length > 22) {
state.displayNameError = 'This field must be less than 22 characters';
state.displayNameError = formatMessage(holders.maxLength);
state.invalid = true;
} else {
state.displayNameError = '';
@@ -55,17 +89,17 @@ export default class RenameChannelModal extends React.Component {
channel.name = this.state.channelName.trim();
if (!channel.name) {
state.nameError = 'This field is required';
state.nameError = formatMessage(holders.required);
state.invalid = true;
} else if (channel.name.length > 22) {
state.nameError = 'This field must be less than 22 characters';
state.nameError = formatMessage(holders.maxLength);
state.invalid = true;
} else {
const cleanedName = Utils.cleanUpUrlable(channel.name);
if (cleanedName === channel.name) {
state.nameError = '';
} else {
state.nameError = 'Must be lowercase alphanumeric characters';
state.nameError = formatMessage(holders.lowercase);
state.invalid = true;
}
}
@@ -153,11 +187,13 @@ export default class RenameChannelModal extends React.Component {
serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
}
let handleInputLabel = 'Handle';
const {formatMessage} = this.props.intl;
let handleInputLabel = formatMessage(holders.handle);
let handleInputClass = 'form-control';
let readOnlyHandleInput = false;
if (this.state.channelName === Constants.DEFAULT_CHANNEL) {
handleInputLabel += ' - Cannot be changed for the default channel';
handleInputLabel += formatMessage(holders.defaultError);
handleInputClass += ' disabled-input';
readOnlyHandleInput = true;
}
@@ -180,14 +216,29 @@ export default class RenameChannelModal extends React.Component {
data-dismiss='modal'
>
<span aria-hidden='true'>{'×'}</span>
<span className='sr-only'>{'Close'}</span>
<span className='sr-only'>
<FormattedMessage
id='rename_channel.close'
defaultMessage='Close'
/>
</span>
</button>
<h4 className='modal-title'>{'Rename Channel'}</h4>
<h4 className='modal-title'>
<FormattedMessage
id='rename_channel.title'
defaultMessage='Rename Channel'
/>
</h4>
</div>
<form role='form'>
<div className='modal-body'>
<div className={displayNameClass}>
<label className='control-label'>{'Display Name'}</label>
<label className='control-label'>
<FormattedMessage
id='rename_channel.displayName'
defaultMessage='Display Name'
/>
</label>
<input
onKeyUp={this.displayNameKeyUp}
onChange={this.onDisplayNameChange}
@@ -195,7 +246,7 @@ export default class RenameChannelModal extends React.Component {
ref='displayName'
id='display_name'
className='form-control'
placeholder='Enter display name'
placeholder={formatMessage(holders.displayNameHolder)}
value={this.state.displayName}
maxLength='64'
/>
@@ -208,7 +259,7 @@ export default class RenameChannelModal extends React.Component {
type='text'
className={handleInputClass}
ref='channelName'
placeholder='lowercase alphanumeric&#39;s only'
placeholder={formatMessage(holders.handleHolder)}
value={this.state.channelName}
maxLength='64'
readOnly={readOnlyHandleInput}
@@ -223,14 +274,20 @@ export default class RenameChannelModal extends React.Component {
className='btn btn-default'
data-dismiss='modal'
>
{'Cancel'}
<FormattedMessage
id='rename_channel.cancel'
defaultMessage='Cancel'
/>
</button>
<button
onClick={this.handleSubmit}
type='submit'
className='btn btn-primary'
>
{'Save'}
<FormattedMessage
id='rename_channel.save'
defaultMessage='Save'
/>
</button>
</div>
</form>
@@ -240,3 +297,9 @@ export default class RenameChannelModal extends React.Component {
);
}
}
RenameChannelModal.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(RenameChannelModal);

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

@@ -85,6 +85,6 @@ SettingItemMax.propTypes = {
extraInfo: React.PropTypes.element,
updateSection: React.PropTypes.func,
submit: React.PropTypes.func,
title: React.PropTypes.string,
title: React.PropTypes.node,
width: React.PropTypes.string
};

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

@@ -38,8 +38,8 @@ export default class SettingItemMin extends React.Component {
}
SettingItemMin.propTypes = {
title: React.PropTypes.string,
title: React.PropTypes.node,
disableOpen: React.PropTypes.bool,
updateSection: React.PropTypes.func,
describe: React.PropTypes.string
describe: React.PropTypes.node
};