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

View File

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

View File

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

View File

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

View File

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

View File

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