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>

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() },
 				},

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 {

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 {

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()