commit: 9fde13c9685e934c8f610c96d481457b3d37c389
parent 8896afd8d855028bedf5d4d6e3a5be561ef83878
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 02:05:41 -0500
Add option to display user avatar in mention link
Diffstat:
6 files changed, 28 insertions(+), 0 deletions(-)
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
@@ -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
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
@@ -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;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
@@ -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"
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
@@ -171,6 +171,11 @@
</BooleanSetting>
</li>
</ul>
+ <li>
+ <BooleanSetting path="mentionLinkShowAvatar">
+ {{ $t('settings.mention_link_show_avatar') }}
+ </BooleanSetting>
+ </li>
</ul>
</div>
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -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
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -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,