mirror of https://github.com/Siphonay/mastodon
[Glitch] Add a follow button & follower count on follow notifications
Port 32a78e56e0
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
3ea00508ac
commit
ceeabffee5
|
@ -1,7 +1,11 @@
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
|
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
|
||||||
|
import { FollowersCounter } from 'flavours/glitch/components/counters';
|
||||||
|
import { FollowButton } from 'flavours/glitch/components/follow_button';
|
||||||
|
import { ShortNumber } from 'flavours/glitch/components/short_number';
|
||||||
import type { NotificationGroupFollow } from 'flavours/glitch/models/notification_group';
|
import type { NotificationGroupFollow } from 'flavours/glitch/models/notification_group';
|
||||||
|
import { useAppSelector } from 'flavours/glitch/store';
|
||||||
|
|
||||||
import type { LabelRenderer } from './notification_group_with_status';
|
import type { LabelRenderer } from './notification_group_with_status';
|
||||||
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
import { NotificationGroupWithStatus } from './notification_group_with_status';
|
||||||
|
@ -14,18 +18,45 @@ const labelRenderer: LabelRenderer = (values) => (
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const FollowerCount: React.FC<{ accountId: string }> = ({ accountId }) => {
|
||||||
|
const account = useAppSelector((s) => s.accounts.get(accountId));
|
||||||
|
|
||||||
|
if (!account) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ShortNumber value={account.followers_count} renderer={FollowersCounter} />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const NotificationFollow: React.FC<{
|
export const NotificationFollow: React.FC<{
|
||||||
notification: NotificationGroupFollow;
|
notification: NotificationGroupFollow;
|
||||||
unread: boolean;
|
unread: boolean;
|
||||||
}> = ({ notification, unread }) => (
|
}> = ({ notification, unread }) => {
|
||||||
<NotificationGroupWithStatus
|
let actions: JSX.Element | undefined;
|
||||||
type='follow'
|
let additionalContent: JSX.Element | undefined;
|
||||||
icon={PersonAddIcon}
|
|
||||||
iconId='person-add'
|
if (notification.sampleAccountIds.length === 1) {
|
||||||
accountIds={notification.sampleAccountIds}
|
// only display those if the group contains 1 account, otherwise it does not makes sense
|
||||||
timestamp={notification.latest_page_notification_at}
|
const account = notification.sampleAccountIds[0];
|
||||||
count={notification.notifications_count}
|
|
||||||
labelRenderer={labelRenderer}
|
if (account) {
|
||||||
unread={unread}
|
actions = <FollowButton accountId={notification.sampleAccountIds[0]} />;
|
||||||
/>
|
additionalContent = <FollowerCount accountId={account} />;
|
||||||
);
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NotificationGroupWithStatus
|
||||||
|
type='follow'
|
||||||
|
icon={PersonAddIcon}
|
||||||
|
iconId='person-add'
|
||||||
|
accountIds={notification.sampleAccountIds}
|
||||||
|
timestamp={notification.latest_page_notification_at}
|
||||||
|
count={notification.notifications_count}
|
||||||
|
labelRenderer={labelRenderer}
|
||||||
|
unread={unread}
|
||||||
|
actions={actions}
|
||||||
|
additionalContent={additionalContent}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -46,7 +46,7 @@ export const NotificationFollowRequest: React.FC<{
|
||||||
}, [dispatch, notification.sampleAccountIds]);
|
}, [dispatch, notification.sampleAccountIds]);
|
||||||
|
|
||||||
const actions = (
|
const actions = (
|
||||||
<div className='notification-group__actions'>
|
<>
|
||||||
<IconButton
|
<IconButton
|
||||||
title={intl.formatMessage(messages.reject)}
|
title={intl.formatMessage(messages.reject)}
|
||||||
icon='times'
|
icon='times'
|
||||||
|
@ -59,7 +59,7 @@ export const NotificationFollowRequest: React.FC<{
|
||||||
iconComponent={CheckIcon}
|
iconComponent={CheckIcon}
|
||||||
onClick={onAuthorize}
|
onClick={onAuthorize}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -31,6 +31,7 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
labelSeeMoreHref?: string;
|
labelSeeMoreHref?: string;
|
||||||
type: string;
|
type: string;
|
||||||
unread: boolean;
|
unread: boolean;
|
||||||
|
additionalContent?: JSX.Element;
|
||||||
}> = ({
|
}> = ({
|
||||||
icon,
|
icon,
|
||||||
iconId,
|
iconId,
|
||||||
|
@ -43,6 +44,7 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
labelSeeMoreHref,
|
labelSeeMoreHref,
|
||||||
type,
|
type,
|
||||||
unread,
|
unread,
|
||||||
|
additionalContent,
|
||||||
}) => {
|
}) => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
@ -92,7 +94,9 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
<div className='notification-group__main__header__wrapper'>
|
<div className='notification-group__main__header__wrapper'>
|
||||||
<AvatarGroup accountIds={accountIds} />
|
<AvatarGroup accountIds={accountIds} />
|
||||||
|
|
||||||
{actions}
|
{actions && (
|
||||||
|
<div className='notification-group__actions'>{actions}</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='notification-group__main__header__label'>
|
<div className='notification-group__main__header__label'>
|
||||||
|
@ -106,6 +110,12 @@ export const NotificationGroupWithStatus: React.FC<{
|
||||||
<EmbeddedStatus statusId={statusId} />
|
<EmbeddedStatus statusId={statusId} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{additionalContent && (
|
||||||
|
<div className='notification-group__main__additional-content'>
|
||||||
|
{additionalContent}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</HotKeys>
|
</HotKeys>
|
||||||
|
|
|
@ -11043,6 +11043,13 @@ noscript {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
container-type: inline-size;
|
||||||
|
|
||||||
|
@container (width < 350px) {
|
||||||
|
&__header time {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -11082,6 +11089,11 @@ noscript {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__additional-content {
|
||||||
|
color: $darker-text-color;
|
||||||
|
margin-top: -8px; // to offset the parent's `gap` property
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__avatar-group {
|
&__avatar-group {
|
||||||
|
|
Loading…
Reference in New Issue