diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 426dbe97..5209907d 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -115,6 +115,9 @@ const MentionLink = { 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 9a285ad8..03306dcc 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -100,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 c0d71322..ac20eb5a 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -41,6 +41,7 @@ /><span v-if="shouldShowFullUserName" class="serverName" + :class="{ '-faded': shouldFadeDomain }" v-html="'@' + serverName" /></span> <span @@ -56,8 +57,18 @@ > <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.vue b/src/components/settings_modal/tabs/general_tab.vue index b4495941..50599eae 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -176,6 +176,11 @@ {{ $t('settings.mention_link_show_avatar') }} </BooleanSetting> </li> + <li> + <BooleanSetting path="mentionLinkFadeDomain"> + {{ $t('settings.mention_link_fade_domain') }} + </BooleanSetting> + </li> </ul> </div> diff --git a/src/modules/config.js b/src/modules/config.js index cfb753ce..9f2d4ef3 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -75,6 +75,7 @@ export const defaultState = { mentionLinkDisplay: undefined, // instance default mentionLinkShowTooltip: undefined, // instance default mentionLinkShowAvatar: undefined, // instance default + mentionLinkFadeDomain: 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 index 6c8823c3..2859b00b 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -24,6 +24,7 @@ const defaultState = { mentionLinkDisplay: 'short', mentionLinkShowTooltip: true, mentionLinkShowAvatar: true, + mentionLinkFadeDomain: true, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS hideMutedPosts: false,