Add pref for whether to display full user names and tooltips

This commit is contained in:
Tusooa Zhu 2022-01-10 01:16:33 -05:00
parent 76547fe66d
commit 1d4b1b296e
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 64 additions and 6 deletions

View file

@ -50,6 +50,10 @@ const MentionLink = {
userName () { userName () {
return this.user && this.userNameFullUi.split('@')[0] 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 () { userNameFull () {
return this.user && this.user.screen_name return this.user && this.user.screen_name
}, },
@ -88,6 +92,22 @@ const MentionLink = {
useAtIcon () { useAtIcon () {
return this.mergedConfig.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
},
...mapGetters(['mergedConfig']), ...mapGetters(['mergedConfig']),
...mapState({ ...mapState({
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser

View file

@ -28,10 +28,16 @@
size="sm" size="sm"
icon="at" icon="at"
class="at" class="at"
/><span class="shortName">{{ !useAtIcon ? '@' : '' }}<span /><span
class="userName" class="shortName"
v-html="userName" >{{ !useAtIcon ? '@' : '' }}<span
/></span> class="userName"
v-html="userName"
/><span
v-if="shouldShowFullUserName"
class="serverName"
v-html="'@' + serverName"
/></span>
<span <span
v-if="isYou" v-if="isYou"
class="you" class="you"
@ -39,7 +45,7 @@
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
</a> </a>
<span <span
v-if="userName !== userNameFull" v-if="shouldShowTooltip"
class="full popover-default" class="full popover-default"
:class="[highlightType]" :class="[highlightType]"
> >

View file

@ -20,6 +20,11 @@ const GeneralTab = {
value: mode, value: mode,
label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : 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: loopSilentAvailable:
// Firefox // Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||

View file

@ -152,6 +152,25 @@
{{ $t('settings.use_at_icon') }} {{ $t('settings.use_at_icon') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li>
<ChoiceSetting
id="mentionLinkDisplay"
path="mentionLinkDisplay"
:options="mentionLinkDisplayOptions"
>
{{ $t('settings.mention_link_display') }}
</ChoiceSetting>
</li>
<ul
v-if="mentionLinkDisplay === 'short'"
class="setting-list suboptions"
>
<li>
<BooleanSetting path="mentionLinkShowTooltip">
{{ $t('settings.mention_link_show_tooltip') }}
</BooleanSetting>
</li>
</ul>
</ul> </ul>
</div> </div>

View file

@ -11,7 +11,8 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
*/ */
export const multiChoiceProperties = [ export const multiChoiceProperties = [
'postContentType', 'postContentType',
'subjectLineBehavior' 'subjectLineBehavior',
'mentionLinkDisplay' // short | full_for_remote | full
] ]
export const defaultState = { export const defaultState = {
@ -71,6 +72,8 @@ export const defaultState = {
useContainFit: false, useContainFit: false,
greentext: undefined, // instance default greentext: undefined, // instance default
useAtIcon: undefined, // instance default useAtIcon: undefined, // instance default
mentionLinkDisplay: undefined, // instance default
mentionLinkShowTooltip: 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

@ -21,6 +21,8 @@ const defaultState = {
collapseMessageWithSubject: false, collapseMessageWithSubject: false,
greentext: false, greentext: false,
useAtIcon: false, useAtIcon: false,
mentionLinkDisplay: 'short',
mentionLinkShowTooltip: 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,
@ -101,6 +103,9 @@ const instance = {
return instanceDefaultProperties return instanceDefaultProperties
.map(key => [key, state[key]]) .map(key => [key, state[key]])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
},
instanceDomain (state) {
return new URL(state.server).hostname
} }
}, },
actions: { actions: {