add stay-on-click prop to solve case of clicking user avatar in status popover
This commit is contained in:
parent
03e6c6b993
commit
d5bc825616
|
@ -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()
|
||||
},
|
||||
|
|
|
@ -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: '';
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<Popover
|
||||
trigger="hover"
|
||||
:stay-on-click="true"
|
||||
popover-class="popover-default status-popover"
|
||||
:bound-to="{ x: 'container' }"
|
||||
@show="enter"
|
||||
|
|
Loading…
Reference in New Issue