fix popovers cutting off in notifications, port popover changes from chats mr

This commit is contained in:
Shpuld Shpuldson 2020-06-16 17:20:36 +03:00
parent 8a15900c81
commit 5cf1574fdb
3 changed files with 12 additions and 1 deletions

View File

@ -3,6 +3,7 @@
<Popover
trigger="click"
placement="bottom"
:bound-to="{ x: 'container' }"
>
<div
slot="content"

View File

@ -3,6 +3,7 @@
trigger="click"
placement="top"
class="extra-button-popover"
:bound-to="{ x: 'container' }"
>
<div
slot="content"

View File

@ -10,6 +10,9 @@ const Popover = {
// 'container' for using offsetParent as boundaries for either axis
// or 'viewport'
boundTo: Object,
// Takes a selector to use as a replacement for the parent container
// for getting boundaries for x an y axis
boundToSelector: String,
// Takes a top/bottom/left/right object, how much space to leave
// between boundary and popover element
margin: Object,
@ -27,6 +30,11 @@ const Popover = {
}
},
methods: {
containerBoundingClientRect () {
const container = this.boundToSelector ? document.querySelector(this.boundToSelector) : this.$el.offsetParent
console.log('test', container)
return container.getBoundingClientRect()
},
updateStyles () {
if (this.hidden) {
this.styles = {
@ -45,7 +53,8 @@ const Popover = {
// Minor optimization, don't call a slow reflow call if we don't have to
const parentBounds = this.boundTo &&
(this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
this.$el.offsetParent.getBoundingClientRect()
this.containerBoundingClientRect()
const margin = this.margin || {}
// What are the screen bounds for the popover? Viewport vs container