在 Reacted popover 中显示用户名

用户体验
1

是否有选项或计划添加一个选项，在反应详情弹出窗口中显示完整的用户名而不是仅显示头像？

尤其是在移动设备上，除非你对所有头像都了如指掌，否则它毫无用处，这是我在参与过的任何社区中从未拥有的超能力。

在我看来，你也不必在那个弹出窗口中特别节省空间，因为它只会在点击时有意打开。

1 个赞
2

我想指出，点击反应弹出窗口中的头像会打开完整的用户卡，其中包含完整的用户名。这能满足你的需求吗？

3 个赞
3

谢谢，但没有。至少对我来说，弹出窗口的全部意义在于快速查看收到的反应。我不想点击每个用户的卡片来找出他们的名字。由于额外的加载时间，打开卡片也感觉相当慢。

我不得不承认，我忘了预反应的“展开”界面来显示谁喜欢帖子也默认只显示头像。我在我的论坛上创建了一个插件来改变这一点，但我忘了我做了这件事，并认为更改后的设计是默认的！:see_no_evil: 所以整个事情对我来说看起来更像是一种倒退，而不是它真正的情况。

无论如何，感谢您将其移至自己的主题。它可以继续作为一项呼吁，重新考虑在您真正想阅读姓名的位置仅显示头像。

投票结果界面也有类似的问题。

2 个赞
4

实际上，在桌面上，当你将鼠标悬停在反应上时，它会列出用户。

Sep-10-2023 21-26-13

如果其他人想要这个 :arrow_down_small:

Screenshot 2023-09-10 at 21.46.54
Screenshot 2023-09-10 at 21.46.54348×159 13.1 KB

通用 / 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
        }
      }
    }
  }
}
8 个赞
5

太棒了，谢谢分享！