Merge pull request #11556 from nextcloud/fix/11543/fix-nested-modals

fix(modal): mount nested modals inside global modals
nextcloud · Feb 12, 2024 · 9dc0ff0 · 9dc0ff0
2 parents eeb71fd + b939b26
commit 9dc0ff0
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 9 deletions.
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -70,7 +70,7 @@
 			</NcButton>
 			<NcActions v-if="hasSelected"
 				type="primary"
-				:container="container"
+				container=".participants-editor__buttons"
 				:menu-name="t('spreed', 'Assign')">
 				<NcActionButton v-for="(item, index) in assignments"
 					:key="index"
@@ -91,7 +91,7 @@
 		<NcDialog :open.sync="showDialog"
 			:name="t('spreed','Delete breakout rooms')"
 			:message="dialogMessage"
-			:container="container">
+			container=".participants-editor">
 			<template #actions>
 				<NcButton type="tertiary" @click="toggleShowDialog">
 					{{ t('spreed', 'Cancel') }}
@@ -385,4 +385,9 @@ export default {
 .delete {
 	margin-right: auto;
 }
+
+// TODO remove after https://github.com/nextcloud-libraries/nextcloud-vue/issues/5228
+:deep(.modal-wrapper--small .modal-container) {
+	width: 400px !important;
+}
 </style>
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -88,6 +88,7 @@
 			:conversation-name="conversationName"
 			:permissions="conversationPermissions"
 			:loading="loading"
+			nested-container=".conversation-permissions-editor"
 			@close="handleClosePermissionsEditor"
 			@submit="handleSubmitPermissions" />
 	</div>

diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue
@@ -51,7 +51,7 @@
 					:open.sync="isDeleteConversationDialogOpen"
 					:name="t('spreed','Delete Conversation')"
 					:message="deleteConversationDialogMessage"
-					:container="container">
+					container=".danger-zone">
 					<template #actions>
 						<NcButton type="tertiary" @click="toggleShowDeleteConversationDialog">
 							{{ t('spreed', 'No') }}
@@ -77,7 +77,7 @@
 					:open.sync="isDeleteChatDialogOpen"
 					:name="t('spreed','Delete all chat messages')"
 					:message="deleteChatDialogMessage"
-					:container="container">
+					container=".danger-zone">
 					<template #actions>
 						<NcButton type="tertiary" @click="toggleShowDeleteChatDialog">
 							{{ t('spreed', 'No') }}
@@ -235,6 +235,11 @@ h4 {
 		color: var(--color-text-maxcontrast);
 	}
 	&__dialog {
+		// TODO remove after https://github.com/nextcloud-libraries/nextcloud-vue/issues/5228
+		:deep(.modal-wrapper--small .modal-container) {
+			width: 400px !important;
+		}
+
 		:deep(.modal-container) {
 			padding-block: 4px 8px;
 			padding-inline: 12px 8px;

diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -68,7 +68,7 @@
 						</template>
 					</NcButton>
 					<NcModal v-if="logModal"
-						:container="container"
+						container=".matterbridge-settings"
 						@close="closeLogModal">
 						<div class="modal__content">
 							<NcTextArea :value="processLog"
@@ -88,7 +88,7 @@
 						:type="types[part.type]"
 						:editing="part.editing"
 						:editable="!enabled"
-						:container="container"
+						container=".matterbridge-settings"
 						@edit-clicked="onEditClicked(i)"
 						@delete-part="onDelete(i)" />
 				</li>

diff --git a/...omponents/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/...omponents/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -21,7 +21,10 @@
 -->
 
 <template>
-	<NcModal ref="translate-modal" size="large" @close="$emit('close')">
+	<NcModal ref="translate-modal"
+		size="large"
+		:container="container"
+		@close="$emit('close')">
 		<div v-if="isMounted" class="translate-dialog">
 			<h2> {{ t('spreed', 'Translate message') }} </h2>
 			<div class="translate-dialog__wrapper">
@@ -128,6 +131,10 @@ export default {
 	},
 
 	computed: {
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		userLanguage() {
 			return navigator.language.substring(0, 2)
 		},

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -93,6 +93,7 @@
 						<div v-if="getFilteredDetails(index).length > 0 || selfHasVotedOption(index)"
 							class="results__option__details">
 							<PollVotersDetails v-if="details"
+								:container="container"
 								:details="getFilteredDetails(index)" />
 							<p v-if="selfHasVotedOption(index)" class="results__option-subtitle">
 								{{ t('spreed', 'You voted for this option') }}

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<NcPopover class="poll-voters-details" trigger="hover">
+	<NcPopover class="poll-voters-details" trigger="hover" :container="container">
 		<template #trigger>
 			<NcButton type="tertiary-no-background"
 				:aria-label="t('spreed','Voted participants')"
@@ -78,6 +78,11 @@ export default {
 			type: Array,
 			required: true,
 		},
+
+		container: {
+			type: String,
+			required: true,
+		}
 	},
 
 	setup() {

diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -110,6 +110,11 @@ export default {
 			default: '',
 		},
 
+		nestedContainer: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * The conversation's name. Don't provide this when modifying
 		 * participants' permissions.
@@ -148,7 +153,7 @@ export default {
 
 	computed: {
 		container() {
-			return this.$store.getters.getMainContainerSelector()
+			return this.nestedContainer ?? this.$store.getters.getMainContainerSelector()
 		},
 
 		modalTitle() {
@@ -262,4 +267,8 @@ export default {
 	margin: 0 auto;
 }
 
+// TODO remove after https://github.com/nextcloud-libraries/nextcloud-vue/issues/5228
+:deep(.modal-wrapper--small .modal-container) {
+	width: 400px !important;
+}
 </style>