Add option to display user avatar in mention link

This commit is contained in:
Tusooa Zhu 2022-01-10 02:05:41 -05:00
parent 8896afd8d8
commit 9fde13c968
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 28 additions and 0 deletions

View file

@ -1,6 +1,7 @@
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 UserAvatar from '../user_avatar/user_avatar.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAt
@ -12,6 +13,9 @@ library.add(
const MentionLink = {
name: 'MentionLink',
components: {
UserAvatar
},
props: {
url: {
required: true,
@ -108,6 +112,9 @@ const MentionLink = {
shouldShowTooltip () {
return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
},
shouldShowAvatar () {
return this.mergedConfig.mentionLinkShowAvatar
},
...mapGetters(['mergedConfig']),
...mapState({
currentUser: state => state.users.currentUser

View file

@ -1,3 +1,5 @@
@import '../../_variables.scss';
.MentionLink {
position: relative;
white-space: normal;
@ -10,6 +12,13 @@
border-radius: 2px;
}
.mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
width: 1.5em;
height: 1.5em;
vertical-align: middle;
}
.full {
position: absolute;
display: inline-block;

View file

@ -23,6 +23,11 @@
:href="url"
@click.prevent="onClick"
>
<UserAvatar
v-if="shouldShowAvatar"
class="mention-avatar"
:user="user"
/>
<!-- eslint-disable vue/no-v-html -->
<span
class="shortName"

View file

@ -171,6 +171,11 @@
</BooleanSetting>
</li>
</ul>
<li>
<BooleanSetting path="mentionLinkShowAvatar">
{{ $t('settings.mention_link_show_avatar') }}
</BooleanSetting>
</li>
</ul>
</div>

View file

@ -74,6 +74,7 @@ export const defaultState = {
useAtIcon: undefined, // instance default
mentionLinkDisplay: undefined, // instance default
mentionLinkShowTooltip: undefined, // instance default
mentionLinkShowAvatar: undefined, // instance default
hidePostStats: undefined, // instance default
hideUserStats: undefined, // instance default
virtualScrolling: undefined, // instance default

View file

@ -23,6 +23,7 @@ const defaultState = {
useAtIcon: false,
mentionLinkDisplay: 'short',
mentionLinkShowTooltip: true,
mentionLinkShowAvatar: true,
hideFilteredStatuses: false,
// bad name: actually hides posts of muted USERS
hideMutedPosts: false,