use icon instead of symbol for @ in mentions links
This commit is contained in:
parent
0260693f51
commit
6bff7cc6ef
3 changed files with 20 additions and 14 deletions
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue