[Glitch] Make “Mark media as sensitive” properly translatable

Port c5704e75ae to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Mélanie Chauvel 2020-10-27 03:05:50 +01:00 committed by Thibaut Girka
parent cd675fbe18
commit 3b96141633

View File

@ -6,8 +6,14 @@ import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' }, marked: {
unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' }, id: 'compose_form.sensitive.marked',
defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
},
unmarked: {
id: 'compose_form.sensitive.unmarked',
defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
},
}); });
const mapStateToProps = state => { const mapStateToProps = state => {
@ -16,6 +22,7 @@ const mapStateToProps = state => {
return { return {
active: state.getIn(['compose', 'sensitive']) || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0), active: state.getIn(['compose', 'sensitive']) || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0),
disabled: state.getIn(['compose', 'spoiler']), disabled: state.getIn(['compose', 'spoiler']),
mediaCount: state.getIn(['compose', 'media_attachments']).size,
}; };
}; };
@ -32,16 +39,17 @@ class SensitiveButton extends React.PureComponent {
static propTypes = { static propTypes = {
active: PropTypes.bool, active: PropTypes.bool,
disabled: PropTypes.bool, disabled: PropTypes.bool,
mediaCount: PropTypes.number,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
render () { render () {
const { active, disabled, onClick, intl } = this.props; const { active, disabled, mediaCount, onClick, intl } = this.props;
return ( return (
<div className='compose-form__sensitive-button'> <div className='compose-form__sensitive-button'>
<label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}> <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
<input <input
name='mark-sensitive' name='mark-sensitive'
type='checkbox' type='checkbox'
@ -52,7 +60,11 @@ class SensitiveButton extends React.PureComponent {
<span className={classNames('checkbox', { active })} /> <span className={classNames('checkbox', { active })} />
<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' /> <FormattedMessage
id='compose_form.sensitive.hide'
defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
values={{ count: mediaCount }}
/>
</label> </label>
</div> </div>
); );