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.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index a22b486c..f633bf50 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -24,13 +24,14 @@ > + />{{ !useAtIcon ? '@' : '' }} 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.vue') 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 95007059d16cfed51b0f3d5c17fbbbe4464a71ed Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 01:37:20 -0500 Subject: 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(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index ec2689f8..44e1363a 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 fe16cbf5..c9baee10 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 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.vue') 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 aaf0b985ad0cf23ace370d2de0d8402df4a4af0e Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 10 Jan 2022 02:10:42 -0500 Subject: 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(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index be00093a..9a285ad8 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 8e78243a..c0d71322 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: 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.vue') 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.vue') 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 4c7edfc9a9865003483bc4b78d29bb554e7901ad Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 9 Feb 2022 23:34:06 +0200 Subject: more spacing/wrapping fixes --- src/components/mention_link/mention_link.scss | 1 + src/components/mention_link/mention_link.vue | 8 +++----- src/components/mentions_line/mentions_line.scss | 1 + src/components/status_body/status_body.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index c7db7fb9..a4326296 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -5,6 +5,7 @@ white-space: normal; display: inline; color: var(--link); + word-break: normal; & .new, & .original { diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index d8ab79fb..13786c3a 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -43,14 +43,12 @@ class="serverName" :class="{ '-faded': shouldFadeDomain }" v-html="'@' + serverName" - />     - {{ $t('status.you') }} + > {{ $t('status.you') }}     - - Date: Fri, 11 Feb 2022 15:06:12 +0200 Subject: more spacing fixes --- src/components/mention_link/mention_link.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 13786c3a..3562f511 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -9,9 +9,7 @@ class="original" target="_blank" v-html="content" - /> - - Date: Sun, 27 Mar 2022 14:10:45 +0300 Subject: fix (You) spacing --- src/components/mention_link/mention_link.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 3562f511..022f04c7 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -41,10 +41,12 @@ class="serverName" :class="{ '-faded': shouldFadeDomain }" v-html="'@' + serverName" - /> + + {{ $t('status.you') }} + > {{ ' ' + $t('status.you') }} 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.vue') 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.vue') 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 fddb531ed20b31c44e6911418e7bbb884836c40a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 31 Jul 2022 12:35:48 +0300 Subject: --fix --- src/App.vue | 20 ++++-- src/boot/after_store.js | 4 +- src/boot/routes.js | 9 ++- src/components/about/about.vue | 2 +- src/components/account_actions/account_actions.vue | 4 +- src/components/avatar_list/avatar_list.vue | 2 +- src/components/basic_user_card/basic_user_card.vue | 11 ++-- src/components/chat/chat.js | 2 +- src/components/chat_list/chat_list.vue | 2 +- src/components/chat_message/chat_message.vue | 10 +-- src/components/chat_title/chat_title.vue | 4 +- src/components/checkbox/checkbox.vue | 4 +- src/components/color_input/color_input.vue | 2 +- src/components/conversation/conversation.js | 2 +- src/components/conversation/conversation.vue | 2 +- src/components/desktop_nav/desktop_nav.js | 24 +++++--- .../domain_mute_card/domain_mute_card.vue | 4 +- src/components/emoji_input/emoji_input.js | 2 +- src/components/emoji_picker/emoji_picker.js | 2 +- src/components/emoji_reactions/emoji_reactions.vue | 2 +- src/components/extra_buttons/extra_buttons.js | 2 +- src/components/extra_buttons/extra_buttons.vue | 6 +- src/components/favorite_button/favorite_button.vue | 2 +- src/components/features_panel/features_panel.vue | 2 +- src/components/flash/flash.js | 2 +- src/components/font_control/font_control.vue | 2 +- src/components/hashtag_link/hashtag_link.vue | 4 +- src/components/image_cropper/image_cropper.js | 2 +- .../instance_specific_panel.vue | 2 +- src/components/interactions/interactions.js | 2 +- .../interface_language_switcher.vue | 1 + src/components/login_form/login_form.js | 2 +- src/components/login_form/login_form.vue | 2 +- src/components/media_upload/media_upload.js | 5 +- src/components/media_upload/media_upload.vue | 2 +- src/components/mention_link/mention_link.vue | 17 ++--- src/components/mentions_line/mentions_line.vue | 14 ++--- src/components/mfa_form/recovery_form.vue | 2 +- src/components/mobile_nav/mobile_nav.vue | 5 +- src/components/modal/modal.vue | 8 +-- .../moderation_tools/moderation_tools.vue | 8 +-- .../mrf_transparency_panel.js | 6 +- src/components/nav_panel/nav_panel.vue | 2 +- src/components/notification/notification.js | 2 +- src/components/notification/notification.vue | 4 +- .../notifications/notification_filters.vue | 4 +- src/components/notifications/notifications.vue | 5 +- src/components/popover/popover.js | 34 +++++----- .../post_status_form/post_status_form.js | 16 ++--- src/components/react_button/react_button.js | 2 +- src/components/react_button/react_button.vue | 8 +-- src/components/remote_follow/remote_follow.js | 2 +- src/components/retweet_button/retweet_button.vue | 2 +- src/components/search_bar/search_bar.js | 2 +- src/components/selectable_list/selectable_list.vue | 4 +- .../settings_modal/helpers/modified_indicator.vue | 4 +- .../helpers/server_side_indicator.vue | 4 +- src/components/settings_modal/settings_modal.vue | 4 +- src/components/settings_modal/tabs/general_tab.vue | 10 ++- .../settings_modal/tabs/mutes_and_blocks_tab.vue | 34 +++++----- src/components/settings_modal/tabs/profile_tab.js | 10 +-- src/components/settings_modal/tabs/profile_tab.vue | 2 +- .../settings_modal/tabs/security_tab/mfa.js | 6 +- .../settings_modal/tabs/security_tab/mfa_totp.js | 2 +- .../tabs/security_tab/security_tab.js | 2 +- .../settings_modal/tabs/theme_tab/preview.vue | 5 +- .../settings_modal/tabs/theme_tab/theme_tab.js | 8 +-- src/components/shadow_control/shadow_control.js | 8 ++- src/components/shadow_control/shadow_control.vue | 2 +- src/components/shout_panel/shout_panel.js | 2 +- src/components/side_drawer/side_drawer.js | 2 +- src/components/side_drawer/side_drawer.vue | 2 +- src/components/staff_panel/staff_panel.js | 4 +- src/components/staff_panel/staff_panel.vue | 2 +- src/components/status/status.js | 6 +- src/components/status/status.vue | 11 ++-- src/components/status_body/status_body.vue | 2 +- src/components/status_content/status_content.vue | 2 +- src/components/status_popover/status_popover.vue | 8 +-- src/components/sticker_picker/sticker_picker.js | 4 +- .../terms_of_service_panel.vue | 2 +- src/components/timeline/timeline.vue | 5 +- .../timeline/timeline_quick_settings.vue | 4 +- src/components/timeline_menu/timeline_menu.js | 6 +- src/components/timeline_menu/timeline_menu.vue | 6 +- .../timeline_menu/timeline_menu_content.vue | 2 +- src/components/user_card/user_card.js | 2 +- src/components/user_card/user_card.vue | 2 +- .../user_list_popover/user_list_popover.vue | 6 +- src/components/user_popover/user_popover.vue | 42 ++++++------- src/components/user_profile/user_profile.vue | 15 +++-- .../user_reporting_modal/user_reporting_modal.vue | 2 +- src/components/who_to_follow/who_to_follow.js | 2 +- .../who_to_follow_panel/who_to_follow_panel.js | 10 +-- .../who_to_follow_panel/who_to_follow_panel.vue | 2 +- src/i18n/messages.js | 2 +- src/lib/notification-i18n-loader.js | 4 +- src/lib/persisted_state.js | 12 ++-- src/modules/api.js | 4 +- src/modules/config.js | 2 +- src/modules/errors.js | 4 +- src/modules/serverSideConfig.js | 28 ++++----- src/modules/statuses.js | 20 +++--- src/modules/users.js | 24 ++++---- src/services/api/api.service.js | 72 +++++++++++----------- src/services/chat_service/chat_service.js | 12 ++-- src/services/chat_utils/chat_utils.js | 2 +- src/services/color_convert/color_convert.js | 12 ++-- src/services/completion/completion.js | 2 +- src/services/date_utils/date_utils.js | 2 +- .../entity_normalizer/entity_normalizer.service.js | 4 +- src/services/file_size_format/file_size_format.js | 8 +-- .../html_converter/html_line_converter.service.js | 4 +- src/services/html_converter/utility.service.js | 2 +- src/services/locale/locale.service.js | 14 ++--- src/services/new_api/password_reset.js | 2 +- .../notifications_fetcher.service.js | 12 ++-- src/services/push/push.js | 4 +- src/services/theme_data/theme_data.service.js | 2 +- .../timeline_fetcher/timeline_fetcher.service.js | 16 ++--- src/services/user_highlighter/user_highlighter.js | 2 +- src/sw.js | 4 +- test/e2e/custom-assertions/elementCount.js | 2 +- test/e2e/nightwatch.conf.js | 54 ++++++++-------- test/e2e/runner.js | 8 +-- test/unit/karma.conf.js | 14 ++--- test/unit/specs/components/emoji_input.spec.js | 2 +- test/unit/specs/components/rich_content.spec.js | 2 +- test/unit/specs/components/user_profile.spec.js | 6 +- test/unit/specs/modules/statuses.spec.js | 4 +- .../services/chat_service/chat_service.spec.js | 24 ++++---- .../entity_normalizer/entity_normalizer.spec.js | 8 +-- .../file_size_format/file_size_format.spec.js | 4 +- 133 files changed, 508 insertions(+), 449 deletions(-) (limited to 'src/components/mention_link/mention_link.vue') diff --git a/src/App.vue b/src/App.vue index 7d4a8e1e..0efadaf0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,8 +15,12 @@ class="app-layout container" :class="classes" > -
    -
    +
    +
    -
    +
    -
    +
    { copyInstanceOption('hideSitename') copyInstanceOption('sidebarRight') - return store.dispatch('setTheme', config['theme']) + return store.dispatch('setTheme', config.theme) } const getTOS = async ({ store }) => { @@ -197,7 +197,7 @@ const getStickers = async ({ store }) => { const stickers = (await Promise.all( Object.entries(values).map(async ([name, path]) => { const resPack = await window.fetch(path + 'pack.json') - var meta = {} + let meta = {} if (resPack.ok) { meta = await resPack.json() } diff --git a/src/boot/routes.js b/src/boot/routes.js index 726476a8..c8194d5f 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -31,7 +31,8 @@ export default (store) => { } let routes = [ - { name: 'root', + { + name: 'root', path: '/', redirect: _to => { return (store.state.users.currentUser @@ -45,12 +46,14 @@ export default (store) => { { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, - { name: 'remote-user-profile-acct', + { + name: 'remote-user-profile-acct', path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)', component: RemoteUserResolver, beforeEnter: validateAuthenticatedRoute }, - { name: 'remote-user-profile', + { + name: 'remote-user-profile', path: '/remote-users/:hostname/:username', component: RemoteUserResolver, beforeEnter: validateAuthenticatedRoute diff --git a/src/components/about/about.vue b/src/components/about/about.vue index 5d5d6479..33586c97 100644 --- a/src/components/about/about.vue +++ b/src/components/about/about.vue @@ -8,7 +8,7 @@
    - + diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index c35d01af..23547f2c 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -6,7 +6,7 @@ :bound-to="{ x: 'container' }" remove-padding > -