From d84cda7009d486a047953b1ca2d27acf35b8ddc1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <spam@hjkos.com>
Date: Thu, 16 Jun 2022 16:30:05 +0300
Subject: unify user popovers into a separate component

---
 src/components/mention_link/mention_link.js  |   3 +-
 src/components/mention_link/mention_link.vue | 115 ++++++++++++---------------
 2 files changed, 52 insertions(+), 66 deletions(-)

(limited to 'src/components/mention_link')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 4b088f88..7e47625a 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -16,8 +16,7 @@ const MentionLink = {
   name: 'MentionLink',
   components: {
     UserAvatar,
-    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
-    UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue'))
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   props: {
     url: {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 686ad27f..0cff50ab 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -10,84 +10,71 @@
       target="_blank"
       v-html="content"
     /><!-- eslint-enable vue/no-v-html -->
-    <Popover
-      trigger="click"
-      :bound-to="{ x: 'container'}"
-      bound-to-selector=".column"
-      popover-class="popover-default mention-popover"
+    <UserPopover
+      v-else
+      :userId="user.id"
       :disabled="!shouldShowTooltip"
     >
-      <template v-slot:trigger>
-        <span
-          v-if="user"
-          class="new"
-          :style="style"
-          :class="classnames"
+      <span
+        v-if="user"
+        class="new"
+        :style="style"
+        :class="classnames"
+      >
+        <a
+          class="short button-unstyled"
+          :class="{ '-with-tooltip': shouldShowTooltip }"
+          :href="url"
+          @click.prevent="onClick"
         >
-          <a
-            class="short button-unstyled"
-            :class="{ '-with-tooltip': shouldShowTooltip }"
-            :href="url"
-            @click.prevent="onClick"
+          <!-- eslint-disable vue/no-v-html -->
+          <UserAvatar
+            v-if="shouldShowAvatar"
+            class="mention-avatar"
+            :user="user"
+          /><span
+            class="shortName"
+          ><FAIcon
+            v-if="useAtIcon"
+            size="sm"
+            icon="at"
+            class="at"
+          />{{ !useAtIcon ? '@' : '' }}<span
+            class="userName"
+            v-html="userName"
+          /><span
+            v-if="shouldShowFullUserName"
+            class="serverName"
+            :class="{ '-faded': shouldFadeDomain }"
+            v-html="'@' + serverName"
+          />
+          </span>
+          <span
+            v-if="isYou && shouldShowYous"
+            :class="{ '-you': shouldBoldenYou }"
+          > {{ ' ' + $t('status.you') }}</span>
+          <!-- eslint-enable vue/no-v-html -->
+        </a><span
+          v-if="shouldShowTooltip"
+          class="full"
+        >
+          <span
+            class="userNameFull"
           >
             <!-- eslint-disable vue/no-v-html -->
-            <UserAvatar
-              v-if="shouldShowAvatar"
-              class="mention-avatar"
-              :user="user"
-            /><span
-              class="shortName"
-            ><FAIcon
-              v-if="useAtIcon"
-              size="sm"
-              icon="at"
-              class="at"
-            />{{ !useAtIcon ? '@' : '' }}<span
+            @<span
               class="userName"
               v-html="userName"
             /><span
-              v-if="shouldShowFullUserName"
               class="serverName"
               :class="{ '-faded': shouldFadeDomain }"
               v-html="'@' + serverName"
             />
-            </span>
-            <span
-              v-if="isYou && shouldShowYous"
-              :class="{ '-you': shouldBoldenYou }"
-            > {{ ' ' + $t('status.you') }}</span>
             <!-- eslint-enable vue/no-v-html -->
-          </a><span
-            v-if="shouldShowTooltip"
-            class="full"
-          >
-            <span
-              class="userNameFull"
-            >
-              <!-- eslint-disable vue/no-v-html -->
-              @<span
-                class="userName"
-                v-html="userName"
-              /><span
-                class="serverName"
-                :class="{ '-faded': shouldFadeDomain }"
-                v-html="'@' + serverName"
-              />
-              <!-- eslint-enable vue/no-v-html -->
-            </span>
           </span>
-        </span></template>
-      <template v-slot:content>
-        <UserCard
-          class="mention-link-popover"
-          :user-id="user.id"
-          :hide-bio="true"
-          :bordered="false"
-          :allow-zooming-avatar="true"
-          :rounded="true"
-        />
-      </template>
-    </Popover>
+        </span>
+      </span>
+    </UserPopover>
   </span>
 </template>
 
-- 
cgit v1.2.3-70-g09d2