From 76547fe66d1771f5bff732a34b0547f890f4621a Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 00:37:39 -0500 Subject: Add a pref for whether to display mention as icon or text --- src/components/mention_link/mention_link.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 65c62baa..637641af 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 -- cgit v1.2.3-70-g09d2 From 1d4b1b296e8ee37f119f419df49791d99fef4774 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 01:16:33 -0500 Subject: 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 +++++++++++----- src/components/settings_modal/tabs/general_tab.js | 5 +++++ src/components/settings_modal/tabs/general_tab.vue | 19 +++++++++++++++++++ src/modules/config.js | 5 ++++- src/modules/instance.js | 5 +++++ 6 files changed, 64 insertions(+), 6 deletions(-) (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 637641af..f71c7716 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 f633bf50..fe16cbf5 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 eeda61bf..952c328d 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 5fec2d89..8fce1eee 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 43c8b92f..e1a49a7d 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 aaaf7acf..200a7a6f 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: { -- cgit v1.2.3-70-g09d2 From 9fde13c9685e934c8f610c96d481457b3d37c389 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:05:41 -0500 Subject: 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(+) (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index f71c7716..426dbe97 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 5f467582..be00093a 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 c9baee10..8e78243a 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 e1a49a7d..cfb753ce 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 200a7a6f..6c8823c3 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, -- cgit v1.2.3-70-g09d2 From 0c60b31eee3e31810ebd41bc186a9825a39cd821 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:31:26 -0500 Subject: 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 +++++++++++++-- src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/modules/config.js | 1 + src/modules/instance.js | 1 + 6 files changed, 31 insertions(+), 2 deletions(-) (limited to 'src/components/mention_link/mention_link.js') 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 @@ /> + > + + @ + + 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') }} +
  • + + {{ $t('settings.mention_link_fade_domain') }} + +
    • 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, -- cgit v1.2.3-70-g09d2 From bfb3a4364be3f71f7c46056aeb8972f04a072703 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Feb 2022 22:34:57 +0200 Subject: options to disable (You)s and highlighting of yourself --- src/components/mention_link/mention_link.js | 8 +++++++- src/components/mention_link/mention_link.vue | 4 ++-- src/components/settings_modal/tabs/general_tab.vue | 10 ++++++++++ src/i18n/en.json | 2 ++ src/modules/config.js | 2 ++ src/modules/instance.js | 2 ++ 6 files changed, 25 insertions(+), 3 deletions(-) (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 5209907d..55eea195 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -87,7 +87,7 @@ const MentionLink = { classnames () { return [ { - '-you': this.isYou, + '-you': this.isYou && this.shouldBoldenYou, '-highlighted': this.highlight }, this.highlightType @@ -115,6 +115,12 @@ const MentionLink = { shouldShowAvatar () { return this.mergedConfig.mentionLinkShowAvatar }, + shouldShowYous () { + return this.mergedConfig.mentionLinkShowYous + }, + shouldBoldenYou () { + return this.mergedConfig.mentionLinkBoldenYou + }, shouldFadeDomain () { return this.mergedConfig.mentionLinkFadeDomain }, diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index ac20eb5a..d8ab79fb 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -45,8 +45,8 @@ v-html="'@' + serverName" />     {{ $t('status.you') }} diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 44b1ac92..eba3b268 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -147,6 +147,11 @@ {{ $t('settings.greentext') }} +
  • + + {{ $t('settings.show_yous') }} + +
    • +
  • + + {{ $t('settings.mention_link_bolden_you') }} + +
    • diff --git a/src/i18n/en.json b/src/i18n/en.json index 209fd184..8fd189c6 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -493,8 +493,10 @@ "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)", + "mention_link_bolden_you": "Bolden text of your mention", "fun": "Fun", "greentext": "Meme arrows", + "show_yous": "Show (You)s", "notifications": "Notifications", "notification_setting_filters": "Filters", "notification_setting_block_from_strangers": "Block notifications from users who you do not follow", diff --git a/src/modules/config.js b/src/modules/config.js index 9f2d4ef3..20979174 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -76,6 +76,8 @@ export const defaultState = { mentionLinkShowTooltip: undefined, // instance default mentionLinkShowAvatar: undefined, // instance default mentionLinkFadeDomain: undefined, // instance default + mentionLinkShowYous: undefined, // instance default + mentionLinkBoldenYou: 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 d686f258..1abd784f 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -25,6 +25,8 @@ const defaultState = { mentionLinkShowTooltip: true, mentionLinkShowAvatar: false, mentionLinkFadeDomain: true, + mentionLinkShowYous: false, + mentionLinkBoldenYou: true, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS hideMutedPosts: false, -- cgit v1.2.3-70-g09d2 From 55adcd822e194be8aaeb9d6b649de90e9d5e1e45 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jun 2022 16:31:56 +0300 Subject: fix animations, replace ugly old mentionlink tooltips with new usercard ones --- src/App.scss | 2 +- src/components/mention_link/mention_link.js | 8 +- src/components/mention_link/mention_link.scss | 7 +- src/components/mention_link/mention_link.vue | 133 ++++++++++++--------- src/components/popover/popover.js | 40 +++++-- src/components/popover/popover.vue | 36 +++--- src/components/settings_modal/tabs/general_tab.vue | 2 +- src/i18n/en.json | 2 +- 8 files changed, 140 insertions(+), 90 deletions(-) (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/App.scss b/src/App.scss index 5cd0b96e..79c07683 100644 --- a/src/App.scss +++ b/src/App.scss @@ -829,7 +829,7 @@ option { // Vue transitions .fade-enter-active, .fade-leave-active { - transition: opacity 0.2s; + transition: opacity 0.3s; } .fade-enter-from, diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 55eea195..4b088f88 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p import { mapGetters, mapState } from 'vuex' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import UserAvatar from '../user_avatar/user_avatar.vue' +import { defineAsyncComponent } from 'vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faAt @@ -14,7 +15,9 @@ library.add( const MentionLink = { name: 'MentionLink', components: { - UserAvatar + UserAvatar, + Popover: defineAsyncComponent(() => import('../popover/popover.vue')), + UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')) }, props: { url: { @@ -36,6 +39,7 @@ const MentionLink = { }, methods: { onClick () { + if (this.shouldShowTooltip) return const link = generateProfileLink( this.userId || this.user.id, this.userScreenName || this.user.screen_name @@ -110,7 +114,7 @@ const MentionLink = { } }, shouldShowTooltip () { - return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote + return this.mergedConfig.mentionLinkShowTooltip }, shouldShowAvatar () { return this.mergedConfig.mentionLinkShowAvatar diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 1d856ff9..3b3a05b1 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -101,7 +101,6 @@ } &:hover .new .full { - opacity: 1; pointer-events: initial; } @@ -113,3 +112,9 @@ color: var(--faint, $fallback--faint); } } + +.mention-link-popover { + max-width: 70ch; + max-height: 20rem; + overflow: hidden; +} diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 022f04c7..686ad27f 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -9,66 +9,85 @@ class="original" target="_blank" v-html="content" - /> + - - - {{ !useAtIcon ? '@' : '' }} - - {{ ' ' + $t('status.you') }} - - + + + diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index a91c084f..3c3a95bd 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -31,13 +31,18 @@ const Popover = { // If true, subtract padding when calculating position for the popover, // use it when popover offset looks to be different on top vs bottom. - removePadding: Boolean + removePadding: Boolean, + + // self-explanatory (i hope) + disabled: Boolean }, data () { return { hidden: true, - styles: { opacity: 0 }, - oldSize: { width: 0, height: 0 } + styles: {}, + oldSize: { width: 0, height: 0 }, + // used to avoid blinking if hovered onto popover + graceTimeout: null } }, methods: { @@ -47,9 +52,7 @@ const Popover = { }, updateStyles () { if (this.hidden) { - this.styles = { - opacity: 0 - } + this.styles = {} return } @@ -132,7 +135,6 @@ const Popover = { // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. this.styles = { - opacity: 1, left: `${Math.round(translateX)}px`, top: `${Math.round(translateY)}px`, position: 'fixed' @@ -143,6 +145,7 @@ const Popover = { } }, showPopover () { + if (this.disabled) return const wasHidden = this.hidden this.hidden = false this.$nextTick(() => { @@ -153,13 +156,30 @@ const Popover = { hidePopover () { if (!this.hidden) this.$emit('close') this.hidden = true - this.styles = { opacity: 0 } }, onMouseenter (e) { - if (this.trigger === 'hover') this.showPopover() + if (this.trigger === 'hover') { + clearTimeout(this.graceTimeout) + this.graceTimeout = null + this.showPopover() + } }, onMouseleave (e) { - if (this.trigger === 'hover') this.hidePopover() + if (this.trigger === 'hover') { + this.graceTimeout = setTimeout(() => this.hidePopover(), 1) + } + }, + onMouseenterContent (e) { + if (this.trigger === 'hover') { + clearTimeout(this.graceTimeout) + this.graceTimeout = null + this.showPopover() + } + }, + onMouseleaveContent (e) { + if (this.trigger === 'hover') { + this.graceTimeout = setTimeout(() => this.hidePopover(), 1) + } }, onClick (e) { if (this.trigger === 'click') { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 6103fbdc..528c4fb2 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -1,5 +1,5 @@ + + -- cgit v1.2.3-70-g09d2 From 81bf18a31120beace24a4e176eab20df733881b3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Jun 2022 14:26:47 +0300 Subject: fix invisible old popover, cleanup, add selection indicator in mentionlinks --- src/components/mention_link/mention_link.js | 17 ++++++++++++++++- src/components/mention_link/mention_link.scss | 24 ++++++++++-------------- src/components/mention_link/mention_link.vue | 18 ++---------------- 3 files changed, 28 insertions(+), 31 deletions(-) (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 7e47625a..4a74fbe2 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -36,6 +36,11 @@ const MentionLink = { type: String } }, + data () { + return { + hasSelection: false + } + }, methods: { onClick () { if (this.shouldShowTooltip) return @@ -44,8 +49,17 @@ const MentionLink = { this.userScreenName || this.user.screen_name ) this.$router.push(link) + }, + handleSelection () { + this.hasSelection = document.getSelection().containsNode(this.$refs.full, true) } }, + mounted () { + document.addEventListener('selectionchange', this.handleSelection) + }, + unmounted () { + document.removeEventListener('selectionchange', this.handleSelection) + }, computed: { user () { return this.url && this.$store && this.$store.getters.findUserByUrl(this.url) @@ -91,7 +105,8 @@ const MentionLink = { return [ { '-you': this.isYou && this.shouldBoldenYou, - '-highlighted': this.highlight + '-highlighted': this.highlight, + '-has-selection': this.hasSelection }, this.highlightType ] diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 3b3a05b1..8b2af926 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -55,11 +55,14 @@ .new { &.-you { - & .shortName, - & .full { + .shortName { font-weight: 600; } } + &.-has-selection { + color: var(--alertNeutralText, $fallback--text); + background-color: var(--alertNeutral, $fallback--fg); + } .at { color: var(--link); @@ -72,8 +75,7 @@ } &.-striped { - & .shortName, - & .full { + & .shortName { background-image: repeating-linear-gradient( 135deg, @@ -86,31 +88,25 @@ } &.-solid { - & .shortName, - & .full { + .shortName { background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2)); } } &.-side { - & .shortName, - & .userNameFull { + .shortName { box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor); } } } - &:hover .new .full { - pointer-events: initial; + .full { + pointer-events: none; } .serverName.-faded { color: var(--faintLink, $fallback--link); } - - .full .-faded { - color: var(--faint, $fallback--faint); - } } .mention-link-popover { diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 0cff50ab..56da8e0f 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -54,24 +54,10 @@ :class="{ '-you': shouldBoldenYou }" > {{ ' ' + $t('status.you') }}     - - + - @ + @ - -- cgit v1.2.3-70-g09d2 From 0a79a747730bb4a10eb2544412dab68a10602240 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 29 Aug 2022 18:46:41 -0400 Subject: Use dedicated indicator for non-ascii domain names --- src/components/basic_user_card/basic_user_card.js | 4 ++- src/components/basic_user_card/basic_user_card.vue | 8 ++--- src/components/emoji_input/emoji_input.js | 4 ++- src/components/emoji_input/emoji_input.vue | 16 ++++++++- src/components/emoji_input/suggestor.js | 11 ++++--- src/components/mention_link/mention_link.js | 2 ++ src/components/mention_link/mention_link.vue | 3 ++ src/components/notification/notification.js | 4 ++- src/components/notification/notification.vue | 21 ++++++------ src/components/status/status.js | 4 ++- src/components/status/status.vue | 16 ++++----- .../unicode_domain_indicator.vue | 26 +++++++++++++++ src/components/user_card/user_card.js | 4 ++- src/components/user_card/user_card.vue | 9 ++--- src/components/user_link/user_link.vue | 38 ++++++++++++++++++++++ .../user_list_popover/user_list_popover.js | 2 ++ .../user_list_popover/user_list_popover.vue | 2 +- .../user_reporting_modal/user_reporting_modal.js | 4 ++- .../user_reporting_modal/user_reporting_modal.vue | 10 ++++-- src/i18n/en.json | 3 ++ .../entity_normalizer/entity_normalizer.service.js | 6 ++-- .../entity_normalizer/entity_normalizer.spec.js | 3 +- 22 files changed, 151 insertions(+), 49 deletions(-) create mode 100644 src/components/unicode_domain_indicator/unicode_domain_indicator.vue create mode 100644 src/components/user_link/user_link.vue (limited to 'src/components/mention_link/mention_link.js') diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js index 8b1a2c38..31de2d75 100644 --- a/src/components/basic_user_card/basic_user_card.js +++ b/src/components/basic_user_card/basic_user_card.js @@ -1,5 +1,6 @@ import UserPopover from '../user_popover/user_popover.vue' import UserAvatar from '../user_avatar/user_avatar.vue' +import UserLink from '../user_link/user_link.vue' import RichContent from 'src/components/rich_content/rich_content.jsx' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -10,7 +11,8 @@ const BasicUserCard = { components: { UserPopover, UserAvatar, - RichContent + RichContent, + UserLink }, methods: { userProfileLink (user) { diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 9cca7840..418de926 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -30,12 +30,10 @@ />
    - - @{{ user.screen_name_ui }} - + :user="user" + />
    diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 5ba3907f..b664d6b3 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -1,5 +1,6 @@ import Completion from '../../services/completion/completion.js' import EmojiPicker from '../emoji_picker/emoji_picker.vue' +import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue' import { take } from 'lodash' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -120,7 +121,8 @@ const EmojiInput = { } }, components: { - EmojiPicker + EmojiPicker, + UnicodeDomainIndicator }, computed: { padEmoji () { diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 7d95ab7e..81b81913 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -50,7 +50,21 @@ {{ suggestion.replacement }}
    - {{ suggestion.displayText }} + + {{ suggestion.displayText }} + + + {{ suggestion.displayText }} + {{ suggestion.detailText }}
    diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index e8efbd1e..0ddb4d68 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -116,11 +116,12 @@ export const suggestUsers = ({ dispatch, state }) => { return diff + nameAlphabetically + screenNameAlphabetically /* eslint-disable camelcase */ - }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({ - displayText: screen_name_ui, - detailText: name, - imageUrl: profile_image_url_original, - replacement: '@' + screen_name + ' ' + }).map((user) => ({ + user, + displayText: user.screen_name_ui, + detailText: user.name, + imageUrl: user.profile_image_url_original, + replacement: '@' + user.screen_name + ' ' })) /* eslint-enable camelcase */ diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 4a74fbe2..6515bd11 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p import { mapGetters, mapState } from 'vuex' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import UserAvatar from '../user_avatar/user_avatar.vue' +import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue' import { defineAsyncComponent } from 'vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -16,6 +17,7 @@ const MentionLink = { name: 'MentionLink', components: { UserAvatar, + UnicodeDomainIndicator, UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue')) }, props: { diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 3af502ef..869a3257 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -47,6 +47,9 @@ class="serverName" :class="{ '-faded': shouldFadeDomain }" v-html="'@' + serverName" + />     - - {{ notification.from_profile.screen_name_ui }} - +
    - - @{{ user.screen_name_ui }} - + :user="user" + /> + + diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js index e24eb9f7..046e0abd 100644 --- a/src/components/user_list_popover/user_list_popover.js +++ b/src/components/user_list_popover/user_list_popover.js @@ -1,5 +1,6 @@ import { defineAsyncComponent } from 'vue' import RichContent from 'src/components/rich_content/rich_content.jsx' +import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' @@ -15,6 +16,7 @@ const UserListPopover = { ], components: { RichContent, + UnicodeDomainIndicator, Popover: defineAsyncComponent(() => import('../popover/popover.vue')), UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue')) }, diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index a3ce54c3..635dc7f6 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -29,7 +29,7 @@ :emoji="user.emoji" /> - {{ user.screen_name_ui }} + {{ user.screen_name_ui }}
    diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js index 85ffc661..67fde084 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.js +++ b/src/components/user_reporting_modal/user_reporting_modal.js @@ -2,13 +2,15 @@ import Status from '../status/status.vue' import List from '../list/list.vue' import Checkbox from '../checkbox/checkbox.vue' import Modal from '../modal/modal.vue' +import UserLink from '../user_link/user_link.vue' const UserReportingModal = { components: { Status, List, Checkbox, - Modal + Modal, + UserLink }, data () { return { diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index 429a66e2..8c42ab7b 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -5,9 +5,13 @@ >
    -
    - {{ $t('user_reporting.title', [user.screen_name_ui]) }} -
    + + +
    diff --git a/src/i18n/en.json b/src/i18n/en.json index 91722d9a..4ce56678 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1006,5 +1006,8 @@ "update_changelog": "For more details on what's changed, see {theFullChangelog}.", "update_changelog_here": "the full changelog", "art_by": "Art by {linkToArtist}" + }, + "unicode_domain_indicator": { + "tooltip": "This domain contains non-ascii characters." } } diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index e9cbcfe6..ce316832 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -214,12 +214,14 @@ export const parseUser = (data) => { output.screen_name_ui = output.screen_name if (output.screen_name && output.screen_name.includes('@')) { const parts = output.screen_name.split('@') - let unicodeDomain = punycode.toUnicode(parts[1]) + const unicodeDomain = punycode.toUnicode(parts[1]) if (unicodeDomain !== parts[1]) { // Add some identifier so users can potentially spot spoofing attempts: // lain.com and xn--lin-6cd.com would appear identical otherwise. - unicodeDomain = '🌏' + unicodeDomain + output.screen_name_ui_contains_non_ascii = true output.screen_name_ui = [parts[0], unicodeDomain].join('@') + } else { + output.screen_name_ui_contains_non_ascii = false } } diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js index 98bb05a8..3923596b 100644 --- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js +++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js @@ -269,7 +269,8 @@ describe('API Entities normalizer', () => { it('converts IDN to unicode and marks it as internatonal', () => { const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' }) - expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com') + expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@lаin.com') + expect(parseUser(user)).to.have.property('screen_name_ui_contains_non_ascii').that.equal(true) }) }) -- cgit v1.2.3-70-g09d2