monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change follow suggestions design in web UI 

Port 63f4ea055a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-02-19 12:09:58 +01:00 committed by Claire
parent 26924a0c7d
commit 200e11ae88
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx
View File

@ -21,6 +21,7 @@ import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
import { domain } from 'flavours/glitch/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>
);
};

9
app/javascript/flavours/glitch/styles/components.scss
View File

@ -10005,6 +10005,7 @@ noscript {
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding-bottom: 0;
border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%);
background: mix($ui-base-color, $ui-highlight-color, 95%);
@ -10043,6 +10044,7 @@ noscript {
cursor: pointer;
top: 0;
color: $primary-text-color;
opacity: 0.5;
&.left {
left: 0;
@ -10070,6 +10072,8 @@ noscript {
&:hover,
&:focus,
&:active {
opacity: 1;
.inline-follow-suggestions__body__scroll-button__icon {
background: lighten($ui-highlight-color, 4%);
}
@ -10081,11 +10085,10 @@ noscript {
flex-wrap: nowrap;
gap: 16px;
padding: 16px;
padding-bottom: 0;
scroll-snap-type: x mandatory;
scroll-padding: 16px;
scroll-behavior: smooth;
overflow-x: hidden;
overflow-x: scroll;
&__card {
background: darken($ui-base-color, 4%);
@ -10110,6 +10113,7 @@ noscript {
position: absolute;
inset-inline-end: 8px;
top: 8px;
opacity: 0.75;
}
&__avatar {
@ -10147,6 +10151,7 @@ noscript {
gap: 4px;
overflow: hidden;
white-space: nowrap;
cursor: help;
> span {
overflow: hidden;