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