Wp-calypso: Reader: show who liked a post on hover

[fraying]

(Putting this in the Conversations milestone, but it's really a To Do for Reader in General.)

In Reader, we display "X Likes" in many places: in the cards in streams, on comments on Fullpost, and soon in Conversations. But there's no way to tell exactly who liked it. Hovering over "X Likes" currently looks like this:

(Link turns blue, but nothing else.)

We should show a list of who liked the thing on hover like we do on frontend sites. Like so:

I suggest we use the standard popover we're using for Share, just with names and avatars in it.

Thoughts?

cc @jancavan

[gziolo]

@fraying I'm going to teach Calypso Basics class at the company meetup. I'm looking for a small task I could code in a front of a class. This one caught my attention. Can we agree on the initial design this week so I could estimate if it would fit 2-3 hours session finished with live deploy? I think it would be an amazing opportunity to implement your request and see people excited about Calypso 😃

[gziolo]

@blowery or @samouri do you know if data nedeed for this feature is already present in Calypso or at least accessible through REST API?

[fraying]

@gziolo Oh that's fantastic!

As for design, we have a standard popover design you can use. (Click any Share link to see it.) All I'd request is that we show the avatars in circles, since that's the standard we use elsewhere.

[gziolo]

This is how it looks on WordPress.com blog at the moment:

It outputs 20 avatars, but only 18 of them are visible on large screen, on mobile it is even more limited. Should we replicate that on Reader, too?

[fraying]

@gziolo We could, but that's not what this ticket is about.

This ticket is about showing who liked a thing (a post or a comment) on hover in the stream (or wherever "X Likes" is shown.

Does that make sense?

[gziolo]

Yes, it makes perfect sense. My question is still valid, what is the max number of avatars of people who liked a given post/comment/whatever displayed in the popover?

[fraying]

@gziolo In Reader, the Share popover is scrollable, so I don't think we need to limit it at all.

[fraying]

I did a quick mockup of what I had in mind.

cc @jancavan

[gziolo]

Thanks for the mockup. Now it is all clear for real 😃 We will work on it together with @belcherj in the front of the class. Let's see how far we can go.

[mtias]

@gziolo there's already a post likes block. It'd be just putting it in a popover:

https://wpcalypso.wordpress.com/devdocs/blocks/post-likes

[samouri]

The current post likes block is fairly specific w/ how it renders and looks/behaves very differently from the mock in https://github.com/Automattic/wp-calypso/issues/17607#issuecomment-327028033. Only similarity is gravatars and likes fetching.

Heres an example of the current PostLikes block:

I'm using the PostLikes block as inspiration but rolling our own for this use case.

[jancavan]

I'm working on mockups for showing gravatars for Likers in fullpost (as well as comments in fullpost) that's not using hover. I'll be posting the prototypes soon.

[jancavan]

Closing this. We have a new design that shows Likers without using hover.

[nylen]

The Reader recently replaced an internal view that has this functionality. I'm fine with consuming this content in the reader, but for parity with the previous view, the list of likers should be available, even if only for internal use and until the new design is implemented. So I'm reopening this issue.

There is now a standard PostLikesPopover component that looks much more like the original mockup. It's also used in the posts list. Here is a PR to adapt and re-use it in this context (doesn't do anything for comments, but it's a start): #24612

See also: p5PDj3-4x7-p2

[bluefuton]

Considering this fixed by https://github.com/Automattic/wp-calypso/pull/24612.

[nylen]

@bluefuton I would have left this open until a CommentLikesPopover is also implemented, but it's up to y'all.

[bluefuton]

@nylen just added a new issue to our feature backlog to cover comment likes: https://github.com/Automattic/wp-calypso/issues/25465