use icon instead of symbol for @ in mentions links

This commit is contained in:
Henry Jameson 2021-06-10 13:29:59 +03:00
parent 0260693f51
commit 6bff7cc6ef
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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' 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 = { const MentionLink = {
name: 'MentionLink', name: 'MentionLink',

View file

@ -33,10 +33,6 @@
& .short, & .short,
& .full { & .full {
white-space: nowrap; white-space: nowrap;
&::before {
content: '@';
}
} }
.new { .new {
@ -55,15 +51,19 @@
&:not(.-oldStyle) { &:not(.-oldStyle) {
.short { .short {
padding-left: 0.25em;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
line-height: 1.5; line-height: 1.5;
font-size: inherit; font-size: inherit;
&::before { .at {
color: var(--faint); color: var(--faint);
opacity: 0.8;
display: inline-block; display: inline-block;
height: 50%; height: 50%;
line-height: 1; line-height: 1;
vertical-align: 6%;
} }
} }
@ -71,18 +71,11 @@
padding-right: 0.25em; padding-right: 0.25em;
} }
.short {
padding-left: 0.25em;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.userName { .userName {
display: inline-block; display: inline-block;
color: var(--link); color: var(--link);
line-height: inherit; line-height: inherit;
margin-left: 0.125em; margin-left: 0;
padding-left: 0.125em; padding-left: 0.125em;
padding-right: 0.25em; padding-right: 0.25em;
padding-top: 0; padding-top: 0;

View file

@ -22,6 +22,11 @@
:class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']" :class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
@click.prevent="onClick" @click.prevent="onClick"
> >
<FAIcon
size="s"
icon="at"
class="at"
/>
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
<span class="shortName"><span <span class="shortName"><span
class="userName" class="userName"