diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 65c62baa..5209907d 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -1,6 +1,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import { mapGetters, mapState } from 'vuex' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' +import UserAvatar from '../user_avatar/user_avatar.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faAt @@ -12,6 +13,9 @@ library.add( const MentionLink = { name: 'MentionLink', + components: { + UserAvatar + }, props: { url: { required: true, @@ -50,6 +54,10 @@ const MentionLink = { userName () { 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 () { return this.user && this.user.screen_name }, @@ -85,6 +93,31 @@ const MentionLink = { this.highlightType ] }, + 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 + }, + 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 ec2689f8..03306dcc 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -1,3 +1,5 @@ +@import '../../_variables.scss'; + .MentionLink { position: relative; white-space: normal; @@ -10,6 +12,15 @@ border-radius: 2px; } + .mention-avatar { + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + width: 1.5em; + height: 1.5em; + vertical-align: middle; + user-select: none; + margin-right: 0.2em; + } + .full { position: absolute; display: inline-block; @@ -27,7 +38,8 @@ user-select: all; } - .short { + .short.-with-tooltip, + .you { user-select: none; } @@ -56,7 +68,7 @@ } &.-striped { - & .userName, + & .shortName, & .full { background-image: repeating-linear-gradient( @@ -70,14 +82,14 @@ } &.-solid { - & .userName, + & .shortName, & .full { background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2)); } } &.-side { - & .userName, + & .shortName, & .userNameFull { box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor); } @@ -88,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 a22b486c..ac20eb5a 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -19,17 +19,30 @@ > - {{ !useAtIcon ? '@' : '' }} + > + + @ + + diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index e671402d..d3ba1f71 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -30,6 +30,11 @@ const GeneralTab = { value: mode, label: this.$t(`settings.conversation_other_replies_button_${mode}`) })), + mentionLinkDisplayOptions: [ 'short', 'full_for_remote', 'full' ].map(mode => ({ + key: mode, + value: mode, + label: this.$t(`settings.mention_link_display_${mode}`) + })), loopSilentAvailable: // Firefox Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index ca78a07a..a042674e 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -134,6 +134,41 @@ +
  • + + {{ $t('settings.mention_link_display') }} + +
    • + diff --git a/src/i18n/en.json b/src/i18n/en.json index 15022ed4..a4a86f23 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -491,6 +491,14 @@ "true": "yes" }, "virtual_scrolling": "Optimize timeline rendering", + "use_at_icon": "Display @ symbol as an icon instead of text", + "mention_link_display": "Display mention links", + "mention_link_display_short": "always as short names (e.g. @foo)", + "mention_link_display_full_for_remote": "as full names only for remote users (e.g. @foo@example.org)", + "mention_link_display_full": "always as full names (e.g. @foo@example.org)", + "mention_link_show_tooltip": "Show full user names as tooltip for remote users", + "mention_link_show_avatar": "Show user avatar beside the link", + "mention_link_fade_domain": "Fade domains (e.g. @example.org in @foo@example.org)", "fun": "Fun", "greentext": "Meme arrows", "notifications": "Notifications", diff --git a/src/modules/config.js b/src/modules/config.js index c5bfc2bf..c85ea5ab 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -12,6 +12,7 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0] export const multiChoiceProperties = [ 'postContentType', 'subjectLineBehavior', + 'mentionLinkDisplay', // short | full_for_remote | full 'conversationDisplay', // tree | linear 'conversationOtherRepliesButton' // below | inside ] @@ -75,6 +76,11 @@ export const defaultState = { useOneClickNsfw: false, useContainFit: false, greentext: undefined, // instance default + useAtIcon: undefined, // instance default + 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 c107d239..c2e61312 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -20,6 +20,11 @@ const defaultState = { background: '/static/aurora_borealis.jpg', collapseMessageWithSubject: false, greentext: false, + useAtIcon: false, + mentionLinkDisplay: 'short', + mentionLinkShowTooltip: true, + mentionLinkShowAvatar: false, + mentionLinkFadeDomain: true, hideFilteredStatuses: false, hideMutedPosts: false, hidePostStats: false, @@ -100,6 +105,9 @@ const instance = { return instanceDefaultProperties .map(key => [key, state[key]]) .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) + }, + instanceDomain (state) { + return new URL(state.server).hostname } }, actions: {