diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx index 31bafe626f..211a319679 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx @@ -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 ( -
-
- - - - - -
- - +
+
); diff --git a/app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx b/app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx index 7c71776ffc..05cee6aaa1 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx @@ -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 ( -
-
-
- - {' ยท '} - { event.get('purged') ? ( - - ) : ( - - )} -
- {intl.formatMessage(messages[event.get('type')])} -
+ + - +
+

{intl.formatMessage(messages[type], { from: {domain}, target: {target}, followingCount, followersCount })}

+
-
+ ); - }; 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; diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 0b5a3f455b..5399bace34 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -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;