Change hashtag numbers to have clearer labels in web UI (#18864)

This commit is contained in:
Eugen Rochko 2022-07-22 03:17:41 +02:00 committed by GitHub
parent 726931fe4a
commit f5d8501138
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 9 deletions

View File

@ -1,7 +1,7 @@
// @ts-check // @ts-check
import React from 'react'; import React from 'react';
import { Sparklines, SparklinesCurve } from 'react-sparklines'; import { Sparklines, SparklinesCurve } from 'react-sparklines';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from './permalink'; import Permalink from './permalink';
@ -9,6 +9,10 @@ import ShortNumber from 'mastodon/components/short_number';
import Skeleton from 'mastodon/components/skeleton'; import Skeleton from 'mastodon/components/skeleton';
import classNames from 'classnames'; import classNames from 'classnames';
const messages = defineMessages({
totalVolume: { id: 'hashtag.total_volume', defaultMessage: 'Total volume in the last {days, plural, one {day} other {{days} days}}' },
});
class SilentErrorBoundary extends React.Component { class SilentErrorBoundary extends React.Component {
static propTypes = { static propTypes = {
@ -41,10 +45,11 @@ class SilentErrorBoundary extends React.Component {
export const accountsCountRenderer = (displayNumber, pluralReady) => ( export const accountsCountRenderer = (displayNumber, pluralReady) => (
<FormattedMessage <FormattedMessage
id='trends.counter_by_accounts' id='trends.counter_by_accounts'
defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking' defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {{days} days}}'
values={{ values={{
count: pluralReady, count: pluralReady,
counter: <strong>{displayNumber}</strong>, counter: <strong>{displayNumber}</strong>,
days: 2,
}} }}
/> />
); );
@ -64,7 +69,7 @@ ImmutableHashtag.propTypes = {
hashtag: ImmutablePropTypes.map.isRequired, hashtag: ImmutablePropTypes.map.isRequired,
}; };
const Hashtag = ({ name, href, to, people, uses, history, className }) => ( const Hashtag = injectIntl(({ name, href, to, people, uses, history, className, intl }) => (
<div className={classNames('trends__item', className)}> <div className={classNames('trends__item', className)}>
<div className='trends__item__name'> <div className='trends__item__name'>
<Permalink href={href} to={to}> <Permalink href={href} to={to}>
@ -74,9 +79,10 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => (
{typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />} {typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}
</div> </div>
<div className='trends__item__current'> <abbr className='trends__item__current' title={intl.formatMessage(messages.totalVolume, { days: 2 })}>
{typeof uses !== 'undefined' ? <ShortNumber value={uses} /> : <Skeleton width={42} height={36} />} {typeof uses !== 'undefined' ? <ShortNumber value={uses} /> : <Skeleton width={42} height={36} />}
</div> <span className='trends__item__current__asterisk'>*</span>
</abbr>
<div className='trends__item__sparkline'> <div className='trends__item__sparkline'>
<SilentErrorBoundary> <SilentErrorBoundary>
@ -86,7 +92,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => (
</SilentErrorBoundary> </SilentErrorBoundary>
</div> </div>
</div> </div>
); ));
Hashtag.propTypes = { Hashtag.propTypes = {
name: PropTypes.string, name: PropTypes.string,

View File

@ -290,7 +290,11 @@
{ {
"descriptors": [ "descriptors": [
{ {
"defaultMessage": "{count, plural, one {{counter} person} other {{counter} people}} talking", "defaultMessage": "Total volume in the last {days, plural, one {day} other {{days} days}}",
"id": "hashtag.total_volume"
},
{
"defaultMessage": "{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {{days} days}}",
"id": "trends.counter_by_accounts" "id": "trends.counter_by_accounts"
} }
], ],
@ -3752,4 +3756,4 @@
], ],
"path": "app/javascript/mastodon/features/video/index.json" "path": "app/javascript/mastodon/features/video/index.json"
} }
] ]

View File

@ -220,6 +220,7 @@
"hashtag.column_settings.tag_mode.any": "Any of these", "hashtag.column_settings.tag_mode.any": "Any of these",
"hashtag.column_settings.tag_mode.none": "None of these", "hashtag.column_settings.tag_mode.none": "None of these",
"hashtag.column_settings.tag_toggle": "Include additional tags for this column", "hashtag.column_settings.tag_toggle": "Include additional tags for this column",
"hashtag.total_volume": "Total volume in the last {days, plural, one {day} other {{days} days}}",
"home.column_settings.basic": "Basic", "home.column_settings.basic": "Basic",
"home.column_settings.show_reblogs": "Show boosts", "home.column_settings.show_reblogs": "Show boosts",
"home.column_settings.show_replies": "Show replies", "home.column_settings.show_replies": "Show replies",
@ -517,7 +518,7 @@
"timeline_hint.resources.followers": "Followers", "timeline_hint.resources.followers": "Followers",
"timeline_hint.resources.follows": "Follows", "timeline_hint.resources.follows": "Follows",
"timeline_hint.resources.statuses": "Older posts", "timeline_hint.resources.statuses": "Older posts",
"trends.counter_by_accounts": "{count, plural, one {{counter} person} other {{counter} people}} talking", "trends.counter_by_accounts": "{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {{days} days}}",
"trends.trending_now": "Trending now", "trends.trending_now": "Trending now",
"ui.beforeunload": "Your draft will be lost if you leave Mastodon.", "ui.beforeunload": "Your draft will be lost if you leave Mastodon.",
"units.short.billion": "{count}B", "units.short.billion": "{count}B",

View File

@ -7243,6 +7243,13 @@ noscript {
padding-right: 15px; padding-right: 15px;
margin-left: 5px; margin-left: 5px;
color: $secondary-text-color; color: $secondary-text-color;
text-decoration: none;
&__asterisk {
color: $darker-text-color;
font-size: 18px;
vertical-align: super;
}
} }
&__sparkline { &__sparkline {