diff options
Diffstat (limited to 'app/assets/javascripts/components/features/compose')
7 files changed, 36 insertions, 27 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index ead8e0008..5aa041f09 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -8,6 +8,7 @@ import Autosuggest from 'react-autosuggest'; import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container'; import { debounce } from 'react-decoration'; import UploadButtonContainer from '../containers/upload_button_container'; +import { injectIntl } from 'react-intl'; const getTokenForSuggestions = (str, caretPosition) => { let word; @@ -134,6 +135,7 @@ const ComposeForm = React.createClass({ }, render () { + const { intl } = this.props; let replyArea = ''; const disabled = this.props.is_submitting || this.props.is_uploading; @@ -142,7 +144,7 @@ const ComposeForm = React.createClass({ } const inputProps = { - placeholder: 'What is on your mind?', + placeholder: intl.formatMessage({ id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }), value: this.props.text, onKeyUp: this.handleKeyUp, onChange: this.handleChange, @@ -167,7 +169,7 @@ const ComposeForm = React.createClass({ /> <div style={{ marginTop: '10px', overflow: 'hidden' }}> - <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={disabled} /></div> + <div style={{ float: 'right' }}><Button text={intl.formatMessage({ id: 'compose_form.publish', defaultMessage: 'Publish' })} onClick={this.handleSubmit} disabled={disabled} /></div> <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div> <UploadButtonContainer style={{ paddingTop: '4px' }} /> </div> @@ -177,4 +179,4 @@ const ComposeForm = React.createClass({ }); -export default ComposeForm; +export default injectIntl(ComposeForm); diff --git a/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx b/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx index d2dae141f..4ba6d2290 100644 --- a/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx +++ b/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx @@ -1,9 +1,10 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from '../../../components/avatar'; -import IconButton from '../../../components/icon_button'; -import DisplayName from '../../../components/display_name'; -import { Link } from 'react-router'; +import IconButton from '../../../components/icon_button'; +import DisplayName from '../../../components/display_name'; +import { Link } from 'react-router'; +import { FormattedMessage } from 'react-intl'; const NavigationBar = React.createClass({ propTypes: { @@ -19,7 +20,7 @@ const NavigationBar = React.createClass({ <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}> <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong> - <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}>Settings</a> · <Link to='/timelines/public' style={{ color: 'inherit', textDecoration: 'none' }}>Public timeline</Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}>Logout</a> + <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.settings' defaultMessage='Settings' /></a> · <Link to='/timelines/public' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.public_timeline' defaultMessage='Public timeline' /></Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a> </div> </div> ); diff --git a/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx b/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx index 6298d3de9..4b34f09bf 100644 --- a/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx +++ b/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx @@ -3,11 +3,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from '../../../components/avatar'; import IconButton from '../../../components/icon_button'; import DisplayName from '../../../components/display_name'; -import emojione from 'emojione'; - -emojione.imageType = 'png'; -emojione.sprites = false; -emojione.imagePathPNG = '/emoji/'; +import emojify from '../../../emoji'; +import { injectIntl } from 'react-intl'; const ReplyIndicator = React.createClass({ @@ -34,12 +31,13 @@ const ReplyIndicator = React.createClass({ }, render () { - let content = { __html: emojione.unicodeToImage(this.props.status.get('content')) }; + const { intl } = this.props; + const content = { __html: emojify(this.props.status.get('content')) }; return ( <div style={{ background: '#9baec8', padding: '10px' }}> <div style={{ overflow: 'hidden', marginBottom: '5px' }}> - <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title='Cancel' icon='times' onClick={this.handleClick} /></div> + <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage({ id: 'reply_indicator.cancel', defaultMessage: 'Cancel' })} icon='times' onClick={this.handleClick} /></div> <a href={this.props.status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}> <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div> @@ -54,4 +52,4 @@ const ReplyIndicator = React.createClass({ }); -export default ReplyIndicator; +export default injectIntl(ReplyIndicator); diff --git a/app/assets/javascripts/components/features/compose/components/search.jsx b/app/assets/javascripts/components/features/compose/components/search.jsx index 37efbe5df..65df336cc 100644 --- a/app/assets/javascripts/components/features/compose/components/search.jsx +++ b/app/assets/javascripts/components/features/compose/components/search.jsx @@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import Autosuggest from 'react-autosuggest'; import AutosuggestAccountContainer from '../containers/autosuggest_account_container'; import { debounce } from 'react-decoration'; +import { injectIntl } from 'react-intl'; const getSuggestionValue = suggestion => suggestion.value; @@ -94,7 +95,7 @@ const Search = React.createClass({ render () { const inputProps = { - placeholder: 'Search', + placeholder: this.props.intl.formatMessage({ id: 'search.placeholder', defaultMessage: 'Search' }), value: this.props.value, onChange: this.onChange, style: inputStyle @@ -125,4 +126,4 @@ const Search = React.createClass({ }); -export default Search; +export default injectIntl(Search); diff --git a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx index 70c2fca6e..697902275 100644 --- a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx +++ b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx @@ -1,6 +1,7 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import AccountContainer from '../../followers/containers/account_container'; +import AccountContainer from '../../followers/containers/account_container'; +import { FormattedMessage } from 'react-intl'; const outerStyle = { position: 'relative' @@ -66,13 +67,13 @@ const SuggestionsBox = React.createClass({ let nextLink = ''; if (accountIds.size > perWindow) { - nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}>Refresh</a>; + nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}><FormattedMessage id='suggestions_box.refresh' defaultMessage='Refresh' /></a>; } return ( <div style={outerStyle}> <strong style={headerStyle}> - Who to follow {nextLink} + <FormattedMessage id='suggestions_box.who_to_follow' defaultMessage='Who to follow' /> {nextLink} </strong> {accountIds.skip(perWindow * this.state.index).take(perWindow).map(accountId => <AccountContainer key={accountId} id={accountId} withNote={false} />)} diff --git a/app/assets/javascripts/components/features/compose/components/upload_button.jsx b/app/assets/javascripts/components/features/compose/components/upload_button.jsx index 8289e0a09..cc251835f 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx @@ -1,5 +1,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from '../../../components/icon_button'; +import { injectIntl } from 'react-intl'; const UploadButton = React.createClass({ @@ -26,9 +27,11 @@ const UploadButton = React.createClass({ }, render () { + const { intl } = this.props; + return ( <div style={this.props.style}> - <IconButton icon='photo' title='Add media' disabled={this.props.disabled} onClick={this.handleClick} size={24} /> + <IconButton icon='photo' title={intl.formatMessage({ id: 'upload_button.label', defaultMessage: 'Add media' })} disabled={this.props.disabled} onClick={this.handleClick} size={24} /> <input ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} /> </div> ); @@ -36,4 +39,4 @@ const UploadButton = React.createClass({ }); -export default UploadButton; +export default injectIntl(UploadButton); diff --git a/app/assets/javascripts/components/features/compose/components/upload_form.jsx b/app/assets/javascripts/components/features/compose/components/upload_form.jsx index eab504b48..72c2b9535 100644 --- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx @@ -1,6 +1,7 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import IconButton from '../../../components/icon_button'; +import IconButton from '../../../components/icon_button'; +import { injectIntl } from 'react-intl'; const UploadForm = React.createClass({ @@ -13,10 +14,12 @@ const UploadForm = React.createClass({ mixins: [PureRenderMixin], render () { + const { intl } = this.props; + const uploads = this.props.media.map(attachment => ( <div key={attachment.get('id')} style={{ borderRadius: '4px', marginBottom: '10px' }} className='transparent-background'> <div style={{ width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}> - <IconButton icon='times' title='Undo' size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} /> + <IconButton icon='times' title={intl.formatMessage({ id: 'upload_form.undo', defaultMessage: 'Undo' })} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} /> </div> </div> )); @@ -30,4 +33,4 @@ const UploadForm = React.createClass({ }); -export default UploadForm; +export default injectIntl(UploadForm); |