add stay-on-click prop to solve case of clicking user avatar in status popover

This commit is contained in:
Henry Jameson 2022-07-31 00:05:26 +03:00
parent 03e6c6b993
commit d5bc825616
3 changed files with 36 additions and 4 deletions

View File

@ -40,7 +40,10 @@ const Popover = {
overlayCenters: Boolean,
// What selector (witin popover!) to use for determining center of popover
overlayCentersSelector: String
overlayCentersSelector: String,
// Lets hover popover stay when clicking inside of it
stayOnClick: Boolean
},
inject: ['popoversZLayer'], // override popover z layer
data () {
@ -50,6 +53,7 @@ const Popover = {
// with popovers refusing to be hidden when user wants to interact with something in below popover
lockReEntry: false,
hidden: true,
pinned: false,
styles: {},
oldSize: { width: 0, height: 0 },
scrollable: null,
@ -196,9 +200,10 @@ const Popover = {
},
showPopover () {
if (this.disabled) return
this.pinned = false
const wasHidden = this.hidden
this.hidden = false
if (this.trigger === 'click') {
if (this.trigger === 'click' || this.stayOnClick) {
document.addEventListener('click', this.onClickOutside)
}
this.scrollable.addEventListener('scroll', this.onScroll)
@ -227,7 +232,7 @@ const Popover = {
}
},
onMouseleave (e) {
if (this.trigger === 'hover') {
if (this.trigger === 'hover' && !this.pinned) {
this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
}
},
@ -240,7 +245,7 @@ const Popover = {
}
},
onMouseleaveContent (e) {
if (this.trigger === 'hover') {
if (this.trigger === 'hover' && !this.pinned) {
this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
}
},
@ -259,6 +264,11 @@ const Popover = {
if (this.$el.contains(e.target)) return
this.hidePopover()
},
onClickContent (e) {
if (this.trigger === 'hover' && this.stayOnClick) {
this.pinned = true
}
},
onScroll (e) {
this.updateStyles()
},

View File

@ -21,12 +21,22 @@
:class="popoverClass || 'popover-default'"
@mouseenter="onMouseenterContent"
@mouseleave="onMouseleaveContent"
@click="onClickContent"
>
<slot
name="content"
class="popover-inner"
:close="hidePopover"
/>
<div
v-if="stayOnClick && pinned"
class="pinned-tooltip-icon popover popover-default"
>
<FAIcon
icon="thumbtack"
class="faint"
/>
</div>
</div>
</transition>
</teleport>
@ -51,6 +61,17 @@
box-shadow: var(--popupShadow);
}
.pinned-tooltip-icon {
position: absolute;
top: -1em;
left: -1em;
width: 2em;
height: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.popover-default {
&:after {
content: '';

View File

@ -1,6 +1,7 @@
<template>
<Popover
trigger="hover"
:stay-on-click="true"
popover-class="popover-default status-popover"
:bound-to="{ x: 'container' }"
@show="enter"