fix invisible old popover, cleanup, add selection indicator in mentionlinks

src/components/mention_link/mention_link.js

@@ -36,6 +36,11 @@ const MentionLink = {
       type: String
     }
   },
+  data () {
+    return {
+      hasSelection: false
+    }
+  },
   methods: {
     onClick () {
       if (this.shouldShowTooltip) return
@@ -44,8 +49,17 @@ const MentionLink = {
         this.userScreenName || this.user.screen_name
       )
       this.$router.push(link)
+    },
+    handleSelection () {
+      this.hasSelection = document.getSelection().containsNode(this.$refs.full, true)
     }
   },
+  mounted () {
+    document.addEventListener('selectionchange', this.handleSelection)
+  },
+  unmounted () {
+    document.removeEventListener('selectionchange', this.handleSelection)
+  },
   computed: {
     user () {
       return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
@@ -91,7 +105,8 @@ const MentionLink = {
       return [
         {
           '-you': this.isYou && this.shouldBoldenYou,
-          '-highlighted': this.highlight
+          '-highlighted': this.highlight,
+          '-has-selection': this.hasSelection
         },
         this.highlightType
       ]

src/components/mention_link/mention_link.scss

@@ -55,11 +55,14 @@
 
   .new {
     &.-you {
-      & .shortName,
+      .shortName {
-      & .full {
         font-weight: 600;
       }
     }
+    &.-has-selection {
+      color: var(--alertNeutralText, $fallback--text);
+      background-color: var(--alertNeutral, $fallback--fg);
+    }
 
     .at {
       color: var(--link);
@@ -72,8 +75,7 @@
     }
 
     &.-striped {
-      & .shortName,
+      & .shortName {
-      & .full {
         background-image:
           repeating-linear-gradient(
             135deg,
@@ -86,31 +88,25 @@
     }
 
     &.-solid {
-      & .shortName,
+      .shortName {
-      & .full {
         background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
       }
     }
 
     &.-side {
-      & .shortName,
+      .shortName {
-      & .userNameFull {
         box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
       }
     }
   }
 
-  &:hover .new .full {
+  .full {
-    pointer-events: initial;
+    pointer-events: none;
   }
 
   .serverName.-faded {
     color: var(--faintLink, $fallback--link);
   }
-
-  .full .-faded {
-    color: var(--faint, $fallback--faint);
-  }
 }
 
 .mention-link-popover {

src/components/mention_link/mention_link.vue

@@ -54,24 +54,10 @@
             :class="{ '-you': shouldBoldenYou }"
           > {{ ' ' + $t('status.you') }}</span>
           <!-- eslint-enable vue/no-v-html -->
-        </a><span
+        </a><span class="full" ref="full">
-          v-if="shouldShowTooltip"
-          class="full"
-        >
-          <span
-            class="userNameFull"
-          >
             <!-- eslint-disable vue/no-v-html -->
-            @<span
+            @<span v-html="userName" /><span v-html="'@' + serverName" />
-              class="userName"
-              v-html="userName"
-            /><span
-              class="serverName"
-              :class="{ '-faded': shouldFadeDomain }"
-              v-html="'@' + serverName"
-            />
             <!-- eslint-enable vue/no-v-html -->
-          </span>
         </span>
       </span>
     </UserPopover>