[Glitch] Add a “Block & Report” button to the block confirmation dialog

Port 6df4a82969 to glitch-soc
signup-info-prompt
ThibG 2019-03-26 17:34:02 +01:00 committed by Thibaut Girka
parent fae53e1a39
commit 9e80b34a95
8 changed files with 44 additions and 6 deletions

View File

@ -146,7 +146,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
} }
handleBlockClick = () => { handleBlockClick = () => {
this.props.onBlock(this.props.status.get('account')); this.props.onBlock(this.props.status);
} }
handleOpen = () => { handleOpen = () => {

View File

@ -35,6 +35,7 @@ const messages = defineMessages({
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
}); });
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
@ -169,11 +170,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(openModal('VIDEO', { media, time })); dispatch(openModal('VIDEO', { media, time }));
}, },
onBlock (account) { onBlock (status) {
const account = status.get('account');
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm), confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.get('id'))), onConfirm: () => dispatch(blockAccount(account.get('id'))),
secondary: intl.formatMessage(messages.blockAndReport),
onSecondary: () => {
dispatch(blockAccount(account.get('id')));
dispatch(initReport(account, status));
},
})); }));
}, },

View File

@ -26,6 +26,7 @@ const messages = defineMessages({
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
}); });
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
@ -64,6 +65,11 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm), confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.get('id'))), onConfirm: () => dispatch(blockAccount(account.get('id'))),
secondary: intl.formatMessage(messages.blockAndReport),
onSecondary: () => {
dispatch(blockAccount(account.get('id')));
dispatch(initReport(account));
},
})); }));
} }
}, },

View File

@ -98,7 +98,7 @@ export default class ActionBar extends React.PureComponent {
} }
handleBlockClick = () => { handleBlockClick = () => {
this.props.onBlock(this.props.status.get('account')); this.props.onBlock(this.props.status);
} }
handleReport = () => { handleReport = () => {

View File

@ -38,6 +38,7 @@ const messages = defineMessages({
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
}); });
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
@ -136,11 +137,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(openModal('VIDEO', { media, time })); dispatch(openModal('VIDEO', { media, time }));
}, },
onBlock (account) { onBlock (status) {
const account = status.get('account');
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm), confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.get('id'))), onConfirm: () => dispatch(blockAccount(account.get('id'))),
secondary: intl.formatMessage(messages.blockAndReport),
onSecondary: () => {
dispatch(blockAccount(account.get('id')));
dispatch(initReport(account, status));
},
})); }));
}, },

View File

@ -54,6 +54,7 @@ const messages = defineMessages({
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' }, detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
tootHeading: { id: 'column.toot', defaultMessage: 'Toots and replies' }, tootHeading: { id: 'column.toot', defaultMessage: 'Toots and replies' },
}); });
@ -279,13 +280,19 @@ export default class Status extends ImmutablePureComponent {
this.setState({ isExpanded: !isExpanded, threadExpanded: !isExpanded }); this.setState({ isExpanded: !isExpanded, threadExpanded: !isExpanded });
} }
handleBlockClick = (account) => { handleBlockClick = (status) => {
const { dispatch, intl } = this.props; const { dispatch, intl } = this.props;
const account = status.get('account');
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm), confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.get('id'))), onConfirm: () => dispatch(blockAccount(account.get('id'))),
secondary: intl.formatMessage(messages.blockAndReport),
onSecondary: () => {
dispatch(blockAccount(account.get('id')));
dispatch(initReport(account, status));
},
})); }));
} }

View File

@ -11,6 +11,8 @@ export default class ConfirmationModal extends React.PureComponent {
confirm: PropTypes.string.isRequired, confirm: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired,
secondary: PropTypes.string,
onSecondary: PropTypes.func,
onDoNotAsk: PropTypes.func, onDoNotAsk: PropTypes.func,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
@ -27,6 +29,11 @@ export default class ConfirmationModal extends React.PureComponent {
} }
} }
handleSecondary = () => {
this.props.onClose();
this.props.onSecondary();
}
handleCancel = () => { handleCancel = () => {
this.props.onClose(); this.props.onClose();
} }
@ -40,7 +47,7 @@ export default class ConfirmationModal extends React.PureComponent {
} }
render () { render () {
const { message, confirm, onDoNotAsk } = this.props; const { message, confirm, secondary, onDoNotAsk } = this.props;
return ( return (
<div className='modal-root__modal confirmation-modal'> <div className='modal-root__modal confirmation-modal'>
@ -61,6 +68,9 @@ export default class ConfirmationModal extends React.PureComponent {
<Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'> <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /> <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
</Button> </Button>
{secondary !== undefined && (
<Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
)}
<Button text={confirm} onClick={this.handleClick} ref={this.setRef} /> <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
</div> </div>
</div> </div>

View File

@ -671,6 +671,7 @@
.confirmation-modal__action-bar, .confirmation-modal__action-bar,
.mute-modal__action-bar { .mute-modal__action-bar {
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button, .confirmation-modal__cancel-button,
.mute-modal__cancel-button { .mute-modal__cancel-button {
background-color: transparent; background-color: transparent;