fix invisible old popover, cleanup, add selection indicator in mentionlinks
This commit is contained in:
parent
a0ddfa499f
commit
81bf18a311
|
@ -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
|
||||
]
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue