use icon instead of symbol for @ in mentions links

This commit is contained in:
Henry Jameson 2021-06-10 13:29:59 +03:00 committed by Sam Therapy
parent 837239eb99
commit f23ed59863
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
3 changed files with 20 additions and 14 deletions

View file

@ -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',

View file

@ -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;

View file

@ -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"