forked from treehouse/mastodon
Fix #291 - Add visual indication that numbers for remote users may be inaccurate
parent
7f0d1b8cc0
commit
e1b00757a6
|
@ -11,7 +11,8 @@ const messages = defineMessages({
|
||||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||||
report: { id: 'account.report', defaultMessage: 'Report @{name}' }
|
report: { id: 'account.report', defaultMessage: 'Report @{name}' },
|
||||||
|
disclaimer: { id: 'account.disclaimer', defaultMessage: 'This user is from another instance. This number may be larger.' }
|
||||||
});
|
});
|
||||||
|
|
||||||
const outerDropdownStyle = {
|
const outerDropdownStyle = {
|
||||||
|
@ -43,6 +44,7 @@ const ActionBar = React.createClass({
|
||||||
const { account, me, intl } = this.props;
|
const { account, me, intl } = this.props;
|
||||||
|
|
||||||
let menu = [];
|
let menu = [];
|
||||||
|
let extraInfo = '';
|
||||||
|
|
||||||
menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention });
|
menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention });
|
||||||
menu.push(null);
|
menu.push(null);
|
||||||
|
@ -61,6 +63,10 @@ const ActionBar = React.createClass({
|
||||||
menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport });
|
menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (account.get('domain') !== null) {
|
||||||
|
extraInfo = <abbr title={intl.formatMessage(messages.disclaimer)}>*</abbr>;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='account__action-bar'>
|
<div className='account__action-bar'>
|
||||||
<div style={outerDropdownStyle}>
|
<div style={outerDropdownStyle}>
|
||||||
|
@ -70,17 +76,17 @@ const ActionBar = React.createClass({
|
||||||
<div style={outerLinksStyle}>
|
<div style={outerLinksStyle}>
|
||||||
<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='Posts' /></span>
|
<span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
|
||||||
<strong><FormattedNumber value={account.get('statuses_count')} /></strong>
|
<strong><FormattedNumber value={account.get('statuses_count')} /> {extraInfo}</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><FormattedNumber value={account.get('following_count')} /> {extraInfo}</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><FormattedNumber value={account.get('followers_count')} /> {extraInfo}</strong>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -391,6 +391,10 @@ a.status__content__spoiler-link {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $color5;
|
color: $color5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
color: lighten($color1, 26%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name {
|
.status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name {
|
||||||
|
|
Loading…
Reference in New Issue