From 6079301ec45c6c13a1f8b5f9f6acf52b5a449331 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 16 Jul 2020 17:42:16 +0300
Subject: Move user list from reactions to its own component, make favs and rts
 use it

---
 src/components/status/status.js  | 30 ++++++++++++++++--------------
 src/components/status/status.vue | 35 +++++++++++++++++++++++------------
 2 files changed, 39 insertions(+), 26 deletions(-)

(limited to 'src/components/status')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index ad0b72a9..d263da68 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -9,6 +9,7 @@ import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
+import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
@@ -18,6 +19,21 @@ import { mapGetters, mapState } from 'vuex'
 
 const Status = {
   name: 'Status',
+  components: {
+    FavoriteButton,
+    ReactButton,
+    RetweetButton,
+    ExtraButtons,
+    PostStatusForm,
+    UserCard,
+    UserAvatar,
+    AvatarList,
+    Timeago,
+    StatusPopover,
+    UserListPopover,
+    EmojiReactions,
+    StatusContent
+  },
   props: [
     'statusoid',
     'expandable',
@@ -197,20 +213,6 @@ const Status = {
       currentUser: state => state.users.currentUser
     })
   },
-  components: {
-    FavoriteButton,
-    ReactButton,
-    RetweetButton,
-    ExtraButtons,
-    PostStatusForm,
-    UserCard,
-    UserAvatar,
-    AvatarList,
-    Timeago,
-    StatusPopover,
-    EmojiReactions,
-    StatusContent
-  },
   methods: {
     visibilityIcon (visibility) {
       switch (visibility) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f6b5dd6f..4764f467 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -265,24 +265,30 @@
               class="favs-repeated-users"
             >
               <div class="stats">
-                <div
+                <UserListPopover
                   v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
-                  class="stat-count"
+                  :users="statusFromGlobalRepository.rebloggedBy"
                 >
-                  <a class="stat-title">{{ $t('status.repeats') }}</a>
-                  <div class="stat-number">
-                    {{ statusFromGlobalRepository.rebloggedBy.length }}
+                  <div class="stat-count">
+                    <a class="stat-title">{{ $t('status.repeats') }}</a>
+                    <div class="stat-number">
+                      {{ statusFromGlobalRepository.rebloggedBy.length }}
+                    </div>
                   </div>
-                </div>
-                <div
+                </UserListPopover>
+                <UserListPopover
                   v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
-                  class="stat-count"
+                  :users="statusFromGlobalRepository.favoritedBy"
                 >
-                  <a class="stat-title">{{ $t('status.favorites') }}</a>
-                  <div class="stat-number">
-                    {{ statusFromGlobalRepository.favoritedBy.length }}
+                  <div
+                    class="stat-count"
+                  >
+                    <a class="stat-title">{{ $t('status.favorites') }}</a>
+                    <div class="stat-number">
+                      {{ statusFromGlobalRepository.favoritedBy.length }}
+                    </div>
                   </div>
-                </div>
+                </UserListPopover>
                 <div class="avatar-row">
                   <AvatarList :users="combinedFavsAndRepeatsUsers" />
                 </div>
@@ -722,6 +728,11 @@ $status-margin: 0.75em;
 
     .stat-count {
       margin-right: $status-margin;
+      user-select: none;
+
+      &:hover .stat-title {
+        text-decoration: underline;
+      }
 
       .stat-title {
         color: var(--faint, $fallback--faint);
-- 
cgit v1.2.3-70-g09d2