new mentions look

src/components/mention_link/mention_link.js

@@ -1,7 +1,6 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { getTextColor, rgb2hex } from 'src/services/color_convert/color_convert.js'
 import { mapGetters, mapState } from 'vuex'
-import { convert } from 'chromatism'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 
 const MentionLink = {
   name: 'MentionLink',
@@ -45,21 +44,22 @@ const MentionLink = {
     highlight () {
       return this.mergedConfig.highlight[this.user.screen_name]
     },
-    bg () {
+    highlightType () {
-      if (this.highlight) return this.highlight.color
+      return this.highlight && ('-' + this.highlight.type)
     },
-    text () {
+    highlightClass () {
-      if (this.bg) {
+      if (this.highlight) return highlightClass(this.user)
-        const linkColor = this.mergedConfig.customTheme.colors.link
-        const color = getTextColor(convert(this.bg).rgb, convert(linkColor).rgb)
-        return rgb2hex(color)
-      }
     },
     style () {
-      return [
+      if (this.highlight) {
-        this.bg && `--mention-bg: ${this.bg}`,
+        const {
-        this.text && `--mention-text: ${this.text}`
+          backgroundColor,
-      ].filter(_ => _).join('; ')
+          backgroundPosition,
+          backgroundImage,
+          ...rest
+        } = highlightStyle(this.highlight)
+        return rest
+      }
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({

src/components/mention_link/mention_link.scss

@@ -2,12 +2,10 @@
   position: relative;
   white-space: normal;
   display: inline-block;
+  color: var(--link);
 
   & .new,
-  & .original,
+  & .original {
-  & .full {
-    padding: 0 2px;
-    margin: 0 -2px;
     display: inline-block;
     border-radius: 2px;
   }
@@ -17,24 +15,95 @@
   }
 
   .full {
-    pointer-events: none;
     position: absolute;
+    display: inline-block;
+    pointer-events: none;
     opacity: 0;
-    top: 0;
+    top: 100%;
-    bottom: 0;
     left: 0;
+    height: 100%;
     word-wrap: normal;
     white-space: nowrap;
     transition: opacity 0.2s ease;
-    background-color: var(--mention-bg, var(--popover));
-    color: var(--mention-text, var(--link));
     z-index: 1;
+    margin-top: 0.25em;
+    padding: 0.5em;
+  }
+
+  & .short,
+  & .full {
+    &::before {
+      content: '@';
+    }
+  }
+
+  & .new {
+    &,
+    &.-striped,
+    &.-solid,
+    &.-side {
+      .full {
+      }
+      .short {
+        &::before {
+          display: inline-block;
+          height: 50%;
+          font-size: 90%;
+          line-height: 1;
+          vertical-align: 6%;
+        }
+      }
+
+      .you {
+        padding-right: 0.25em;
+      }
+      .short {
+        padding-left: 0.25em;
+        padding-right: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .userName {
+        color: var(--link);
+        margin-left: 0.25em;
+        padding-left: 0.25em;
+        padding-right: 0.25em;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    &.-striped {
+      & .userName,
+      & .full {
+        background-image:
+          repeating-linear-gradient(
+            135deg,
+            var(--____highlight-tintColor),
+            var(--____highlight-tintColor) 5px,
+            var(--____highlight-tintColor2) 5px,
+            var(--____highlight-tintColor2) 10px
+          );
+      }
+    }
+
+    &.-solid {
+      & .userName,
+      & .full {
+        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
+      }
+    }
+
+    &.-side {
+      & .userName,
+      & .userNameFull {
+        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
+      }
+    }
   }
 
   .new {
-    background-color: var(--mention-bg);
-    color: var(--mention-text, var(--link));
-
     &.-you {
       & .shortName,
       & .full {
@@ -45,5 +114,6 @@
 
   &:hover .new .full {
     opacity: 1;
+    pointer-events: initial;
   }
 }

src/components/mention_link/mention_link.vue

@@ -12,22 +12,24 @@
       v-if="user"
       class="new"
       :style="style"
-      :class="{ '-you': isYou }"
+      :class="[{ '-you': isYou }, highlightType]"
     >
       <button
-        class="button-unstyled short"
+        class="short"
+        :class="highlight ? 'button-default' : 'button-default' "
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
-        <span class="shortName">@<span v-html="userName" /></span> <span v-if="isYou">{{ $t('status.you')}}</span>
+        <span class="shortName"><span class="userName" v-html="userName" /></span><span class="you" v-if="isYou">{{ $t('status.you')}}</span>
         <!-- eslint-enable vue/no-v-html -->
       </button>
       <span
         v-if="userName !== userNameFull"
-        class="full"
+        class="full popover-default"
+        :class="[highlightType]"
       >
         <!-- eslint-disable vue/no-v-html -->
-        @<span v-html="userNameFull" />
+        <span class="userNameFull" v-html="userNameFull" />
         <!-- eslint-enable vue/no-v-html -->
       </span>
     </span>

src/services/user_highlighter/user_highlighter.js

@@ -8,6 +8,11 @@ const highlightStyle = (prefs) => {
   const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
   const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
   const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
+  const customProps = {
+    '--____highlight-solidColor': solidColor,
+    '--____highlight-tintColor': tintColor,
+    '--____highlight-tintColor2': tintColor2
+  }
   if (type === 'striped') {
     return {
       backgroundImage: [
@@ -17,11 +22,13 @@ const highlightStyle = (prefs) => {
         `${tintColor2} 20px,`,
         `${tintColor2} 40px`
       ].join(' '),
-      backgroundPosition: '0 0'
+      backgroundPosition: '0 0',
+      ...customProps
     }
   } else if (type === 'solid') {
     return {
-      backgroundColor: tintColor2
+      backgroundColor: tintColor2,
+      ...customProps
     }
   } else if (type === 'side') {
     return {
@@ -31,7 +38,8 @@ const highlightStyle = (prefs) => {
         `${solidColor} 2px,`,
         `transparent 6px`
       ].join(' '),
-      backgroundPosition: '0 0'
+      backgroundPosition: '0 0',
+      ...customProps
     }
   }
 }