From 5cf1574fdb36e14e342e3cbdd9733e0a1817a7cb Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 16 Jun 2020 17:20:36 +0300
Subject: [PATCH] fix popovers cutting off in notifications, port popover
changes from chats mr
---
src/components/account_actions/account_actions.vue | 1 +
src/components/extra_buttons/extra_buttons.vue | 1 +
src/components/popover/popover.js | 11 ++++++++++-
3 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 744b77d53..029e70968 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -3,6 +3,7 @@
<Popover
trigger="click"
placement="bottom"
+ :bound-to="{ x: 'container' }"
>
<div
slot="content"
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index bca93ea74..68db6fd8f 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -3,6 +3,7 @@
trigger="click"
placement="top"
class="extra-button-popover"
+ :bound-to="{ x: 'container' }"
>
<div
slot="content"
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5881d266b..f1abe3add 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -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
--
GitLab