mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change design of notification about lost connections in web UI 

Port 29f9dc742e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2691/head
Eugen Rochko 2024-03-25 14:27:38 +01:00 committed by Claire
parent 1ae08ae257
commit b55bbfa2b3
3 changed files with 74 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/javascript/flavours/glitch/features/notifications/components/notification.jsx
View File

@ -11,7 +11,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
@ -23,13 +22,14 @@ import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import FollowRequestContainer from '../containers/follow_request_container';
import NotificationOverlayContainer from '../containers/overlay_container';
import RelationshipsSeveranceEvent from './relationships_severance_event';
import { RelationshipsSeveranceEvent } from './relationships_severance_event';
import Report from './report';
const messages = defineMessages({
follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
adminSignUp: { id: 'notification.admin.sign_up', defaultMessage: '{name} signed up' },
adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
relationshipsSevered: { id: 'notification.relationships_severance_event', defaultMessage: 'Lost connections with {name}' },
});
const notificationForScreenReader = (intl, message, timestamp) => {
@ -306,24 +306,23 @@ class Notification extends ImmutablePureComponent {
}
renderRelationshipsSevered (notification) {
const { intl, unread } = this.props;
const { intl, unread, hidden } = this.props;
const event = notification.get('event');
if (!notification.get('event')) {
if (!event) {
return null;
}
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-severed-relationships focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: notification.getIn(['event', 'target_name']) }), notification.get('created_at'))}>
<div className='notification__message'>
<Icon id='heart_broken' icon={HeartBrokenIcon} />
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.severed_relationships' defaultMessage='Relationships with {name} severed' values={{ name: notification.getIn(['event', 'target_name']) }} />
</span>
</div>
<RelationshipsSeveranceEvent event={notification.get('event')} />
<div className={classNames('notification notification-severed-relationships focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.relationshipsSevered, { name: notification.getIn(['event', 'target_name']) }), notification.get('created_at'))}>
<RelationshipsSeveranceEvent
type={event.get('type')}
target={event.get('target_name')}
followersCount={event.get('followers_count')}
followingCount={event.get('following_count')}
hidden={hidden}
/>
</div>
</HotKeys>
);

62
app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx
View File

@ -2,60 +2,44 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { domain } from 'flavours/glitch/initial_state';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
// This needs to be kept in sync with app/models/relationship_severance_event.rb
// This needs to be kept in sync with app/models/relationships_severance_event.rb
const messages = defineMessages({
account_suspension: { id: 'relationship_severance_notification.types.account_suspension', defaultMessage: 'Account has been suspended' },
domain_block: { id: 'relationship_severance_notification.types.domain_block', defaultMessage: 'Domain has been suspended' },
user_domain_block: { id: 'relationship_severance_notification.types.user_domain_block', defaultMessage: 'You blocked this domain' },
account_suspension: { id: 'notification.relationships_severance_event.account_suspension', defaultMessage: 'An admin from {from} has suspended {target}, which means you can no longer receive updates from them or interact with them.' },
domain_block: { id: 'notification.relationships_severance_event.domain_block', defaultMessage: 'An admin from {from} has blocked {target}, including {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
user_domain_block: { id: 'notification.relationships_severance_event.user_domain_block', defaultMessage: 'You have blocked {target}, removing {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
});
const RelationshipsSeveranceEvent = ({ event, hidden }) => {
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
const intl = useIntl();
if (hidden || !event) {
if (hidden) {
return null;
}
return (
<div className='notification__report'>
<div className='notification__report__details'>
<div>
<RelativeTimestamp timestamp={event.get('created_at')} short={false} />
{' · '}
{ event.get('purged') ? (
<FormattedMessage
id='relationship_severance_notification.purged_data'
defaultMessage='purged by administrators'
/>
) : (
<FormattedMessage
id='relationship_severance_notification.relationships'
defaultMessage='{count, plural, one {# relationship} other {# relationships}}'
values={{ count: event.get('followers_count', 0) + event.get('following_count', 0) }}
/>
)}
<br />
<strong>{intl.formatMessage(messages[event.get('type')])}</strong>
</div>
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='notification__relationships-severance-event'>
<Icon id='heart_broken' icon={HeartBrokenIcon} />
<div className='notification__report__actions'>
<a href='/severed_relationships' className='button' target='_blank' rel='noopener noreferrer'>
<FormattedMessage id='relationship_severance_notification.view' defaultMessage='View' />
</a>
</div>
<div className='notification__relationships-severance-event__content'>
<p>{intl.formatMessage(messages[type], { from: <strong>{domain}</strong>, target: <strong>{target}</strong>, followingCount, followersCount })}</p>
<span className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></span>
</div>
</div>
</a>
);
};
RelationshipsSeveranceEvent.propTypes = {
event: ImmutablePropTypes.map.isRequired,
type: PropTypes.oneOf([
'account_suspension',
'domain_block',
'user_domain_block',
]).isRequired,
target: PropTypes.string.isRequired,
followersCount: PropTypes.number.isRequired,
followingCount: PropTypes.number.isRequired,
hidden: PropTypes.bool,
};
export default RelationshipsSeveranceEvent;

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

@ -2379,6 +2379,44 @@ a.account__display-name {
}
}
.notification__relationships-severance-event {
display: flex;
gap: 16px;
color: $secondary-text-color;
text-decoration: none;
align-items: flex-start;
padding: 16px 32px;
border-bottom: 1px solid var(--background-border-color);
&:hover {
color: $primary-text-color;
}
.icon {
padding: 2px;
color: $highlight-text-color;
}
&__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex-grow: 1;
font-size: 16px;
line-height: 24px;
strong {
font-weight: 700;
}
.link-button {
font-size: inherit;
line-height: inherit;
}
}
}
.notification__message {
padding: 8px 14px; // glitch: reduced padding
padding-bottom: 0;