1 files changed, 75 insertions, 0 deletions
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
new file mode 100644
index 00000000..3562f511
--- /dev/null
+++ b/src/components/mention_link/mention_link.vue
@@ -0,0 +1,75 @@
+<template>
+  <span
+    class="MentionLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      v-if="!user"
+      :href="url"
+      class="original"
+      target="_blank"
+      v-html="content"
+    /><!-- eslint-enable vue/no-v-html --><span
+      v-if="user"
+      class="new"
+      :style="style"
+      :class="classnames"
+    >
+      <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 popover-default"
+        :class="[highlightType]"
+      >
+        <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>
+  </span>
+</template>
+
+<script src="./mention_link.js"/>
+
+<style lang="scss" src="./mention_link.scss"/>