|
@@ -21,6 +21,7 @@ import { DisplayName } from 'mastodon/components/display_name';
|
|
|
import { Icon } from 'mastodon/components/icon';
|
|
|
import { IconButton } from 'mastodon/components/icon_button';
|
|
|
import { VerifiedBadge } from 'mastodon/components/verified_badge';
|
|
|
+import { domain } from 'mastodon/initial_state';
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
|
@@ -28,27 +29,43 @@ const messages = defineMessages({
|
|
|
previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
|
|
|
next: { id: 'lightbox.next', defaultMessage: 'Next' },
|
|
|
dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" },
|
|
|
+ friendsOfFriendsHint: { id: 'follow_suggestions.hints.friends_of_friends', defaultMessage: 'This profile is popular among the people you follow.' },
|
|
|
+ similarToRecentlyFollowedHint: { id: 'follow_suggestions.hints.similar_to_recently_followed', defaultMessage: 'This profile is similar to the profiles you have most recently followed.' },
|
|
|
+ featuredHint: { id: 'follow_suggestions.hints.featured', defaultMessage: 'This profile has been hand-picked by the {domain} team.' },
|
|
|
+ mostFollowedHint: { id: 'follow_suggestions.hints.most_followed', defaultMessage: 'This profile is one of the most followed on {domain}.'},
|
|
|
+ mostInteractionsHint: { id: 'follow_suggestions.hints.most_interactions', defaultMessage: 'This profile has been recently getting a lot of attention on {domain}.' },
|
|
|
});
|
|
|
|
|
|
const Source = ({ id }) => {
|
|
|
- let label;
|
|
|
+ const intl = useIntl();
|
|
|
+
|
|
|
+ let label, hint;
|
|
|
|
|
|
switch (id) {
|
|
|
case 'friends_of_friends':
|
|
|
+ hint = intl.formatMessage(messages.friendsOfFriendsHint);
|
|
|
+ label = <FormattedMessage id='follow_suggestions.personalized_suggestion' defaultMessage='Personalized suggestion' />;
|
|
|
+ break;
|
|
|
case 'similar_to_recently_followed':
|
|
|
+ hint = intl.formatMessage(messages.similarToRecentlyFollowedHint);
|
|
|
label = <FormattedMessage id='follow_suggestions.personalized_suggestion' defaultMessage='Personalized suggestion' />;
|
|
|
break;
|
|
|
case 'featured':
|
|
|
- label = <FormattedMessage id='follow_suggestions.curated_suggestion' defaultMessage="Editors' Choice" />;
|
|
|
+ hint = intl.formatMessage(messages.featuredHint, { domain });
|
|
|
+ label = <FormattedMessage id='follow_suggestions.curated_suggestion' defaultMessage='Staff pick' />;
|
|
|
break;
|
|
|
case 'most_followed':
|
|
|
+ hint = intl.formatMessage(messages.mostFollowedHint, { domain });
|
|
|
+ label = <FormattedMessage id='follow_suggestions.popular_suggestion' defaultMessage='Popular suggestion' />;
|
|
|
+ break;
|
|
|
case 'most_interactions':
|
|
|
+ hint = intl.formatMessage(messages.mostInteractionsHint, { domain });
|
|
|
label = <FormattedMessage id='follow_suggestions.popular_suggestion' defaultMessage='Popular suggestion' />;
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
- <div className='inline-follow-suggestions__body__scrollable__card__text-stack__source'>
|
|
|
+ <div className='inline-follow-suggestions__body__scrollable__card__text-stack__source' title={hint}>
|
|
|
<Icon icon={InfoIcon} />
|
|
|
{label}
|
|
|
</div>
|
|
@@ -92,7 +109,7 @@ const Card = ({ id, sources }) => {
|
|
|
{firstVerifiedField ? <VerifiedBadge link={firstVerifiedField.get('value')} /> : <Source id={sources.get(0)} />}
|
|
|
</div>
|
|
|
|
|
|
- <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={handleFollow} />
|
|
|
+ <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} secondary={following} onClick={handleFollow} />
|
|
|
</div>
|
|
|
);
|
|
|
};
|