Add “Learn more” on block modal to inform of federation caveats (#29614)
parent
ec19d0a14b
commit
d702a03a0c
|
@ -1,8 +1,10 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
|
||||
|
@ -17,6 +19,9 @@ import { Icon } from 'mastodon/components/icon';
|
|||
|
||||
export const BlockModal = ({ accountId, acct }) => {
|
||||
const dispatch = useDispatch();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const domain = acct.split('@')[1];
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
|
||||
|
@ -27,6 +32,10 @@ export const BlockModal = ({ accountId, acct }) => {
|
|||
dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
|
||||
}, [dispatch]);
|
||||
|
||||
const handleToggleLearnMore = useCallback(() => {
|
||||
setExpanded(!expanded);
|
||||
}, [expanded, setExpanded]);
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal safety-action-modal'>
|
||||
<div className='safety-action-modal__top'>
|
||||
|
@ -64,8 +73,28 @@ export const BlockModal = ({ accountId, acct }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className='safety-action-modal__bottom'>
|
||||
<div className={classNames('safety-action-modal__bottom', { active: expanded })}>
|
||||
{domain && (
|
||||
<div className='safety-action-modal__bottom__collapsible'>
|
||||
<div className='safety-action-modal__caveats'>
|
||||
<FormattedMessage
|
||||
id='block_modal.remote_users_caveat'
|
||||
defaultMessage='We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.'
|
||||
values={{ domain: <strong>{domain}</strong> }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='safety-action-modal__actions'>
|
||||
{domain && (
|
||||
<button onClick={handleToggleLearnMore} className='link-button'>
|
||||
{expanded ? <FormattedMessage id='block_modal.show_less' defaultMessage='Show less' /> : <FormattedMessage id='block_modal.show_more' defaultMessage='Show more' />}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className='spacer' />
|
||||
|
||||
<button onClick={handleCancel} className='link-button'>
|
||||
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
|
||||
</button>
|
||||
|
|
|
@ -89,6 +89,9 @@
|
|||
"announcement.announcement": "Announcement",
|
||||
"attachments_list.unprocessed": "(unprocessed)",
|
||||
"audio.hide": "Hide audio",
|
||||
"block_modal.remote_users_caveat": "We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.",
|
||||
"block_modal.show_less": "Show less",
|
||||
"block_modal.show_more": "Show more",
|
||||
"block_modal.they_cant_mention": "They can't mention or follow you.",
|
||||
"block_modal.they_cant_see_posts": "They can't see your posts and you won't see theirs.",
|
||||
"block_modal.they_will_know": "They can see that they're blocked.",
|
||||
|
|
|
@ -5922,6 +5922,15 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
&__caveats {
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
padding-top: 0;
|
||||
|
||||
|
|
Loading…
Reference in New Issue