aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/mention_link/mention_link.js33
-rw-r--r--src/components/mention_link/mention_link.scss28
-rw-r--r--src/components/mention_link/mention_link.vue33
-rw-r--r--src/components/settings_modal/tabs/general_tab.js5
-rw-r--r--src/components/settings_modal/tabs/general_tab.vue35
5 files changed, 125 insertions, 9 deletions
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 65c62baa..5209907d 100644
--- 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,
@@ -50,6 +54,10 @@ const MentionLink = {
userName () {
return this.user && this.userNameFullUi.split('@')[0]
},
+ serverName () {
+ // XXX assumed that domain does not contain @
+ return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
+ },
userNameFull () {
return this.user && this.user.screen_name
},
@@ -85,6 +93,31 @@ const MentionLink = {
this.highlightType
]
},
+ useAtIcon () {
+ return this.mergedConfig.useAtIcon
+ },
+ isRemote () {
+ return this.userName !== this.userNameFull
+ },
+ shouldShowFullUserName () {
+ const conf = this.mergedConfig.mentionLinkDisplay
+ if (conf === 'short') {
+ return false
+ } else if (conf === 'full') {
+ return true
+ } else { // full_for_remote
+ return this.isRemote
+ }
+ },
+ shouldShowTooltip () {
+ return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+ },
+ shouldShowAvatar () {
+ return this.mergedConfig.mentionLinkShowAvatar
+ },
+ shouldFadeDomain () {
+ return this.mergedConfig.mentionLinkFadeDomain
+ },
...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
index ec2689f8..03306dcc 100644
--- 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,15 @@
border-radius: 2px;
}
+ .mention-avatar {
+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+ width: 1.5em;
+ height: 1.5em;
+ vertical-align: middle;
+ user-select: none;
+ margin-right: 0.2em;
+ }
+
.full {
position: absolute;
display: inline-block;
@@ -27,7 +38,8 @@
user-select: all;
}
- .short {
+ .short.-with-tooltip,
+ .you {
user-select: none;
}
@@ -56,7 +68,7 @@
}
&.-striped {
- & .userName,
+ & .shortName,
& .full {
background-image:
repeating-linear-gradient(
@@ -70,14 +82,14 @@
}
&.-solid {
- & .userName,
+ & .shortName,
& .full {
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
}
}
&.-side {
- & .userName,
+ & .shortName,
& .userNameFull {
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
}
@@ -88,4 +100,12 @@
opacity: 1;
pointer-events: initial;
}
+
+ .serverName.-faded {
+ color: var(--faintLink, $fallback--link);
+ }
+
+ .full .-faded {
+ color: var(--faint, $fallback--faint);
+ }
}
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index a22b486c..ac20eb5a 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -19,17 +19,30 @@
>
<a
class="short button-unstyled"
+ :class="{ '-with-tooltip': shouldShowTooltip }"
:href="url"
@click.prevent="onClick"
>
<!-- eslint-disable vue/no-v-html -->
- <FAIcon
+ <UserAvatar
+ v-if="shouldShowAvatar"
+ class="mention-avatar"
+ :user="user"
+ /><span
+ class="shortName"
+ ><FAIcon
+ v-if="useAtIcon"
size="sm"
icon="at"
class="at"
- /><span class="shortName"><span
+ />{{ !useAtIcon ? '@' : '' }}<span
class="userName"
v-html="userName"
+ /><span
+ v-if="shouldShowFullUserName"
+ class="serverName"
+ :class="{ '-faded': shouldFadeDomain }"
+ v-html="'@' + serverName"
/></span>
<span
v-if="isYou"
@@ -38,14 +51,24 @@
<!-- eslint-enable vue/no-v-html -->
</a>
<span
- v-if="userName !== userNameFull"
+ v-if="shouldShowTooltip"
class="full popover-default"
:class="[highlightType]"
>
<span
class="userNameFull"
- v-text="'@' + userNameFull"
- />
+ >
+ <!-- eslint-disable vue/no-v-html -->
+ @<span
+ class="userName"
+ v-html="userName"
+ /><span
+ class="serverName"
+ :class="{ '-faded': shouldFadeDomain }"
+ v-html="'@' + serverName"
+ />
+ <!-- eslint-enable vue/no-v-html -->
+ </span>
</span>
</span>
</span>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index eeda61bf..952c328d 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -20,6 +20,11 @@ const GeneralTab = {
value: mode,
label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
})),
+ mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
+ key: mode,
+ value: mode,
+ label: this.$t(`settings.mention_link_display_${mode}`)
+ })),
loopSilentAvailable:
// Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index bd3ee84e..44b1ac92 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -147,6 +147,41 @@
{{ $t('settings.greentext') }}
</BooleanSetting>
</li>
+ <li>
+ <ChoiceSetting
+ id="mentionLinkDisplay"
+ path="mentionLinkDisplay"
+ :options="mentionLinkDisplayOptions"
+ >
+ {{ $t('settings.mention_link_display') }}
+ </ChoiceSetting>
+ </li>
+ <ul
+ class="setting-list suboptions"
+ >
+ <li
+ v-if="mentionLinkDisplay === 'short'"
+ >
+ <BooleanSetting path="mentionLinkShowTooltip">
+ {{ $t('settings.mention_link_show_tooltip') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="useAtIcon">
+ {{ $t('settings.use_at_icon') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="mentionLinkShowAvatar">
+ {{ $t('settings.mention_link_show_avatar') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="mentionLinkFadeDomain">
+ {{ $t('settings.mention_link_fade_domain') }}
+ </BooleanSetting>
+ </li>
+ </ul>
</ul>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-18 11:19:28 +0000