logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 81bf18a31120beace24a4e176eab20df733881b3
parent a0ddfa499fe45e352e8c3920cba862a4902f0afe
Author: Henry Jameson <me@hjkos.com>
Date:   Mon, 27 Jun 2022 14:26:47 +0300

fix invisible old popover, cleanup, add selection indicator in mentionlinks

Diffstat:

Msrc/components/mention_link/mention_link.js17++++++++++++++++-
Msrc/components/mention_link/mention_link.scss24++++++++++--------------
Msrc/components/mention_link/mention_link.vue18++----------------
3 files changed, 28 insertions(+), 31 deletions(-)

diff --git 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 @@ -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 @@ -54,24 +54,10 @@ :class="{ '-you': shouldBoldenYou }" > {{ ' ' + $t('status.you') }}</span> <!-- eslint-enable vue/no-v-html --> - </a><span - v-if="shouldShowTooltip" - class="full" - > - <span - class="userNameFull" - > + </a><span class="full" ref="full"> <!-- eslint-disable vue/no-v-html --> - @<span - class="userName" - v-html="userName" - /><span - class="serverName" - :class="{ '-faded': shouldFadeDomain }" - v-html="'@' + serverName" - /> + @<span v-html="userName" /><span v-html="'@' + serverName" /> <!-- eslint-enable vue/no-v-html --> - </span> </span> </span> </UserPopover>