mirror/YuruToot
1
0
Fork 0
mirror of https://github.com/funamitech/mastodon synced 2024-11-27 14:29:03 +09:00
Code

[Glitch] Add “Learn more” on block modal to inform of federation caveats

Browse Source 
Port d702a03a0c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2024-03-15 20:09:21 +01:00
parent 80fda17868
commit c511e52d1e
2 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
View File

@ -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 'flavours/glitch/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>

9
app/javascript/flavours/glitch/styles/components.scss
View File

@ -6420,6 +6420,15 @@ a.status-card {
}
}
&__caveats {
font-size: 14px;
padding: 0 12px;
strong {
font-weight: 500;
}
}
&__bottom {
padding-top: 0;