From 76547fe66d1771f5bff732a34b0547f890f4621a Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 00:37:39 -0500 Subject: [PATCH 01/10] Add a pref for whether to display mention as icon or text --- src/components/mention_link/mention_link.js | 3 +++ src/components/mention_link/mention_link.vue | 9 +++++---- src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/modules/config.js | 1 + src/modules/instance.js | 1 + 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 65c62baa0c..637641af74 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -85,6 +85,9 @@ const MentionLink = { this.highlightType ] }, + useAtIcon () { + return this.mergedConfig.useAtIcon + }, ...mapGetters(['mergedConfig']), ...mapState({ currentUser: state => state.users.currentUser diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index a22b486c34..f633bf504c 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -24,13 +24,14 @@ > + />{{ !useAtIcon ? '@' : '' }} +
  • + + {{ $t('settings.use_at_icon') }} + +
    • diff --git a/src/modules/config.js b/src/modules/config.js index c79302b551..43c8b92f91 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -70,6 +70,7 @@ export const defaultState = { useOneClickNsfw: false, useContainFit: false, greentext: undefined, // instance default + useAtIcon: 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 60038f08b9..aaaf7acf18 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -20,6 +20,7 @@ const defaultState = { background: '/static/aurora_borealis.jpg', collapseMessageWithSubject: false, greentext: false, + useAtIcon: false, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS hideMutedPosts: false, From 1d4b1b296e8ee37f119f419df49791d99fef4774 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 01:16:33 -0500 Subject: [PATCH 02/10] Add pref for whether to display full user names and tooltips --- src/components/mention_link/mention_link.js | 20 +++++++++++++++++++ src/components/mention_link/mention_link.vue | 16 ++++++++++----- .../settings_modal/tabs/general_tab.js | 5 +++++ .../settings_modal/tabs/general_tab.vue | 19 ++++++++++++++++++ src/modules/config.js | 5 ++++- src/modules/instance.js | 5 +++++ 6 files changed, 64 insertions(+), 6 deletions(-) diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 637641af74..f71c771665 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -50,6 +50,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 }, @@ -88,6 +92,22 @@ const MentionLink = { 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']), ...mapState({ currentUser: state => state.users.currentUser diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index f633bf504c..fe16cbf5f6 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -28,10 +28,16 @@ size="sm" icon="at" class="at" - />{{ !useAtIcon ? '@' : '' }} + />{{ !useAtIcon ? '@' : '' }} diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index eeda61bf7c..952c328dee 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -20,6 +20,11 @@ const GeneralTab = { value: 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: // 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 5fec2d8976..8fce1eeea1 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -152,6 +152,25 @@ {{ $t('settings.use_at_icon') }} +
  • + + {{ $t('settings.mention_link_display') }} + +
    • +
      +
    • + + {{ $t('settings.mention_link_show_tooltip') }} + +
      • +
    diff --git a/src/modules/config.js b/src/modules/config.js index 43c8b92f91..e1a49a7d08 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -11,7 +11,8 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0] */ export const multiChoiceProperties = [ 'postContentType', - 'subjectLineBehavior' + 'subjectLineBehavior', + 'mentionLinkDisplay' // short | full_for_remote | full ] export const defaultState = { @@ -71,6 +72,8 @@ export const defaultState = { useContainFit: false, greentext: undefined, // instance default useAtIcon: undefined, // instance default + mentionLinkDisplay: undefined, // instance default + mentionLinkShowTooltip: 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 aaaf7acf18..200a7a6f99 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -21,6 +21,8 @@ const defaultState = { collapseMessageWithSubject: false, greentext: false, useAtIcon: false, + mentionLinkDisplay: 'short', + mentionLinkShowTooltip: true, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS hideMutedPosts: false, @@ -101,6 +103,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: { From 95007059d16cfed51b0f3d5c17fbbbe4464a71ed Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 01:37:20 -0500 Subject: [PATCH 03/10] Style properly usernames without tooltips --- src/components/mention_link/mention_link.scss | 8 ++++---- src/components/mention_link/mention_link.vue | 9 +++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index ec2689f8d7..44e1363a85 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -27,7 +27,7 @@ user-select: all; } - .short { + .short.-with-tooltip { user-select: none; } @@ -56,7 +56,7 @@ } &.-striped { - & .userName, + & .shortName, & .full { background-image: repeating-linear-gradient( @@ -70,14 +70,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); } diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index fe16cbf5f6..c9baee1009 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -19,18 +19,19 @@ > - {{ !useAtIcon ? '@' : '' }}{{ !useAtIcon ? '@' : '' }} Date: Mon, 10 Jan 2022 01:43:45 -0500 Subject: [PATCH 04/10] Make (You) unselectable --- src/components/mention_link/mention_link.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 44e1363a85..5f4675822b 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -27,7 +27,8 @@ user-select: all; } - .short.-with-tooltip { + .short.-with-tooltip, + .you { user-select: none; } From 9fde13c9685e934c8f610c96d481457b3d37c389 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:05:41 -0500 Subject: [PATCH 05/10] Add option to display user avatar in mention link --- src/components/mention_link/mention_link.js | 7 +++++++ src/components/mention_link/mention_link.scss | 9 +++++++++ src/components/mention_link/mention_link.vue | 5 +++++ src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/modules/config.js | 1 + src/modules/instance.js | 1 + 6 files changed, 28 insertions(+) diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index f71c771665..426dbe9759 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, @@ -108,6 +112,9 @@ const MentionLink = { shouldShowTooltip () { return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote }, + shouldShowAvatar () { + return this.mergedConfig.mentionLinkShowAvatar + }, ...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 5f4675822b..be00093a74 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,13 @@ border-radius: 2px; } + .mention-avatar { + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + width: 1.5em; + height: 1.5em; + vertical-align: middle; + } + .full { position: absolute; display: inline-block; diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index c9baee1009..8e78243a45 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -23,6 +23,11 @@ :href="url" @click.prevent="onClick" > + +
  • + + {{ $t('settings.mention_link_show_avatar') }} + +
    • diff --git a/src/modules/config.js b/src/modules/config.js index e1a49a7d08..cfb753ce02 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -74,6 +74,7 @@ export const defaultState = { useAtIcon: undefined, // instance default mentionLinkDisplay: undefined, // instance default mentionLinkShowTooltip: undefined, // instance default + mentionLinkShowAvatar: 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 200a7a6f99..6c8823c37f 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -23,6 +23,7 @@ const defaultState = { useAtIcon: false, mentionLinkDisplay: 'short', mentionLinkShowTooltip: true, + mentionLinkShowAvatar: true, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS hideMutedPosts: false, From aaf0b985ad0cf23ace370d2de0d8402df4a4af0e Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:10:42 -0500 Subject: [PATCH 06/10] Make avatar unselectable --- src/components/mention_link/mention_link.scss | 2 ++ src/components/mention_link/mention_link.vue | 5 ++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index be00093a74..9a285ad8f3 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -17,6 +17,8 @@ width: 1.5em; height: 1.5em; vertical-align: middle; + user-select: none; + margin-right: 0.2em; } .full { diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 8e78243a45..c0d7132299 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -23,13 +23,12 @@ :href="url" @click.prevent="onClick" > + - - Date: Mon, 10 Jan 2022 02:31:26 -0500 Subject: [PATCH 07/10] Add option to fade domains in mention link --- src/components/mention_link/mention_link.js | 3 +++ src/components/mention_link/mention_link.scss | 8 ++++++++ src/components/mention_link/mention_link.vue | 15 +++++++++++++-- .../settings_modal/tabs/general_tab.vue | 5 +++++ src/modules/config.js | 1 + src/modules/instance.js | 1 + 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 index 426dbe9759..5209907da4 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 9a285ad8f3..03306dcc73 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 c0d7132299..ac20eb5af0 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -41,6 +41,7 @@ /> + > + + @ + + diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index b44959418b..50599eae63 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') }} +
  • + + {{ $t('settings.mention_link_fade_domain') }} + +
    • diff --git a/src/modules/config.js b/src/modules/config.js index cfb753ce02..9f2d4ef384 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 6c8823c37f..2859b00b17 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, From c8983d56063bcb6970c7ba459288049d5d4d2d81 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:53:27 -0500 Subject: [PATCH 08/10] Make mention link prefs ui more intuitive --- .../settings_modal/tabs/general_tab.vue | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 50599eae63..44b1ac9265 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -147,11 +147,6 @@ {{ $t('settings.greentext') }} -
  • - - {{ $t('settings.use_at_icon') }} - -
      • -
    • +
    • {{ $t('settings.mention_link_show_tooltip') }}
      • +
    • + + {{ $t('settings.use_at_icon') }} + +
      • +
    • + + {{ $t('settings.mention_link_show_avatar') }} + +
      • +
    • + + {{ $t('settings.mention_link_fade_domain') }} + +
    -
  • - - {{ $t('settings.mention_link_show_avatar') }} - -
    • -
  • - - {{ $t('settings.mention_link_fade_domain') }} - -
    • From 7cc0d0763cc6b804433645247411a102d55d4eff Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:53:47 -0500 Subject: [PATCH 09/10] Add English translation for mention link prefs --- src/i18n/en.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/i18n/en.json b/src/i18n/en.json index 4be744a3fc..209fd18419 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -485,6 +485,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", From c3f1765b21f0312347ad8f1e514d5bc534121fcc Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Thu, 20 Jan 2022 12:07:09 -0500 Subject: [PATCH 10/10] Hide mention link avatar by default --- src/modules/instance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/instance.js b/src/modules/instance.js index 2859b00b17..d686f25835 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -23,7 +23,7 @@ const defaultState = { useAtIcon: false, mentionLinkDisplay: 'short', mentionLinkShowTooltip: true, - mentionLinkShowAvatar: true, + mentionLinkShowAvatar: false, mentionLinkFadeDomain: true, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS