treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Display numbers in account header using shortNumberFormat for consistency (#7723)

lolsob-rspec
Eugen Rochko 2018-06-04 05:15:50 +02:00 committed by GitHub
parent 3114ac9655
commit ca9ac011a5
3 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/mastodon/components/hashtag.js
View File

@ -1,16 +1,9 @@
import React from 'react'; import React from 'react';
import { Sparklines, SparklinesCurve } from 'react-sparklines'; import { Sparklines, SparklinesCurve } from 'react-sparklines';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { FormattedMessage, FormattedNumber } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { shortNumberFormat } from '../utils/numbers';
const shortNumberFormat = number => {
if (number < 1000) {
return <FormattedNumber value={number} />;
} else {
return <React.Fragment><FormattedNumber value={number / 1000} maximumFractionDigits={1} />K</React.Fragment>;
}
};
const Hashtag = ({ hashtag }) => ( const Hashtag = ({ hashtag }) => (
<div className='trends__item'> <div className='trends__item'>

9
app/javascript/mastodon/features/account/components/action_bar.js
View File

@ -3,8 +3,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { me } from '../../../initial_state'; import { me } from '../../../initial_state';
import { shortNumberFormat } from '../../../utils/numbers';
const messages = defineMessages({ const messages = defineMessages({
mention: { id: 'account.mention', defaultMessage: 'Mention @{name}' }, mention: { id: 'account.mention', defaultMessage: 'Mention @{name}' },
@ -146,17 +147,17 @@ export default class ActionBar extends React.PureComponent {
<div className='account__action-bar-links'> <div className='account__action-bar-links'>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}> <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
<span><FormattedMessage id='account.posts' defaultMessage='Toots' /></span> <span><FormattedMessage id='account.posts' defaultMessage='Toots' /></span>
<strong><FormattedNumber value={account.get('statuses_count')} /></strong> <strong>{shortNumberFormat(account.get('statuses_count'))}</strong>
</Link> </Link>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`}> <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`}>
<span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span> <span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
<strong><FormattedNumber value={account.get('following_count')} /></strong> <strong>{shortNumberFormat(account.get('following_count'))}</strong>
</Link> </Link>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`}> <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`}>
<span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span> <span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
<strong><FormattedNumber value={account.get('followers_count')} /></strong> <strong>{shortNumberFormat(account.get('followers_count'))}</strong>
</Link> </Link>
</div> </div>
</div> </div>

10
app/javascript/mastodon/utils/numbers.js Normal file
View File

@ -0,0 +1,10 @@
import React, { Fragment } from 'react';
import { FormattedNumber } from 'react-intl';
export const shortNumberFormat = number => {
if (number < 1000) {
return <FormattedNumber value={number} />;
} else {
return <Fragment><FormattedNumber value={number / 1000} maximumFractionDigits={1} />K</Fragment>;
}
};