diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2022-02-23 20:03:46 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-23 20:03:46 +0100 |
commit | a9a43de6d1502a6cbb388a5dbcd0e8532c236e64 (patch) | |
tree | c740e607088ce81b7da6441bd799b08b2fa39f25 /app/javascript/mastodon/features/report/comment.js | |
parent | 1c3e5e44e2cb7eaeb3a930ec1821096827df930e (diff) |
Change report modal to include category selection in web UI (#17565)
* Change report modal to include category selection in web UI * Various fixes and improvements - Change thank you text to be different based on category - Change starting headline to be different for account and status reports - Change toggle components to have a checkmark when checked - Fix report dialog being cut off on small screens - Fix thank you screen offering mute or block if already muted or blocked - Refactor toggle components in report dialog into one component * Change wording on final screen * Change checkboxes to be square when multiple options are possible
Diffstat (limited to 'app/javascript/mastodon/features/report/comment.js')
-rw-r--r-- | app/javascript/mastodon/features/report/comment.js | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/report/comment.js b/app/javascript/mastodon/features/report/comment.js new file mode 100644 index 000000000..8d1a4e21f --- /dev/null +++ b/app/javascript/mastodon/features/report/comment.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; +import Button from 'mastodon/components/button'; +import Toggle from 'react-toggle'; + +const messages = defineMessages({ + placeholder: { id: 'report.placeholder', defaultMessage: 'Type or paste additional comments' }, +}); + +export default @injectIntl +class Comment extends React.PureComponent { + + static propTypes = { + onSubmit: PropTypes.func.isRequired, + comment: PropTypes.string.isRequired, + onChangeComment: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + isSubmitting: PropTypes.bool, + forward: PropTypes.bool, + isRemote: PropTypes.bool, + domain: PropTypes.string, + onChangeForward: PropTypes.func.isRequired, + }; + + handleClick = () => { + const { onSubmit } = this.props; + onSubmit(); + }; + + handleChange = e => { + const { onChangeComment } = this.props; + onChangeComment(e.target.value); + }; + + handleKeyDown = e => { + if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { + this.handleClick(); + } + }; + + handleForwardChange = e => { + const { onChangeForward } = this.props; + onChangeForward(e.target.checked); + }; + + render () { + const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props; + + return ( + <React.Fragment> + <h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3> + + <textarea + className='report-dialog-modal__textarea' + placeholder={intl.formatMessage(messages.placeholder)} + value={comment} + onChange={this.handleChange} + onKeyDown={this.handleKeyDown} + disabled={isSubmitting} + /> + + {isRemote && ( + <React.Fragment> + <p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p> + + <label className='report-dialog-modal__toggle'> + <Toggle checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} /> + <FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /> + </label> + </React.Fragment> + )} + + <div className='flex-spacer' /> + + <div className='report-dialog-modal__actions'> + <Button onClick={this.handleClick}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button> + </div> + </React.Fragment> + ); + } + +} |