Change hashtag numbers to have clearer labels in web UI (#18864)
This commit is contained in:
parent
4536638050
commit
436e52927a
4 changed files with 27 additions and 9 deletions
|
@ -1,7 +1,7 @@
|
|||
// @ts-check
|
||||
import React from 'react';
|
||||
import { Sparklines, SparklinesCurve } from 'react-sparklines';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Permalink from './permalink';
|
||||
|
@ -9,6 +9,10 @@ import ShortNumber from 'mastodon/components/short_number';
|
|||
import Skeleton from 'mastodon/components/skeleton';
|
||||
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 {
|
||||
|
||||
static propTypes = {
|
||||
|
@ -41,10 +45,11 @@ class SilentErrorBoundary extends React.Component {
|
|||
export const accountsCountRenderer = (displayNumber, pluralReady) => (
|
||||
<FormattedMessage
|
||||
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={{
|
||||
count: pluralReady,
|
||||
counter: <strong>{displayNumber}</strong>,
|
||||
days: 2,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
@ -64,7 +69,7 @@ ImmutableHashtag.propTypes = {
|
|||
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='trends__item__name'>
|
||||
<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} />}
|
||||
</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} />}
|
||||
</div>
|
||||
<span className='trends__item__current__asterisk'>*</span>
|
||||
</abbr>
|
||||
|
||||
<div className='trends__item__sparkline'>
|
||||
<SilentErrorBoundary>
|
||||
|
@ -86,7 +92,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => (
|
|||
</SilentErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
));
|
||||
|
||||
Hashtag.propTypes = {
|
||||
name: PropTypes.string,
|
||||
|
|
|
@ -290,7 +290,11 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
],
|
||||
|
|
|
@ -220,6 +220,7 @@
|
|||
"hashtag.column_settings.tag_mode.any": "Any of these",
|
||||
"hashtag.column_settings.tag_mode.none": "None of these",
|
||||
"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.show_reblogs": "Show boosts",
|
||||
"home.column_settings.show_replies": "Show replies",
|
||||
|
@ -517,7 +518,7 @@
|
|||
"timeline_hint.resources.followers": "Followers",
|
||||
"timeline_hint.resources.follows": "Follows",
|
||||
"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",
|
||||
"ui.beforeunload": "Your draft will be lost if you leave Mastodon.",
|
||||
"units.short.billion": "{count}B",
|
||||
|
|
|
@ -7243,6 +7243,13 @@ noscript {
|
|||
padding-right: 15px;
|
||||
margin-left: 5px;
|
||||
color: $secondary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&__asterisk {
|
||||
color: $darker-text-color;
|
||||
font-size: 18px;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
&__sparkline {
|
||||
|
|
Loading…
Reference in a new issue