From 6bff7cc6efd1a7def75f4eef316fdcd84f0d3209 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 13:29:59 +0300
Subject: [PATCH] use icon instead of symbol for @ in mentions links
---
src/components/mention_link/mention_link.js | 8 +++++++
src/components/mention_link/mention_link.scss | 21 +++++++------------
src/components/mention_link/mention_link.vue | 5 +++++
3 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 559250c5..711c87d6 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -1,6 +1,14 @@
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters, mapState } from 'vuex'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faAt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faAt
+)
const MentionLink = {
name: 'MentionLink',
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index a18475a1..9560e205 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -33,10 +33,6 @@
& .short,
& .full {
white-space: nowrap;
-
- &::before {
- content: '@';
- }
}
.new {
@@ -55,15 +51,19 @@
&:not(.-oldStyle) {
.short {
+ padding-left: 0.25em;
+ padding-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
line-height: 1.5;
font-size: inherit;
- &::before {
+ .at {
color: var(--faint);
+ opacity: 0.8;
display: inline-block;
height: 50%;
line-height: 1;
- vertical-align: 6%;
}
}
@@ -71,18 +71,11 @@
padding-right: 0.25em;
}
- .short {
- padding-left: 0.25em;
- padding-right: 0;
- padding-top: 0;
- padding-bottom: 0;
- }
-
.userName {
display: inline-block;
color: var(--link);
line-height: inherit;
- margin-left: 0.125em;
+ margin-left: 0;
padding-left: 0.125em;
padding-right: 0.25em;
padding-top: 0;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 55f49507..281fab25 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -22,6 +22,11 @@
:class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
@click.prevent="onClick"
>
+ <FAIcon
+ size="s"
+ icon="at"
+ class="at"
+ />
<!-- eslint-disable vue/no-v-html -->
<span class="shortName"><span
class="userName"