Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 03:00:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor NumberFields to standalone component (#38455)

Browse Source
This commit is contained in:
diondiondion
2026-03-27 17:13:07 +01:00
committed by GitHub
parent 098d698a7e
commit e303c89e4d
5 changed files with 120 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/javascript/mastodon/components/number_fields/index.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { NavLink } from 'react-router-dom';
import type { MastodonLocationDescriptor } from 'mastodon/components/router';
import classes from './styles.module.scss';
interface WrapperProps {
children: React.ReactNode;
}
export const NumberFields: React.FC<WrapperProps> = ({ children }) => {
return <ul className={classes.list}>{children}</ul>;
};
interface ItemProps {
label: React.ReactNode;
hint?: string;
link?: MastodonLocationDescriptor;
children: React.ReactNode;
}
export const NumberFieldsItem: React.FC<ItemProps> = ({
label,
hint,
link,
children,
}) => {
return (
<li className={classes.item} title={hint}>
{label}
{link ? (
<NavLink exact to={link}>
{children}
</NavLink>
) : (
<strong>{children}</strong>
)}
</li>
);
};

32
app/javascript/mastodon/components/number_fields/styles.module.scss Normal file
View File

@@ -0,0 +1,32 @@
.list {
display: flex;
flex-wrap: wrap;
margin: 8px 0;
padding: 0;
gap: 4px 20px;
font-size: 13px;
color: var(--color-text-secondary);
}
.item {
@container (width < 420px) {
flex: 1 1 0px;
}
a,
strong {
display: block;
font-weight: 600;
color: var(--color-text-primary);
font-size: 15px;
}
a {
padding: 0;
&:hover,
&:focus {
text-decoration: underline;
}
}
}

2
app/javascript/mastodon/components/router.tsx
View File

@@ -26,6 +26,8 @@ export type LocationState = MastodonLocationState | null | undefined;
export type MastodonLocation = ReturnType<typeof useLocation<LocationState>>;
export type MastodonLocationDescriptor = LocationDescriptor<LocationState>;
type HistoryPath = Path | LocationDescriptor<LocationState>;
export const browserHistory = createBrowserHistory<LocationState>();

96
app/javascript/mastodon/features/account_timeline/components/number_fields.tsx
View File

@@ -3,7 +3,6 @@ import type { FC } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import { NavLink } from 'react-router-dom';
import {
@@ -12,13 +11,15 @@ import {
StatusesCounter,
} from '@/mastodon/components/counters';
import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
import {
NumberFields,
NumberFieldsItem,
} from '@/mastodon/components/number_fields';
import { ShortNumber } from '@/mastodon/components/short_number';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { isRedesignEnabled } from '../common';
import classes from './redesign.module.scss';
const LegacyNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
const intl = useIntl();
const account = useAccount(accountId);
@@ -77,56 +78,51 @@ const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
}
return (
<ul
className={classNames(
'account__header__extra__links',
classes.fieldNumbersWrapper,
)}
>
<li>
<FormattedMessage id='account.posts' defaultMessage='Posts' />
<strong title={intl.formatNumber(account.statuses_count)}>
<ShortNumber value={account.statuses_count} />
</strong>
</li>
<NumberFields>
<NumberFieldsItem
label={<FormattedMessage id='account.posts' defaultMessage='Posts' />}
hint={intl.formatNumber(account.statuses_count)}
>
<ShortNumber value={account.statuses_count} />
</NumberFieldsItem>
<li>
<FormattedMessage id='account.followers' defaultMessage='Followers' />
<NavLink
exact
to={`/@${account.acct}/followers`}
title={intl.formatNumber(account.followers_count)}
>
<ShortNumber value={account.followers_count} />
</NavLink>
</li>
<NumberFieldsItem
label={
<FormattedMessage id='account.followers' defaultMessage='Followers' />
}
hint={intl.formatNumber(account.followers_count)}
link={`/@${account.acct}/followers`}
>
<ShortNumber value={account.followers_count} />
</NumberFieldsItem>
<li>
<FormattedMessage id='account.following' defaultMessage='Following' />
<NavLink
exact
to={`/@${account.acct}/following`}
title={intl.formatNumber(account.following_count)}
>
<ShortNumber value={account.following_count} />
</NavLink>
</li>
<NumberFieldsItem
label={
<FormattedMessage id='account.following' defaultMessage='Following' />
}
hint={intl.formatNumber(account.following_count)}
link={`/@${account.acct}/following`}
>
<ShortNumber value={account.following_count} />
</NumberFieldsItem>
<li>
<FormattedMessage id='account.joined_short' defaultMessage='Joined' />
<strong title={intl.formatDate(account.created_at)}>
{createdThisYear ? (
<FormattedDateWrapper
value={account.created_at}
month='short'
day='2-digit'
/>
) : (
<FormattedDateWrapper value={account.created_at} year='numeric' />
)}
</strong>
</li>
</ul>
<NumberFieldsItem
label={
<FormattedMessage id='account.joined_short' defaultMessage='Joined' />
}
hint={intl.formatDate(account.created_at)}
>
{createdThisYear ? (
<FormattedDateWrapper
value={account.created_at}
month='short'
day='2-digit'
/>
) : (
<FormattedDateWrapper value={account.created_at} year='numeric' />
)}
</NumberFieldsItem>
</NumberFields>
);
};

31
app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
View File

@@ -312,37 +312,6 @@ svg.badgeIcon {
}
}
.fieldNumbersWrapper {
display: flex;
font-size: 13px;
padding: 0;
margin: 8px 0;
gap: 20px;
li {
@container (width < 420px) {
flex: 1 1 0px;
}
}
a,
strong {
display: block;
font-weight: 600;
color: var(--color-text-primary);
font-size: 15px;
}
a {
padding: 0;
&:hover,
&:focus {
text-decoration: underline;
}
}
}
.modalCloseButton {
padding: 8px;
border-radius: 50%;