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

---
 .../user_list_popover/user_list_popover.js         | 13 ++++
 .../user_list_popover/user_list_popover.vue        | 74 ++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/components/user_list_popover/user_list_popover.js
 create mode 100644 src/components/user_list_popover/user_list_popover.vue

(limited to 'src/components/user_list_popover')

diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
new file mode 100644
index 00000000..26d2ed1a
--- /dev/null
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -0,0 +1,13 @@
+
+const UserListPopover = {
+  name: 'UserListPopover',
+  props: [
+    'users'
+  ],
+  components: {
+    Popover: () => import('../popover/popover.vue'),
+    UserAvatar: () => import('../user_avatar/user_avatar.vue')
+  }
+}
+
+export default UserListPopover
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
new file mode 100644
index 00000000..b6b7ab95
--- /dev/null
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -0,0 +1,74 @@
+<template>
+  <Popover
+    trigger="hover"
+    placement="top"
+    :offset="{ y: 5 }"
+  >
+    <template slot="trigger">
+      <slot />
+    </template>
+    <div
+      slot="content"
+      class="reacted-users"
+    >
+      <div v-if="users.length">
+        <div
+          v-for="(user) in users"
+          :key="user.id"
+          class="reacted-user"
+        >
+          <UserAvatar
+            :user="user"
+            class="avatar-small"
+            :compact="true"
+          />
+          <div class="reacted-user-names">
+            <!-- eslint-disable vue/no-v-html -->
+            <span
+              class="reacted-user-name"
+              v-html="user.name_html"
+            />
+            <!-- eslint-enable vue/no-v-html -->
+            <span class="reacted-user-screen-name">{{ user.screen_name }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <i class="icon-spin4 animate-spin" />
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script src="./user_list_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.reacted-users {
+  padding: 0.5em;
+}
+
+.reacted-user {
+  padding: 0.25em;
+  display: flex;
+  flex-direction: row;
+
+  .reacted-user-names {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.5em;
+    min-width: 5em;
+
+    img {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  .reacted-user-screen-name {
+    font-size: 9px;
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From 8e0414dc7c5fd6d86d6f94958fa94e24f33b08c4 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 16 Jul 2020 17:45:07 +0300
Subject: change class names to not have reacts in them

---
 .../user_list_popover/user_list_popover.vue        | 47 ++++++++++------------
 1 file changed, 22 insertions(+), 25 deletions(-)

(limited to 'src/components/user_list_popover')

diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index b6b7ab95..6bd786b3 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -9,27 +9,24 @@
     </template>
     <div
       slot="content"
-      class="reacted-users"
+      class="user-list-popover"
     >
       <div v-if="users.length">
         <div
           v-for="(user) in users"
           :key="user.id"
-          class="reacted-user"
+          class="user-list-row"
         >
           <UserAvatar
             :user="user"
             class="avatar-small"
             :compact="true"
           />
-          <div class="reacted-user-names">
+          <div class="user-list-names">
             <!-- eslint-disable vue/no-v-html -->
-            <span
-              class="reacted-user-name"
-              v-html="user.name_html"
-            />
+            <span v-html="user.name_html" />
             <!-- eslint-enable vue/no-v-html -->
-            <span class="reacted-user-screen-name">{{ user.screen_name }}</span>
+            <span class="user-list-screen-name">{{ user.screen_name }}</span>
           </div>
         </div>
       </div>
@@ -45,29 +42,29 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.reacted-users {
+.user-list-popover {
   padding: 0.5em;
-}
-
-.reacted-user {
-  padding: 0.25em;
-  display: flex;
-  flex-direction: row;
 
-  .reacted-user-names {
+  .user-list-row {
+    padding: 0.25em;
     display: flex;
-    flex-direction: column;
-    margin-left: 0.5em;
-    min-width: 5em;
+    flex-direction: row;
+
+    .user-list-names {
+      display: flex;
+      flex-direction: column;
+      margin-left: 0.5em;
+      min-width: 5em;
 
-    img {
-      width: 1em;
-      height: 1em;
+      img {
+        width: 1em;
+        height: 1em;
+      }
     }
-  }
 
-  .reacted-user-screen-name {
-    font-size: 9px;
+    .user-list-screen-name {
+      font-size: 9px;
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From caae2668ce2da0b74f1332e7a4d55b4b504de040 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 16 Jul 2020 18:08:00 +0300
Subject: add 16 users cap to user list popover

---
 src/components/user_list_popover/user_list_popover.js  | 5 +++++
 src/components/user_list_popover/user_list_popover.vue | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/components/user_list_popover')

diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index 26d2ed1a..b60f2c4c 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -7,6 +7,11 @@ const UserListPopover = {
   components: {
     Popover: () => import('../popover/popover.vue'),
     UserAvatar: () => import('../user_avatar/user_avatar.vue')
+  },
+  computed: {
+    usersCapped () {
+      return this.users.slice(0, 16)
+    }
   }
 }
 
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 6bd786b3..185c73ca 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -13,7 +13,7 @@
     >
       <div v-if="users.length">
         <div
-          v-for="(user) in users"
+          v-for="(user) in usersCapped"
           :key="user.id"
           class="user-list-row"
         >
-- 
cgit v1.2.3-70-g09d2