Spectrum: Show user hover card in more places

[mxstbr]

We've got a very nice hover card component that shows a users' details when you hover over their avatar next to a message:

Unfortunately, that hover card is not applied consistently at all, in fact it only exists at that one single specific location (when hovering over avatars in messages) and nowhere else. We should show that hover card in more places, when hovering over these things:

• [ ] Message author name and username
• [ ] Thread author avatar and name
• [x] Mentions
• [ ] Maybe participants heads on thread cards?

If you would like to contribute to Spectrum, this would be a great issue to start at! Take one of the things above, add the hover card component to it (similar to what we do for message avatars right now) and submit a PR. :100:

[fullstackguyhere]

Hey, I would like to work on this issue. Could I?

[mxstbr]

Yes please! :100:

[fullstackguyhere]

Great. I am starting to work on this issue then!

[mxstbr]

Awesome! Feel free to submit a PR once you got it in one new place, and we can merge it in small increments.

[fullstackguyhere]

@mxstbr What is the homepage url and authorization callback url to be used in github?

[mxstbr]

Sorry? Why do you need that? 🤔

[fullstackguyhere]

@mxstbr To sign in using github...so i need urls using localhost.

[fullstackguyhere]

Without signing, i am unable to do anything apparently.

[brianlovin]

@fullstackguyhere the best way to handle this will be to make a new issue with a bug report, and share any console logs or errors you're running into so we can help debug :) Thanks!

[fullstackguyhere]

@brianlovin done that!

[fullstackguyhere]

@mxstbr regarding adding hover card for Message author name and username, i have one doubt. Can I ask you?

[mxstbr]

@fullstackguyhere instead of asking whether you can ask, just ask :wink:

[fullstackguyhere]

Sure @mxstbr So for adding hover card for Message author name and username, I check the code and found that have to add hoverprofile component in AuthorByline in index.js for messageGroup. In order to do so I would to change AuthorByline component into a class component. Is such change acceptable?

[mxstbr]

For sure @fullstackguyhere, for sure.

[fullstackguyhere]

Hi @mxstbr Just an update. I figured and completed writing code to show hover card for thread author avatars. Currently facing difficulty to do the same for username.

[mxstbr]

Don't worry about that, if it's too hard let's just do the avatar for now @fullstackguyhere!

[fullstackguyhere]

@mxstbr Could you please tell me how to use mentions feature?

[mxstbr]

Write anything like @somebody, that's it!

[fullstackguyhere]

So basically you want hover card when we hover at @somebody right? @mxstbr

[mxstbr]

Yep!

[fullstackguyhere]

I have applied hovercard over participant's heads, however, facing below issue:-

The hover card is getting cut off....any suggestions? @mxstbr

[mxstbr]

Maybe a higher z-index will help? Not sure, if you push your branch and submit a WIP PR I can take a look!

[fullstackguyhere]

@mxstbr I have only been able to make changes for thread author avatar...should i submit a pr?
Also where to put WIP in pr request?

[brianlovin]

Yeah, that overflow hidden is going to cause trouble there; honestly I think at this point the best approach for these hover cards is to have one single component that sits outside of the app (react portal perhaps) and we populate it with data and state when certain elements are hovered. Afaik this is how Twitter handles the same problem - they have one hover card, and add a data-attr to different elements that contains an id to tell the card where to position and what data to populate with.

Hope that makes sense; not totally necessary now, but will definitely help us avoid the problems like in the screenshot above, and may be worth thinking about as we add lots of hover profiles which might slow things down over time

[fullstackguyhere]

2918 Have a look at my changes @mxstbr

[fullstackguyhere]

@mxstbr @brianlovin I solved the cutting out part partially by setting overflow-y as visible for InboxThreadItem and removing the overflow-x: hidden property.. I removed the overflow-x property. However, this causing issue for uppermost thread cards on the current scroll. See below:-

For feed cards that are lower on the page, this does not happen.

I think this is because of overflow-y: visible that i added. Any way to fix this?

[brianlovin]

Looks like some z-index issues! Want to try tweaking the css of the hover card using the zindex scale we have in src/components/globals?

[fullstackguyhere]

I did that but to no avail...I tried setting it to avatar but it did affect much. Do you have any hints @brianlovin

Getting problem like below:-

I changed z-index of hover wrapper to tooltip+1.

[fullstackguyhere]

2918 Have a look at my preliminary changes @mxstbr

[brianlovin]

I added these everywhere as well as community + channel hover cards!