use icon instead of symbol for @ in mentions links
This commit is contained in:
parent
0260693f51
commit
6bff7cc6ef
|
@ -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',
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue