From d2f7e30a283a1dca1f7974884ac0c237b93903ad Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 21 Sep 2022 22:46:57 +0200 Subject: [PATCH] Add privacy icons to report modal (#19190) --- .../report/components/status_check_box.js | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/app/javascript/mastodon/features/report/components/status_check_box.js b/app/javascript/mastodon/features/report/components/status_check_box.js index 373c60e21e..5366da90be 100644 --- a/app/javascript/mastodon/features/report/components/status_check_box.js +++ b/app/javascript/mastodon/features/report/components/status_check_box.js @@ -7,14 +7,25 @@ import DisplayName from 'mastodon/components/display_name'; import RelativeTimestamp from 'mastodon/components/relative_timestamp'; import Option from './option'; import MediaAttachments from 'mastodon/components/media_attachments'; +import { injectIntl, defineMessages } from 'react-intl'; +import Icon from 'mastodon/components/icon'; -export default class StatusCheckBox extends React.PureComponent { +const messages = defineMessages({ + public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, + unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, + private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, + direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' }, +}); + +export default @injectIntl +class StatusCheckBox extends React.PureComponent { static propTypes = { id: PropTypes.string.isRequired, status: ImmutablePropTypes.map.isRequired, checked: PropTypes.bool, onToggle: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, }; handleStatusesToggle = (value, checked) => { @@ -23,12 +34,21 @@ export default class StatusCheckBox extends React.PureComponent { }; render () { - const { status, checked } = this.props; + const { status, checked, intl } = this.props; if (status.get('reblog')) { return null; } + const visibilityIconInfo = { + 'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) }, + 'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) }, + 'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) }, + 'direct': { icon: 'at', text: intl.formatMessage(messages.direct_short) }, + }; + + const visibilityIcon = visibilityIconInfo[status.get('visibility')]; + const labelComponent = (
@@ -37,7 +57,7 @@ export default class StatusCheckBox extends React.PureComponent {
- · + ·