-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
base: main
Are you sure you want to change the base?
Conversation
|
||
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}]} |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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]} |
<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} |
There was a problem hiding this comment.
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.
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) |
See also #5038 |
Before: no way to see non-truncated metrics!
After: full metrics are visible on hover, like so (cursor not visible in screenshot)
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)