alex
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change hashtag numbers to have clearer labels in web UI 

Port f5d8501138 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
rebase/4.0.0rc1
Eugen Rochko 2022-07-22 03:17:41 +02:00 committed by Claire
parent 969d805e86
commit 1ceebf2710
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/flavours/glitch/components/hashtag.js
View File

@ -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 'flavours/glitch/components/short_number';
import Skeleton from 'flavours/glitch/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 {
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,

7
app/javascript/flavours/glitch/styles/components/search.scss
View File

@ -176,6 +176,13 @@
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 {