From 9f512620397748b8d588f950808a53bec60768a9 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 2 Mar 2021 11:14:56 +0100
Subject: [PATCH] Add a container property to popup components

Added container property for Modal, AppSettingsDialog, EmojiPicker and
the menu of the Avatar component.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../AppSettingsDialog/AppSettingsDialog.vue    | 11 +++++++++++
 src/components/Avatar/Avatar.vue               |  9 +++++++++
 src/components/EmojiPicker/EmojiPicker.vue     |  9 +++++++++
 src/components/Modal/Modal.vue                 | 18 ++++++++++++++++--
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/AppSettingsDialog/AppSettingsDialog.vue b/src/components/AppSettingsDialog/AppSettingsDialog.vue
index 22ed4976a1..84e633f9c5 100644
--- a/src/components/AppSettingsDialog/AppSettingsDialog.vue
+++ b/src/components/AppSettingsDialog/AppSettingsDialog.vue
@@ -81,6 +81,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Selector for the popover container
+		 */
+		container: {
+			type: String,
+			default: 'body',
+		},
 	},
 
 	data() {
@@ -244,6 +252,9 @@ export default {
 		// Return value of the render function
 		if (this.open) {
 			return createElement('Modal', {
+				attrs: {
+					container: this.container,
+				},
 				on: {
 					close: () => { this.handleCloseModal() },
 				},
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index 90478a8461..bff4f3db1f 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -54,6 +54,7 @@
 		<Popover
 			v-if="hasMenu"
 			placement="auto"
+			:container="menuContainer"
 			:open="contactsMenuOpenState">
 			<PopoverMenu :menu="menu" />
 			<template slot="trigger">
@@ -274,6 +275,14 @@ export default {
 			type: String,
 			default: 'center',
 		},
+
+		/**
+		 * Selector for the popover menu container
+		 */
+		menuContainer: {
+			type: String,
+			default: 'body',
+		},
 	},
 	data() {
 		return {
diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue
index 2d7048071e..9466312cae 100644
--- a/src/components/EmojiPicker/EmojiPicker.vue
+++ b/src/components/EmojiPicker/EmojiPicker.vue
@@ -89,6 +89,7 @@
 <template>
 	<Popover
 		:open.sync="open"
+		:container="container"
 		popover-class="emoji-popover"
 		popover-inner-class="popover-emoji-picker-inner">
 		<template #trigger>
@@ -159,6 +160,14 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * Selector for the popover container
+		 */
+		container: {
+			type: String,
+			default: 'body',
+		},
 	},
 	data() {
 		return {
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index dd737220fe..1e84a6d2b9 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -281,6 +281,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Selector for the modal container
+		 */
+		container: {
+			type: String,
+			default: 'body',
+		},
 	},
 
 	data() {
@@ -338,8 +346,14 @@ export default {
 			this.handleSwipe(e)
 		})
 
-		// force mount the component to body
-		document.body.insertBefore(this.$el, document.body.lastChild)
+		if (this.container === 'body') {
+			// force mount the component to body
+			document.body.insertBefore(this.$el, document.body.lastChild)
+		} else {
+			const container = document.querySelector(this.container)
+			container.appendChild(this.$el)
+		}
+
 	},
 	destroyed() {
 		this.$el.remove()