mirrors
/
mastodon
mirror of https://github.com/mastodon/mastodon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Implement notification components

Eugen Rochko 2024-06-05 12:29:43 +02:00 committed by Renaud Chaput
parent 6f7d90035b
commit 9999fdc9fb
No known key found for this signature in database
GPG Key ID: BCFC859D49B46990
22 changed files with 709 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/mastodon/features/notifications/components/moderation_warning.tsx
View File

@ -56,23 +56,18 @@ export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
}
return (
<a
href={`/disputes/strikes/${id}`}
target='_blank'
rel='noopener noreferrer'
className='notification__moderation-warning'
>
<Icon id='warning' icon={GavelIcon} />
<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 className='notification__moderation-warning__content'>
<div className='notification-group__main'>
<p>{intl.formatMessage(messages[action])}</p>
<span 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'
/>
</span>
</a>
</div>
</a>
</div>
);
};

10
app/javascript/mastodon/features/notifications/components/relationships_severance_event.jsx
View File

@ -21,14 +21,14 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
}
return (
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='notification__relationships-severance-event'>
<Icon id='heart_broken' icon={HeartBrokenIcon} />
<div className='notification-group notification-group--link notification-group--relationships-severance-event focusable' tabIndex='0'>
<div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>
<div className='notification__relationships-severance-event__content'>
<div className='notification-group__main'>
<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>
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></a>
</div>
</a>
</div>
);
};

20
app/javascript/mastodon/features/notifications_v2/components/avatar_group.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Link } from 'react-router-dom';
import { Avatar } from 'mastodon/components/avatar';
import { useAppSelector } from 'mastodon/store';
const AvatarWrapper = ({ accountId }) => {
const account = useAppSelector(state => state.getIn(['accounts', accountId]));
return (
<Link to={`/@${account.get('acct')}`} title={`@${account.get('acct')}`}>
<Avatar account={account} size={28} />
</Link>
);
};
export const AvatarGroup = ({ accountIds }) => (
<div className='notification-group__avatar-group'>
{accountIds.map(accountId => <AvatarWrapper key={accountId} accountId={accountId} />)}
</div>
);

37
app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx Normal file
View File

@ -0,0 +1,37 @@
import { FormattedMessage } from 'react-intl';
import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { DisplayName } from 'mastodon/components/display_name';
import { Icon } from 'mastodon/components/icon';
import { useAppSelector } from 'mastodon/store';
export const EmbeddedStatus = ({ statusId }) => {
const status = useAppSelector(state => state.getIn(['statuses', statusId]));
const account = useAppSelector(state => state.getIn(['accounts', status?.get('account')]));
if (!status) {
return null;
}
const content = { __html: status.get('contentHtml') };
return (
<div className='notification-group__embedded-status'>
<div className='notification-group__embedded-status__account'>
<Avatar account={account} size={16} />
<DisplayName account={account} />
</div>
<div className='notification-group__embedded-status__content reply-indicator__content translate' dangerouslySetInnerHTML={content} />
{(status.get('poll') || status.get('media_attachments').size > 0) && (
<div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
{status.get('poll') && <><Icon icon={BarChart4BarsIcon} /><FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' /></>}
{status.get('media_attachments').size > 0 && <><Icon icon={PhotoLibraryIcon} /><FormattedMessage id='reply_indicator.attachments' defaultMessage='{count, plural, one {# attachment} other {# attachments}}' values={{ count: status.get('media_attachments').size }} /></>}
</div>
)}
</div>
);
};

23
app/javascript/mastodon/features/notifications_v2/components/names_list.tsx Normal file
View File

@ -0,0 +1,23 @@
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { useAppSelector } from 'mastodon/store';
export const NamesList = ({ accountIds, total }) => {
const lastAccountId = accountIds[0];
const account = useAppSelector(state => state.getIn(['accounts', lastAccountId]));
const displayedName = <Link to={`/@${account.get('acct')}`} title={`@${account.get('acct')}`}><bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></Link>;
if (total === 1) {
return displayedName;
}
return (
<FormattedMessage
id=''
defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
values={{ name: displayedName, count: total - 1 }}
/>
);
};

62
app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx Normal file
View File

@ -0,0 +1,62 @@
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
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' },
spam: { id: 'report_notification.categories.spam', defaultMessage: 'Spam' },
legal: { id: 'report_notification.categories.legal', defaultMessage: 'Legal' },
violation: { id: 'report_notification.categories.violation', defaultMessage: 'Rule violation' },
});
export const NotificationAdminReport: React.FC<{
notification: NotificationGroupAdminReport;
}> = ({ notification, notification: { report } }) => {
const intl = useIntl();
const targetAccount = useAppSelector(state => state.getIn(['accounts', report.target_account.id]));
const account = useAppSelector(state => state.getIn(['accounts', notification.sampleAccountsIds[0]]));
const values = { name: <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />, target: <bdi dangerouslySetInnerHTML={{ __html: targetAccount.get('display_name_html') }} />, category: intl.formatMessage(messages[report.category]), count: report.status_ids.length };
let message;
if (report.status_ids.length > 0) {
if (report.category === 'other') {
message = <FormattedMessage id='notification.admin.report_account_other' defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target}' values={values} />;
} else {
message = <FormattedMessage id='notification.admin.report_account' defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target} for {category}' values={values} />;
}
} else {
if (report.category === 'other') {
message = <FormattedMessage id='notification.admin.report_statuses_other' defaultMessage='{name} reported {target}' values={values} />;
} else {
message = <FormattedMessage id='notification.admin.report_statuses' defaultMessage='{name} reported {target} for {category}' values={values} />;
}
}
return (
<a href={`/admin/reports/${report.id}`} target='_blank' rel='noopener noreferrer' className='notification-group notification-group--link notification-group--admin-report focusable' tabIndex='0'>
<div className='notification-group__icon'><Icon id='flag' icon={FlagIcon} /></div>
<div className='notification-group__main'>
<div className='notification-group__main__header'>
<div className='notification-group__main__header__label'>
{message}
<RelativeTimestamp timestamp={report.created_at} />
</div>
</div>
{report.comment.length > 0 && <div className='notification-group__embedded-status__content'>“{report.comment}”</div>}
</div>
</a>
);
};

22
app/javascript/mastodon/features/notifications_v2/components/notification_admin_sign_up.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import type { NotificationGroupAdminSignUp } from 'mastodon/models/notification_group';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.admin.sign_up' defaultMessage='{name} signed up' values={values} />;
export const NotificationAdminSignUp: React.FC<{
notification: NotificationGroupAdminSignUp;
}> = ({ notification }) => (
<NotificationGroupWithStatus
type='admin-sign-up'
icon={PersonAddIcon}
accountIds={notification.sampleAccountsIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
/>
);

23
app/javascript/mastodon/features/notifications_v2/components/notification_favourite.tsx Normal file
View File

@ -0,0 +1,23 @@
import { FormattedMessage } from 'react-intl';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import type { NotificationGroupFavourite } from 'mastodon/models/notification_group';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favorited your status' values={values} />;
export const NotificationFavourite: React.FC<{
notification: NotificationGroupFavourite;
}> = ({ notification }) => (
<NotificationGroupWithStatus
type='favourite'
icon={StarIcon}
accountIds={notification.sampleAccountsIds}
statusId={notification.statusId}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
/>
);

22
app/javascript/mastodon/features/notifications_v2/components/notification_follow.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import type { NotificationGroupFollow } from 'mastodon/models/notification_group';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={values} />;
export const NotificationFollow: React.FC<{
notification: NotificationGroupFollow;
}> = ({ notification }) => (
<NotificationGroupWithStatus
type='follow'
icon={PersonAddIcon}
accountIds={notification.sampleAccountsIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
/>
);

22
app/javascript/mastodon/features/notifications_v2/components/notification_follow_request.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import type { NotificationGroupFollowRequest } from 'mastodon/models/notification_group';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={values} />;
export const NotificationFollowRequest: React.FC<{
notification: NotificationGroupFollowRequest;
}> = ({ notification }) => (
<NotificationGroupWithStatus
type='follow-request'
icon={PersonAddIcon}
accountIds={notification.sampleAccountsIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
/>
);

86
app/javascript/mastodon/features/notifications_v2/components/notification_group.tsx
View File

@ -1,42 +1,94 @@
import { useMemo } from 'react';
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';
import { NotificationFollow } from './notification_follow';
import { NotificationFollowRequest } from './notification_follow_request';
import { NotificationMention } from './notification_mention';
import { NotificationModerationWarning } from './notification_moderation_warning';
import { NotificationPoll } from './notification_poll';
import { NotificationReblog } from './notification_reblog';
import { NotificationSeveredRelationships } from './notification_severed_relationships';
import { NotificationStatus } from './notification_status';
import { NotificationUpdate } from './notification_update';
export const NotificationGroup: React.FC<{
notificationGroupId: NotificationGroupModel['group_key'];
unread: boolean;
onMoveUp: unknown;
onMoveDown: unknown;
}> = ({ notificationGroupId }) => {
}> = ({ notificationGroupId, onMoveUp, onMoveDown }) => {
const notificationGroup = useAppSelector((state) =>
state.notificationsGroups.groups.find(
(item) => item.type !== 'gap' && item.group_key === notificationGroupId,
),
);
const handlers = useMemo(() => ({
moveUp: () => {
onMoveUp(notificationGroupId);
},
moveDown: () => {
onMoveDown(notificationGroupId);
},
}), [notificationGroupId, onMoveUp, onMoveDown]);
if (!notificationGroup || notificationGroup.type === 'gap') return null;
let content;
switch (notificationGroup.type) {
case 'reblog':
return <NotificationReblog notification={notificationGroup} />;
case 'follow':
case 'follow_request':
content = <NotificationReblog notification={notificationGroup} />;
break;
case 'favourite':
case 'mention':
case 'poll':
case 'status':
case 'update':
case 'admin.sign_up':
case 'admin.report':
case 'moderation_warning':
content = <NotificationFavourite notification={notificationGroup} />;
break;
case 'severed_relationships':
content = <NotificationSeveredRelationships notification={notificationGroup} />;
break;
case 'mention':
content = <NotificationMention notification={notificationGroup} />;
break;
case 'follow':
content = <NotificationFollow notification={notificationGroup} />;
break;
case 'follow_request':
content = <NotificationFollowRequest notification={notificationGroup} />;
break;
case 'poll':
content = <NotificationPoll notification={notificationGroup} />;
break;
case 'status':
content = <NotificationStatus notification={notificationGroup} />;
break;
case 'update':
content = <NotificationUpdate notification={notificationGroup} />;
break;
case 'admin.sign_up':
content = <NotificationAdminSignUp notification={notificationGroup} />;
break;
case 'admin.report':
content = <NotificationAdminReport notification={notificationGroup} />;
break;
case 'moderation_warning':
content = <NotificationModerationWarning notification={notificationGroup} />;
break;
default:
return (
<div>
<pre>{JSON.stringify(notificationGroup, undefined, 2)}</pre>
<hr />
</div>
);
return null;
}
return (
<HotKeys handlers={handlers}>
{content}
</HotKeys>
);
};

46
app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { Icon } from 'mastodon/components/icon';
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
import { AvatarGroup } from './avatar_group';
import { EmbeddedStatus } from './embedded_status';
import { NamesList } from './names_list';
export const NotificationGroupWithStatus = ({
icon,
timestamp,
accountIds,
count,
statusId,
labelRenderer,
type,
}) => {
const label = useMemo(() =>
labelRenderer({ name: <NamesList accountIds={accountIds} total={count} /> }), [labelRenderer, accountIds, count]);
return (
<div className={`notification-group focusable notification-group--${type}`} tabIndex='0'>
<div className='notification-group__icon'><Icon icon={icon} /></div>
<div className='notification-group__main'>
<div className='notification-group__main__header'>
<AvatarGroup accountIds={accountIds} />
<div className='notification-group__main__header__label'>
{label}
<RelativeTimestamp timestamp={timestamp} />
</div>
</div>
{statusId && (
<div className='notification-group__main__status'>
<EmbeddedStatus statusId={statusId} />
</div>
)}
</div>
</div>
);
};

22
app/javascript/mastodon/features/notifications_v2/components/notification_mention.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import ReplyIcon from '@/material-icons/400-24px/reply-fill.svg?react';
import type { NotificationGroupMention } from 'mastodon/models/notification_group';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.mention' defaultMessage='{name} mentioned you' values={values} />;
export const NotificationMention: React.FC<{
notification: NotificationGroupMention;
}> = ({ notification }) => (
<NotificationWithStatus
type='mention'
icon={ReplyIcon}
accountIds={notification.sampleAccountsIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={labelRenderer}
/>
);

11
app/javascript/mastodon/features/notifications_v2/components/notification_moderation_warning.tsx Normal file
View File

@ -0,0 +1,11 @@
import { ModerationWarning } from 'mastodon/features/notifications/components/moderation_warning';
import type { NotificationGroupModerationWarning } from 'mastodon/models/notification_group';
export const NotificationModerationWarning: React.FC<{
notification: NotificationGroupModerationWarning;
}> = ({ notification: { event } }) => (
<ModerationWarning
action={event.action}
id={event.id}
/>
);

22
app/javascript/mastodon/features/notifications_v2/components/notification_poll.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
import type { NotificationGroupPoll } from 'mastodon/models/notification_group';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.poll' defaultMessage='A poll you have voted in has ended' />;
export const NotificationPoll: React.FC<{
notification: NotificationGroupPoll;
}> = ({ notification }) => (
<NotificationWithStatus
type='poll'
icon={BarChart4BarsIcon}
accountIds={notification.sampleAccountsIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={labelRenderer}
/>
);

22
app/javascript/mastodon/features/notifications_v2/components/notification_reblog.tsx
View File

@ -1,7 +1,23 @@
import { FormattedMessage } from 'react-intl';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import type { NotificationGroupReblog } from 'mastodon/models/notification_group';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={values} />;
export const NotificationReblog: React.FC<{
notification: NotificationGroupReblog;
}> = ({ notification }) => {
return <div>reblog {notification.group_key}</div>;
};
}> = ({ notification }) => (
<NotificationGroupWithStatus
type='reblog'
icon={RepeatIcon}
accountIds={notification.sampleAccountsIds}
statusId={notification.statusId}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
/>
);

13
app/javascript/mastodon/features/notifications_v2/components/notification_severed_relationships.tsx Normal file
View File

@ -0,0 +1,13 @@
import { RelationshipsSeveranceEvent } from 'mastodon/features/notifications/components/relationships_severance_event';
import type { NotificationGroupSeveredRelationships } from 'mastodon/models/notification_group';
export const NotificationSeveredRelationships: React.FC<{
notification: NotificationGroupSeveredRelationships;
}> = ({ notification: { event } }) => (
<RelationshipsSeveranceEvent
type={event.type}
target={event.target_name}
followersCount={event.followers_count}
followingCount={event.following_count}
/>
);

22
app/javascript/mastodon/features/notifications_v2/components/notification_status.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
import type { NotificationGroupStatus } from 'mastodon/models/notification_group';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.status' defaultMessage='{name} just posted' values={values} />;
export const NotificationStatus: React.FC<{
notification: NotificationGroupStatus;
}> = ({ notification }) => (
<NotificationWithStatus
type='status'
icon={NotificationsActiveIcon}
accountIds={notification.sampleAccountsIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={labelRenderer}
/>
);

22
app/javascript/mastodon/features/notifications_v2/components/notification_update.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FormattedMessage } from 'react-intl';
import EditIcon from '@/material-icons/400-24px/edit.svg?react';
import type { NotificationGroupUpdate } from 'mastodon/models/notification_group';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer = values =>
<FormattedMessage id='notification.update' defaultMessage='{name} edited a post' values={values} />;
export const NotificationUpdate: React.FC<{
notification: NotificationGroupUpdate;
}> = ({ notification }) => (
<NotificationWithStatus
type='update'
icon={EditIcon}
accountIds={notification.sampleAccountsIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={labelRenderer}
/>
);

35
app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx Normal file
View File

@ -0,0 +1,35 @@
import { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { Icon } from 'mastodon/components/icon';
import Status from 'mastodon/containers/status_container';
import { NamesList } from './names_list';
export const NotificationWithStatus = ({
icon,
accountIds,
statusId,
count,
labelRenderer,
type,
}) => {
const label = useMemo(() => labelRenderer({ name: <NamesList accountIds={accountIds} total={count} /> }), [labelRenderer, accountIds, count]);
return (
<div className={`notification-ungrouped focusable notification-ungrouped--${type}`} tabIndex='0'>
<div className='notification-ungrouped__header'>
<div className='notification-ungrouped__header__icon'><Icon icon={icon} /></div>
{label}
</div>
<Status
id={statusId}
contextType='notifications'
withDismiss
/>
</div>
);
};

5
app/javascript/mastodon/locales/en.json
View File

@ -1,4 +1,5 @@
{
"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.",
@ -470,6 +471,10 @@
"navigation_bar.security": "Security",
"not_signed_in_indicator.not_signed_in": "You need to login to access this resource.",
"notification.admin.report": "{name} reported {target}",
"notification.admin.report_account": "{name} reported {count, plural, one {one post} other {# posts}} from {target} for {category}",
"notification.admin.report_account_other": "{name} reported {count, plural, one {one post} other {# posts}} from {target}",
"notification.admin.report_statuses": "{name} reported {target} for {category}",
"notification.admin.report_statuses_other": "{name} reported {target}",
"notification.admin.sign_up": "{name} signed up",
"notification.favourite": "{name} favorited your post",
"notification.follow": "{name} followed you",

201
app/javascript/styles/mastodon/components.scss
View File

@ -2210,41 +2210,28 @@ a.account__display-name {
}
}
.notification__relationships-severance-event,
.notification__moderation-warning {
display: flex;
gap: 16px;
.notification-group--link {
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 {
.notification-group__main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex-grow: 1;
font-size: 16px;
line-height: 24px;
font-size: 15px;
line-height: 22px;
strong {
strong,
bdi {
font-weight: 700;
}
.link-button {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
}
}
@ -10345,6 +10332,180 @@ noscript {
}
}
.notification-group {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 16px;
border-bottom: 1px solid var(--background-border-color);
&__icon {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: $highlight-text-color;
.icon {
width: 28px;
height: 28px;
}
}
&--favourite &__icon {
color: $gold-star;
}
&--reblog &__icon {
color: $valid-value-color;
}
&--relationships-severance-event &__icon,
&--admin-report &__icon,
&--admin-sign-up &__icon {
color: $dark-text-color;
}
&--moderation-warning &__icon {
color: $red-bookmark;
}
&__main {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
&__header {
display: flex;
flex-direction: column;
gap: 8px;
&__label {
display: flex;
gap: 8px;
font-size: 15px;
line-height: 22px;
color: $darker-text-color;
a {
color: inherit;
text-decoration: none;
}
bdi {
font-weight: 700;
color: $primary-text-color;
}
time {
color: $dark-text-color;
}
}
}
&__status {
border: 1px solid var(--background-border-color);
border-radius: 8px;
padding: 8px;
}
}
&__avatar-group {
display: flex;
gap: 8px;
}
.status {
padding: 0;
border: 0;
}
&__embedded-status {
&__account {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
color: $dark-text-color;
bdi {
color: inherit;
}
}
.account__avatar {
opacity: 0.5;
}
&__content {
font-size: 15px;
line-height: 22px;
color: $dark-text-color;
p,
a {
color: inherit;
}
}
}
}
.notification-ungrouped {
padding: 16px;
border-bottom: 1px solid var(--background-border-color);
&__header {
display: flex;
align-items: center;
gap: 8px;
color: $dark-text-color;
font-size: 15px;
line-height: 22px;
font-weight: 500;
padding-inline-start: 24px;
margin-bottom: 16px;
&__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
.icon {
width: 16px;
height: 16px;
}
}
a {
color: inherit;
text-decoration: none;
}
}
.status {
border: 0;
padding: 0;
&__avatar {
width: 40px;
height: 40px;
.account__avatar {
width: 40px !important;
height: 40px !important;
}
}
}
.notification__report {
border: 0;
padding: 0;
}
}
.hover-card-controller[data-popper-reference-hidden='true'] {
opacity: 0;
pointer-events: none;