Show usernames in Reacted popover

UX
1

Is there an option or plans for adding an option to show full user names instead of just avatars in the reaction detail popover?

Especially on mobile, it’s spectacularly useless unless you know all the avatars by heart, a super power I’ve never possessed in any community I’ve been part of.

IMO you also don’t need to be especially space efficient in that popover, as it’s only opened intentionally on click.

1 Like
2

I’d just like to note that clicking on the avatars in the reaction pop-up opens the full user card, which includes the full username. Does that fulfill your need here?

2 Likes
3

Thanks, but no. At least to me, the whole point of the popover is to get a quick overview of the reactions given. I don’t want to have to click into each user’s card to find out their name. Opening the card also feels fairly slow due to the extra loading time.

I have to admit that I forgot that the pre-reactions “fold out” UI to show who liked a post also only showed avatars by default. I created a plugin for my forum to change that, but forgot that I did, and thought that the changed design was the default! :see_no_evil: So the whole thing looked more like a regression to me than it really was.

In any case, thanks for moving this to its own thread. It can remain as a plea to reconsider showing only avatars in places where you really want to read names.

The poll results UI has a similar issue.

2 Likes
4

Actually on desktop when you hover the reaction it list the users.

Sep-10-2023 21-26-13

If anyone else wants this :arrow_down_small:

Screenshot 2023-09-10 at 21.46.54

Common / CSS

.discourse-reactions-counter {
  .discourse-reactions-state-panel {
    &.is-expanded {
      max-width: 500px;
    }
    .discourse-reactions-state-panel-reaction {
      margin-left: 0 !important;
      .list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25em;
        .trigger-user-card {
          margin-left: 0;
          width: max-content;
          height: auto;
          color: var(--primary-high);
          position: relative;
          &:before {
            // Set the username from data-user-card attribute
            // and add a comma next to username
            content: attr(data-user-card) ",";
          }
          .avatar {
            opacity: 0;
            position: absolute;
          }
          &:last-child {
            &:before {
              // Remove the comma from the last username
              content: attr(data-user-card);
            }
          }
        }
        button.show-users {
          order: 1; // Order the arrow to the end of list
        }
      }
    }
  }
}
6 Likes
5

Awesome share Thank you!