mirror of https://github.com/mastodon/mastodon.git
Add unread style
parent
7c58b58ad1
commit
70982cd513
|
@ -1,5 +1,7 @@
|
||||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
|
import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
|
||||||
|
@ -46,9 +48,15 @@ interface Props {
|
||||||
| 'suspend';
|
| 'suspend';
|
||||||
id: string;
|
id: string;
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
|
unread: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
|
export const ModerationWarning: React.FC<Props> = ({
|
||||||
|
action,
|
||||||
|
id,
|
||||||
|
hidden,
|
||||||
|
unread,
|
||||||
|
}) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
if (hidden) {
|
if (hidden) {
|
||||||
|
@ -56,12 +64,26 @@ export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='notification-group notification-group--link notification-group--moderation-warning focusable' tabIndex='0'>
|
<div
|
||||||
<div className='notification-group__icon'><Icon id='warning' icon={GavelIcon} /></div>
|
role='button'
|
||||||
|
className={classNames(
|
||||||
|
'notification-group notification-group--link notification-group--moderation-warning focusable',
|
||||||
|
{ 'notification-group--unread': unread },
|
||||||
|
)}
|
||||||
|
tabIndex='0'
|
||||||
|
>
|
||||||
|
<div className='notification-group__icon'>
|
||||||
|
<Icon id='warning' icon={GavelIcon} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className='notification-group__main'>
|
<div className='notification-group__main'>
|
||||||
<p>{intl.formatMessage(messages[action])}</p>
|
<p>{intl.formatMessage(messages[action])}</p>
|
||||||
<a href={`/disputes/strikes/${id}`} target='_blank' rel='noopener noreferrer' className='link-button'>
|
<a
|
||||||
|
href={`/disputes/strikes/${id}`}
|
||||||
|
target='_blank'
|
||||||
|
rel='noopener noreferrer'
|
||||||
|
className='link-button'
|
||||||
|
>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='notification.moderation-warning.learn_more'
|
id='notification.moderation-warning.learn_more'
|
||||||
defaultMessage='Learn more'
|
defaultMessage='Learn more'
|
||||||
|
|
|
@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
|
import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
import { domain } from 'mastodon/initial_state';
|
import { domain } from 'mastodon/initial_state';
|
||||||
|
@ -13,7 +15,7 @@ const messages = defineMessages({
|
||||||
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.' },
|
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.' },
|
||||||
});
|
});
|
||||||
|
|
||||||
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
|
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden, unread }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
if (hidden) {
|
if (hidden) {
|
||||||
|
@ -21,7 +23,7 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='notification-group notification-group--link notification-group--relationships-severance-event focusable' tabIndex='0'>
|
<div role='button' className={classNames('notification-group notification-group--link notification-group--relationships-severance-event focusable', { 'notification-group--unread': unread })} tabIndex='0'>
|
||||||
<div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>
|
<div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>
|
||||||
|
|
||||||
<div className='notification-group__main'>
|
<div className='notification-group__main'>
|
||||||
|
@ -42,4 +44,5 @@ RelationshipsSeveranceEvent.propTypes = {
|
||||||
followersCount: PropTypes.number.isRequired,
|
followersCount: PropTypes.number.isRequired,
|
||||||
followingCount: PropTypes.number.isRequired,
|
followingCount: PropTypes.number.isRequired,
|
||||||
hidden: PropTypes.bool,
|
hidden: PropTypes.bool,
|
||||||
|
unread: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
|
@ -9,7 +9,7 @@ const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
|
||||||
if (!account) return null;
|
if (!account) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={`/@${account.get('acct')}`} title={`@${account.get('acct')}`}>
|
<Link to={`/@${account.acct}`} title={`@${account.acct}`}>
|
||||||
<Avatar account={account} size={28} />
|
<Avatar account={account} size={28} />
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
@ -19,7 +19,7 @@ export const AvatarGroup: React.FC<{ accountIds: string[] }> = ({
|
||||||
accountIds,
|
accountIds,
|
||||||
}) => (
|
}) => (
|
||||||
<div className='notification-group__avatar-group'>
|
<div className='notification-group__avatar-group'>
|
||||||
{accountIds.map((accountId) => (
|
{accountIds.slice(0, 7).map((accountId) => (
|
||||||
<AvatarWrapper key={accountId} accountId={accountId} />
|
<AvatarWrapper key={accountId} accountId={accountId} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -27,7 +27,7 @@ export const NamesList: React.FC<{ accountIds: string[]; total: number }> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id=''
|
id='name_and_others'
|
||||||
defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
|
defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
|
||||||
values={{ name: displayedName, count: total - 1 }}
|
values={{ name: displayedName, count: total - 1 }}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,33 +1,37 @@
|
||||||
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
|
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
|
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
||||||
import type { NotificationGroupAdminReport } from 'mastodon/models/notification_group';
|
import type { NotificationGroupAdminReport } from 'mastodon/models/notification_group';
|
||||||
import { useAppSelector } from 'mastodon/store';
|
import { useAppSelector } from 'mastodon/store';
|
||||||
|
|
||||||
import { NamesList } from './names_list';
|
|
||||||
|
|
||||||
// This needs to be kept in sync with app/models/report.rb
|
// This needs to be kept in sync with app/models/report.rb
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
other: {
|
other: {
|
||||||
id: 'report_notification.categories.other',
|
id: 'report_notification.categories.other_sentence',
|
||||||
defaultMessage: 'Other',
|
defaultMessage: 'other',
|
||||||
|
},
|
||||||
|
spam: {
|
||||||
|
id: 'report_notification.categories.spam_sentence',
|
||||||
|
defaultMessage: 'spam',
|
||||||
},
|
},
|
||||||
spam: { id: 'report_notification.categories.spam', defaultMessage: 'Spam' },
|
|
||||||
legal: {
|
legal: {
|
||||||
id: 'report_notification.categories.legal',
|
id: 'report_notification.categories.legal_sentence',
|
||||||
defaultMessage: 'Legal',
|
defaultMessage: 'illegal content',
|
||||||
},
|
},
|
||||||
violation: {
|
violation: {
|
||||||
id: 'report_notification.categories.violation',
|
id: 'report_notification.categories.violation_sentence',
|
||||||
defaultMessage: 'Rule violation',
|
defaultMessage: 'rule violation',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const NotificationAdminReport: React.FC<{
|
export const NotificationAdminReport: React.FC<{
|
||||||
notification: NotificationGroupAdminReport;
|
notification: NotificationGroupAdminReport;
|
||||||
}> = ({ notification, notification: { report } }) => {
|
unread: boolean;
|
||||||
|
}> = ({ notification, notification: { report }, unread }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const targetAccount = useAppSelector((state) =>
|
const targetAccount = useAppSelector((state) =>
|
||||||
state.getIn(['accounts', report.target_account.id]),
|
state.getIn(['accounts', report.target_account.id]),
|
||||||
|
@ -97,8 +101,10 @@ export const NotificationAdminReport: React.FC<{
|
||||||
href={`/admin/reports/${report.id}`}
|
href={`/admin/reports/${report.id}`}
|
||||||
target='_blank'
|
target='_blank'
|
||||||
rel='noopener noreferrer'
|
rel='noopener noreferrer'
|
||||||
className='notification-group notification-group--link notification-group--admin-report focusable'
|
className={classNames(
|
||||||
tabIndex={0}
|
'notification-group notification-group--link notification-group--admin-report focusable',
|
||||||
|
{ 'notification-group--unread': unread },
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div className='notification-group__icon'>
|
<div className='notification-group__icon'>
|
||||||
<Icon id='flag' icon={FlagIcon} />
|
<Icon id='flag' icon={FlagIcon} />
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationAdminSignUp: React.FC<{
|
export const NotificationAdminSignUp: React.FC<{
|
||||||
notification: NotificationGroupAdminSignUp;
|
notification: NotificationGroupAdminSignUp;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationGroupWithStatus
|
<NotificationGroupWithStatus
|
||||||
type='admin-sign-up'
|
type='admin-sign-up'
|
||||||
icon={PersonAddIcon}
|
icon={PersonAddIcon}
|
||||||
|
@ -24,5 +25,6 @@ export const NotificationAdminSignUp: React.FC<{
|
||||||
timestamp={notification.latest_page_notification_at}
|
timestamp={notification.latest_page_notification_at}
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationFavourite: React.FC<{
|
export const NotificationFavourite: React.FC<{
|
||||||
notification: NotificationGroupFavourite;
|
notification: NotificationGroupFavourite;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationGroupWithStatus
|
<NotificationGroupWithStatus
|
||||||
type='favourite'
|
type='favourite'
|
||||||
icon={StarIcon}
|
icon={StarIcon}
|
||||||
|
@ -25,5 +26,6 @@ export const NotificationFavourite: React.FC<{
|
||||||
timestamp={notification.latest_page_notification_at}
|
timestamp={notification.latest_page_notification_at}
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationFollow: React.FC<{
|
export const NotificationFollow: React.FC<{
|
||||||
notification: NotificationGroupFollow;
|
notification: NotificationGroupFollow;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationGroupWithStatus
|
<NotificationGroupWithStatus
|
||||||
type='follow'
|
type='follow'
|
||||||
icon={PersonAddIcon}
|
icon={PersonAddIcon}
|
||||||
|
@ -24,5 +25,6 @@ export const NotificationFollow: React.FC<{
|
||||||
timestamp={notification.latest_page_notification_at}
|
timestamp={notification.latest_page_notification_at}
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationFollowRequest: React.FC<{
|
export const NotificationFollowRequest: React.FC<{
|
||||||
notification: NotificationGroupFollowRequest;
|
notification: NotificationGroupFollowRequest;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationGroupWithStatus
|
<NotificationGroupWithStatus
|
||||||
type='follow-request'
|
type='follow-request'
|
||||||
icon={PersonAddIcon}
|
icon={PersonAddIcon}
|
||||||
|
@ -24,5 +25,6 @@ export const NotificationFollowRequest: React.FC<{
|
||||||
timestamp={notification.latest_page_notification_at}
|
timestamp={notification.latest_page_notification_at}
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,7 +5,6 @@ import { HotKeys } from 'react-hotkeys';
|
||||||
import type { NotificationGroup as NotificationGroupModel } from 'mastodon/models/notification_group';
|
import type { NotificationGroup as NotificationGroupModel } from 'mastodon/models/notification_group';
|
||||||
import { useAppSelector } from 'mastodon/store';
|
import { useAppSelector } from 'mastodon/store';
|
||||||
|
|
||||||
|
|
||||||
import { NotificationAdminReport } from './notification_admin_report';
|
import { NotificationAdminReport } from './notification_admin_report';
|
||||||
import { NotificationAdminSignUp } from './notification_admin_sign_up';
|
import { NotificationAdminSignUp } from './notification_admin_sign_up';
|
||||||
import { NotificationFavourite } from './notification_favourite';
|
import { NotificationFavourite } from './notification_favourite';
|
||||||
|
@ -24,14 +23,15 @@ export const NotificationGroup: React.FC<{
|
||||||
unread: boolean;
|
unread: boolean;
|
||||||
onMoveUp: unknown;
|
onMoveUp: unknown;
|
||||||
onMoveDown: unknown;
|
onMoveDown: unknown;
|
||||||
}> = ({ notificationGroupId, onMoveUp, onMoveDown }) => {
|
}> = ({ notificationGroupId, unread, onMoveUp, onMoveDown }) => {
|
||||||
const notificationGroup = useAppSelector((state) =>
|
const notificationGroup = useAppSelector((state) =>
|
||||||
state.notificationsGroups.groups.find(
|
state.notificationsGroups.groups.find(
|
||||||
(item) => item.type !== 'gap' && item.group_key === notificationGroupId,
|
(item) => item.type !== 'gap' && item.group_key === notificationGroupId,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
const handlers = useMemo(() => ({
|
const handlers = useMemo(
|
||||||
|
() => ({
|
||||||
moveUp: () => {
|
moveUp: () => {
|
||||||
onMoveUp(notificationGroupId);
|
onMoveUp(notificationGroupId);
|
||||||
},
|
},
|
||||||
|
@ -39,7 +39,9 @@ export const NotificationGroup: React.FC<{
|
||||||
moveDown: () => {
|
moveDown: () => {
|
||||||
onMoveDown(notificationGroupId);
|
onMoveDown(notificationGroupId);
|
||||||
},
|
},
|
||||||
}), [notificationGroupId, onMoveUp, onMoveDown]);
|
}),
|
||||||
|
[notificationGroupId, onMoveUp, onMoveDown],
|
||||||
|
);
|
||||||
|
|
||||||
if (!notificationGroup || notificationGroup.type === 'gap') return null;
|
if (!notificationGroup || notificationGroup.type === 'gap') return null;
|
||||||
|
|
||||||
|
@ -47,48 +49,86 @@ export const NotificationGroup: React.FC<{
|
||||||
|
|
||||||
switch (notificationGroup.type) {
|
switch (notificationGroup.type) {
|
||||||
case 'reblog':
|
case 'reblog':
|
||||||
content = <NotificationReblog notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationReblog unread={unread} notification={notificationGroup} />
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'favourite':
|
case 'favourite':
|
||||||
content = <NotificationFavourite notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationFavourite
|
||||||
|
unread={unread}
|
||||||
|
notification={notificationGroup}
|
||||||
|
/>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'severed_relationships':
|
case 'severed_relationships':
|
||||||
content = <NotificationSeveredRelationships notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationSeveredRelationships
|
||||||
|
unread={unread}
|
||||||
|
notification={notificationGroup}
|
||||||
|
/>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'mention':
|
case 'mention':
|
||||||
content = <NotificationMention notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationMention unread={unread} notification={notificationGroup} />
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'follow':
|
case 'follow':
|
||||||
content = <NotificationFollow notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationFollow unread={unread} notification={notificationGroup} />
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'follow_request':
|
case 'follow_request':
|
||||||
content = <NotificationFollowRequest notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationFollowRequest
|
||||||
|
unread={unread}
|
||||||
|
notification={notificationGroup}
|
||||||
|
/>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'poll':
|
case 'poll':
|
||||||
content = <NotificationPoll notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationPoll unread={unread} notification={notificationGroup} />
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'status':
|
case 'status':
|
||||||
content = <NotificationStatus notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationStatus unread={unread} notification={notificationGroup} />
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'update':
|
case 'update':
|
||||||
content = <NotificationUpdate notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationUpdate unread={unread} notification={notificationGroup} />
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'admin.sign_up':
|
case 'admin.sign_up':
|
||||||
content = <NotificationAdminSignUp notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationAdminSignUp
|
||||||
|
unread={unread}
|
||||||
|
notification={notificationGroup}
|
||||||
|
/>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'admin.report':
|
case 'admin.report':
|
||||||
content = <NotificationAdminReport notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationAdminReport
|
||||||
|
unread={unread}
|
||||||
|
notification={notificationGroup}
|
||||||
|
/>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'moderation_warning':
|
case 'moderation_warning':
|
||||||
content = <NotificationModerationWarning notification={notificationGroup} />;
|
content = (
|
||||||
|
<NotificationModerationWarning
|
||||||
|
unread={unread}
|
||||||
|
notification={notificationGroup}
|
||||||
|
/>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return <HotKeys handlers={handlers}>{content}</HotKeys>;
|
||||||
<HotKeys handlers={handlers}>
|
|
||||||
{content}
|
|
||||||
</HotKeys>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import type { IconProp } from 'mastodon/components/icon';
|
import type { IconProp } from 'mastodon/components/icon';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
@ -22,6 +22,7 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
timestamp: string;
|
timestamp: string;
|
||||||
labelRenderer: LabelRenderer;
|
labelRenderer: LabelRenderer;
|
||||||
type: string;
|
type: string;
|
||||||
|
unread: boolean;
|
||||||
}> = ({
|
}> = ({
|
||||||
icon,
|
icon,
|
||||||
timestamp,
|
timestamp,
|
||||||
|
@ -30,6 +31,7 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
statusId,
|
statusId,
|
||||||
labelRenderer,
|
labelRenderer,
|
||||||
type,
|
type,
|
||||||
|
unread,
|
||||||
}) => {
|
}) => {
|
||||||
const label = useMemo(
|
const label = useMemo(
|
||||||
() =>
|
() =>
|
||||||
|
@ -41,7 +43,11 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`notification-group focusable notification-group--${type}`}
|
role='button'
|
||||||
|
className={classNames(
|
||||||
|
`notification-group focusable notification-group--${type}`,
|
||||||
|
{ 'notification-group--unread': unread },
|
||||||
|
)}
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
>
|
>
|
||||||
<div className='notification-group__icon'>
|
<div className='notification-group__icon'>
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationMention: React.FC<{
|
export const NotificationMention: React.FC<{
|
||||||
notification: NotificationGroupMention;
|
notification: NotificationGroupMention;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationWithStatus
|
<NotificationWithStatus
|
||||||
type='mention'
|
type='mention'
|
||||||
icon={ReplyIcon}
|
icon={ReplyIcon}
|
||||||
|
@ -24,5 +25,6 @@ export const NotificationMention: React.FC<{
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
statusId={notification.statusId}
|
statusId={notification.statusId}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,9 +3,7 @@ import type { NotificationGroupModerationWarning } from 'mastodon/models/notific
|
||||||
|
|
||||||
export const NotificationModerationWarning: React.FC<{
|
export const NotificationModerationWarning: React.FC<{
|
||||||
notification: NotificationGroupModerationWarning;
|
notification: NotificationGroupModerationWarning;
|
||||||
}> = ({ notification: { event } }) => (
|
unread: boolean;
|
||||||
<ModerationWarning
|
}> = ({ notification: { event }, unread }) => (
|
||||||
action={event.action}
|
<ModerationWarning action={event.action} id={event.id} unread={unread} />
|
||||||
id={event.id}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,26 +1,40 @@
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
|
import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
|
||||||
|
import { me } from 'mastodon/initial_state';
|
||||||
import type { NotificationGroupPoll } from 'mastodon/models/notification_group';
|
import type { NotificationGroupPoll } from 'mastodon/models/notification_group';
|
||||||
|
|
||||||
import { NotificationWithStatus } from './notification_with_status';
|
import { NotificationWithStatus } from './notification_with_status';
|
||||||
|
|
||||||
const labelRenderer = () => (
|
const labelRendererOther = () => (
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='notification.poll'
|
id='notification.poll'
|
||||||
defaultMessage='A poll you have voted in has ended'
|
defaultMessage='A poll you have voted in has ended'
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const labelRendererOwn = () => (
|
||||||
|
<FormattedMessage
|
||||||
|
id='notification.own_poll'
|
||||||
|
defaultMessage='Your poll has ended'
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
export const NotificationPoll: React.FC<{
|
export const NotificationPoll: React.FC<{
|
||||||
notification: NotificationGroupPoll;
|
notification: NotificationGroupPoll;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationWithStatus
|
<NotificationWithStatus
|
||||||
type='poll'
|
type='poll'
|
||||||
icon={BarChart4BarsIcon}
|
icon={BarChart4BarsIcon}
|
||||||
accountIds={notification.sampleAccountsIds}
|
accountIds={notification.sampleAccountsIds}
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
statusId={notification.statusId}
|
statusId={notification.statusId}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={
|
||||||
|
notification.sampleAccountsIds[0] === me
|
||||||
|
? labelRendererOwn
|
||||||
|
: labelRendererOther
|
||||||
|
}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationReblog: React.FC<{
|
export const NotificationReblog: React.FC<{
|
||||||
notification: NotificationGroupReblog;
|
notification: NotificationGroupReblog;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationGroupWithStatus
|
<NotificationGroupWithStatus
|
||||||
type='reblog'
|
type='reblog'
|
||||||
icon={RepeatIcon}
|
icon={RepeatIcon}
|
||||||
|
@ -25,5 +26,6 @@ export const NotificationReblog: React.FC<{
|
||||||
timestamp={notification.latest_page_notification_at}
|
timestamp={notification.latest_page_notification_at}
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,11 +3,13 @@ import type { NotificationGroupSeveredRelationships } from 'mastodon/models/noti
|
||||||
|
|
||||||
export const NotificationSeveredRelationships: React.FC<{
|
export const NotificationSeveredRelationships: React.FC<{
|
||||||
notification: NotificationGroupSeveredRelationships;
|
notification: NotificationGroupSeveredRelationships;
|
||||||
}> = ({ notification: { event } }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification: { event }, unread }) => (
|
||||||
<RelationshipsSeveranceEvent
|
<RelationshipsSeveranceEvent
|
||||||
type={event.type}
|
type={event.type}
|
||||||
target={event.target_name}
|
target={event.target_name}
|
||||||
followersCount={event.followers_count}
|
followersCount={event.followers_count}
|
||||||
followingCount={event.following_count}
|
followingCount={event.following_count}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationStatus: React.FC<{
|
export const NotificationStatus: React.FC<{
|
||||||
notification: NotificationGroupStatus;
|
notification: NotificationGroupStatus;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationWithStatus
|
<NotificationWithStatus
|
||||||
type='status'
|
type='status'
|
||||||
icon={NotificationsActiveIcon}
|
icon={NotificationsActiveIcon}
|
||||||
|
@ -24,5 +25,6 @@ export const NotificationStatus: React.FC<{
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
statusId={notification.statusId}
|
statusId={notification.statusId}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
|
|
||||||
export const NotificationUpdate: React.FC<{
|
export const NotificationUpdate: React.FC<{
|
||||||
notification: NotificationGroupUpdate;
|
notification: NotificationGroupUpdate;
|
||||||
}> = ({ notification }) => (
|
unread: boolean;
|
||||||
|
}> = ({ notification, unread }) => (
|
||||||
<NotificationWithStatus
|
<NotificationWithStatus
|
||||||
type='update'
|
type='update'
|
||||||
icon={EditIcon}
|
icon={EditIcon}
|
||||||
|
@ -24,5 +25,6 @@ export const NotificationUpdate: React.FC<{
|
||||||
count={notification.notifications_count}
|
count={notification.notifications_count}
|
||||||
statusId={notification.statusId}
|
statusId={notification.statusId}
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { useMemo } from 'react';
|
||||||
|
|
||||||
import type { IconProp } from 'mastodon/components/icon';
|
import type { IconProp } from 'mastodon/components/icon';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import classNames from 'classnames';
|
||||||
import Status from 'mastodon/containers/status_container';
|
import Status from 'mastodon/containers/status_container';
|
||||||
|
|
||||||
import { NamesList } from './names_list';
|
import { NamesList } from './names_list';
|
||||||
|
@ -14,7 +15,8 @@ export const NotificationWithStatus: React.FC<{
|
||||||
statusId: string;
|
statusId: string;
|
||||||
count: number;
|
count: number;
|
||||||
labelRenderer: LabelRenderer;
|
labelRenderer: LabelRenderer;
|
||||||
}> = ({ icon, accountIds, statusId, count, labelRenderer, type }) => {
|
unread: boolean;
|
||||||
|
}> = ({ icon, accountIds, statusId, count, labelRenderer, type, unread }) => {
|
||||||
const label = useMemo(
|
const label = useMemo(
|
||||||
() =>
|
() =>
|
||||||
labelRenderer({
|
labelRenderer({
|
||||||
|
@ -25,7 +27,11 @@ export const NotificationWithStatus: React.FC<{
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`notification-ungrouped focusable notification-ungrouped--${type}`}
|
role='button'
|
||||||
|
className={classNames(
|
||||||
|
`notification-ungrouped focusable notification-ungrouped--${type}`,
|
||||||
|
{ 'notification-ungrouped--unread': unread },
|
||||||
|
)}
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
>
|
>
|
||||||
<div className='notification-ungrouped__header'>
|
<div className='notification-ungrouped__header'>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
{
|
{
|
||||||
"a9ng3b": "{name} and {count, plural, one {# other} other {# others}}",
|
|
||||||
"about.blocks": "Moderated servers",
|
"about.blocks": "Moderated servers",
|
||||||
"about.contact": "Contact:",
|
"about.contact": "Contact:",
|
||||||
"about.disclaimer": "Mastodon is free, open-source software, and a trademark of Mastodon gGmbH.",
|
"about.disclaimer": "Mastodon is free, open-source software, and a trademark of Mastodon gGmbH.",
|
||||||
|
@ -444,6 +443,7 @@
|
||||||
"mute_modal.title": "Mute user?",
|
"mute_modal.title": "Mute user?",
|
||||||
"mute_modal.you_wont_see_mentions": "You won't see posts that mention them.",
|
"mute_modal.you_wont_see_mentions": "You won't see posts that mention them.",
|
||||||
"mute_modal.you_wont_see_posts": "They can still see your posts, but you won't see theirs.",
|
"mute_modal.you_wont_see_posts": "They can still see your posts, but you won't see theirs.",
|
||||||
|
"name_and_others": "{name} and {count, plural, one {# other} other {# others}}",
|
||||||
"navigation_bar.about": "About",
|
"navigation_bar.about": "About",
|
||||||
"navigation_bar.advanced_interface": "Open in advanced web interface",
|
"navigation_bar.advanced_interface": "Open in advanced web interface",
|
||||||
"navigation_bar.blocks": "Blocked users",
|
"navigation_bar.blocks": "Blocked users",
|
||||||
|
|
|
@ -1612,13 +1612,17 @@ body > [data-popper-placement] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__wrapper-direct {
|
.status__wrapper-direct,
|
||||||
|
.notification-group--unread,
|
||||||
|
.notification-ungrouped--unread {
|
||||||
background: rgba($ui-highlight-color, 0.05);
|
background: rgba($ui-highlight-color, 0.05);
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background: rgba($ui-highlight-color, 0.05);
|
background: rgba($ui-highlight-color, 0.1);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__wrapper-direct {
|
||||||
.status__prepend {
|
.status__prepend {
|
||||||
color: $highlight-text-color;
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue