commit: 0c60b31eee3e31810ebd41bc186a9825a39cd821
parent aaf0b985ad0cf23ace370d2de0d8402df4a4af0e
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 02:31:26 -0500
Add option to fade domains in mention link
Diffstat:
6 files changed, 31 insertions(+), 2 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,