Add option to fade domains in mention link

This commit is contained in:
Tusooa Zhu 2022-01-10 02:31:26 -05:00
parent aaf0b985ad
commit 0c60b31eee
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
6 changed files with 31 additions and 2 deletions

View File

@ -115,6 +115,9 @@ const MentionLink = {
shouldShowAvatar () { shouldShowAvatar () {
return this.mergedConfig.mentionLinkShowAvatar return this.mergedConfig.mentionLinkShowAvatar
}, },
shouldFadeDomain () {
return this.mergedConfig.mentionLinkFadeDomain
},
...mapGetters(['mergedConfig']), ...mapGetters(['mergedConfig']),
...mapState({ ...mapState({
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser

View File

@ -100,4 +100,12 @@
opacity: 1; opacity: 1;
pointer-events: initial; pointer-events: initial;
} }
.serverName.-faded {
color: var(--faintLink, $fallback--link);
}
.full .-faded {
color: var(--faint, $fallback--faint);
}
} }

View File

@ -41,6 +41,7 @@
/><span /><span
v-if="shouldShowFullUserName" v-if="shouldShowFullUserName"
class="serverName" class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName" v-html="'@' + serverName"
/></span> /></span>
<span <span
@ -56,8 +57,18 @@
> >
<span <span
class="userNameFull" 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> </span>
</span> </span>

View File

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

View File

@ -75,6 +75,7 @@ export const defaultState = {
mentionLinkDisplay: undefined, // instance default mentionLinkDisplay: undefined, // instance default
mentionLinkShowTooltip: undefined, // instance default mentionLinkShowTooltip: undefined, // instance default
mentionLinkShowAvatar: undefined, // instance default mentionLinkShowAvatar: undefined, // instance default
mentionLinkFadeDomain: 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

@ -24,6 +24,7 @@ const defaultState = {
mentionLinkDisplay: 'short', mentionLinkDisplay: 'short',
mentionLinkShowTooltip: true, mentionLinkShowTooltip: true,
mentionLinkShowAvatar: true, mentionLinkShowAvatar: true,
mentionLinkFadeDomain: 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,