Fix container of modal and popup components when Talk is embedded

The container of modal and popup components was always set to
"#content-vue" to ensure that they will be properly shown in normal and
fullscreen mode in the main Talk UI. However, when Talk is embedded in
the Files app, the share page or the video verification there is no such
element, so the container for the components could not be set and thus
they were not shown.

To solve this now the selector for the main container element is got
from the store instead of being hardcoded, and the different UI modes
set the appropriate value when initialized (or leave it undefined to use
the default one, typically the body element, when a specific element is
not needed).

Note that this change applies too to some components that, right now,
are only shown in the main Talk UI, but it was done for consistency and
to make them "future-proof".

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 10 insertions, 2 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 09820d64c..89f049be0 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -132,7 +132,7 @@ the main body of the message as well as a quote.
 						</Actions>
 						<Actions
 							:force-menu="true"
-							container="#content-vue">
+							:container="container">
 							<ActionButton
 								v-if="isPrivateReplyable"
 								icon="icon-user"
@@ -573,6 +573,10 @@ export default {
 			return !this.isSystemMessage && !this.isTemporary
 		},
 
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		isTemporaryUpload() {
 			return this.isTemporary && this.messageParameters.file
 		},
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Forwarder.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Forwarder.vue
index e62a1539c..52c7c46fe 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Forwarder.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Forwarder.vue
@@ -25,7 +25,7 @@
 		message to -->
 		<RoomSelector
 			v-if="!showForwardedConfirmation"
-			container="#content-vue"
+			:container="container"
 			:show-postable-only="true"
 			:dialog-title="dialogTitle"
 			:dialog-subtitle="dialogSubtitle"
@@ -89,6 +89,10 @@ export default {
 	},
 
 	computed: {
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		dialogTitle() {
 			return t('spreed', 'Forward message')
 		},