Leatherface/mastodon
1
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

[Glitch] Refactor NumberFields to standalone component

Browse Source 
Port e303c89e4d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2026-03-27 17:13:07 +01:00
committed by Claire
parent 1a816434cf
commit 7ccada36db
5 changed files with 120 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,40 @@
import { NavLink } from 'react-router-dom';
import type { MastodonLocationDescriptor } from 'flavours/glitch/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/flavours/glitch/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/flavours/glitch/components/router.tsx
View File

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

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

31
app/javascript/flavours/glitch/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 { .modalCloseButton {
padding: 8px; padding: 8px;
border-radius: 50%; border-radius: 50%;