pleroma-fe

commit: ebf4321e645a34a40c00b0884546e9da86361952
parent: 57626c125d0477716a638854c4243ee0fde96923
Author: Shpuld Shpludson <shp@cock.li>
Date:   Thu, 18 Jun 2020 06:08:07 +0000

Merge branch 'fix/popovers-cutting-off-in-notifications' into 'develop'

Fix popovers cutting off in notifications #809

Closes #809

See merge request pleroma/pleroma-fe!1147
Diffstat:
M
CHANGELOG.md
1
+
M
src/components/account_actions/account_actions.vue
1
+
M
src/components/extra_buttons/extra_buttons.vue
1
+
M
src/components/popover/popover.js
11
+++++++++--

4 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Clicking on non-latin hashtags won't open a new window
 - Uploading and drag-dropping multiple files works correctly now.
 - Subject field now appears disabled when posting
+- Fix status ellipsis menu being cut off in notifications column
 
 ## [2.0.3] - 2020-05-02
 ### Fixed
diff --git 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
@@ -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
@@ -1,4 +1,3 @@
-
 const Popover = {
   name: 'Popover',
   props: {
@@ -10,6 +9,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 +29,10 @@ const Popover = {
     }
   },
   methods: {
+    containerBoundingClientRect () {
+      const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
+      return container.getBoundingClientRect()
+    },
     updateStyles () {
       if (this.hidden) {
         this.styles = {
@@ -45,7 +51,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