Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show full follower/following/post count metrics in tooltips #6146

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

DavidBuchanan314
Copy link
Contributor

Before: no way to see non-truncated metrics!

After: full metrics are visible on hover, like so (cursor not visible in screenshot)
image

I've only tested this on desktop firefox, and I assume it doesn't do anything on mobile at all (maybe you can tap and hold? idk)


return (
<View
style={[a.flex_row, a.gap_sm, a.align_center, a.pb_md]}
style={[a.flex_row, a.gap_sm, a.align_center, a.pb_md, {zIndex: 1}]}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

zIndex:1 was required to make the tooltip appear on top of the bio text below, idk if this is the "correct" place to put it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
style={[a.flex_row, a.gap_sm, a.align_center, a.pb_md, {zIndex: 1}]}
style={[a.flex_row, a.gap_sm, a.align_center, a.pb_md, a.z_10]}

Comment on lines -56 to +70
<Text style={[a.font_bold, t.atoms.text, a.text_md]}>
{formatCount(i18n, profile.postsCount || 0)}{' '}
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
{plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
</Text>
<Text
style={[t.atoms.text_contrast_medium, a.text_md]}
title={postCountFull}>
<Text style={[t.atoms.text, a.font_bold, a.text_md]}>{postCount} </Text>
{pluralizedPostCount}
Copy link
Contributor Author

@DavidBuchanan314 DavidBuchanan314 Nov 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to invert the nesting order of these <Text> elements so that the outer one was non-bold, and the inner one was bold, so that the tooltip text would be non-bold when attached to the outer element. Hopefully I didn't break anything in the process.

@DavidBuchanan314
Copy link
Contributor Author

I think the styling of the tooltips could be improved a little (hairline border? shadow?), but I'm not sure where else they're used and didn't want to break anything. (existing styling is in src/style.css)

@surfdude29
Copy link
Contributor

See also #5038

@DavidBuchanan314
Copy link
Contributor Author

DavidBuchanan314 commented Nov 7, 2024

See also #5038

oops!

Notable differences - #5038 tries to only show the tooltip if necessary (i.e. if there was truncation), and uses a more correct/consistent approach to doing the formatting (I should adopt that too)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants