Add pref for whether to display full user names and tooltips
This commit is contained in:
parent
76547fe66d
commit
1d4b1b296e
6 changed files with 64 additions and 6 deletions
|
@ -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
|
||||||
|
|
|
@ -28,9 +28,15 @@
|
||||||
size="sm"
|
size="sm"
|
||||||
icon="at"
|
icon="at"
|
||||||
class="at"
|
class="at"
|
||||||
/><span class="shortName">{{ !useAtIcon ? '@' : '' }}<span
|
/><span
|
||||||
|
class="shortName"
|
||||||
|
>{{ !useAtIcon ? '@' : '' }}<span
|
||||||
class="userName"
|
class="userName"
|
||||||
v-html="userName"
|
v-html="userName"
|
||||||
|
/><span
|
||||||
|
v-if="shouldShowFullUserName"
|
||||||
|
class="serverName"
|
||||||
|
v-html="'@' + serverName"
|
||||||
/></span>
|
/></span>
|
||||||
<span
|
<span
|
||||||
v-if="isYou"
|
v-if="isYou"
|
||||||
|
@ -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]"
|
||||||
>
|
>
|
||||||
|
|
|
@ -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') ||
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in a new issue