Merge pull request #12989 from nextcloud/backport/12970/stable30

[stable30] fix: migrate NcModal to NcDialog

Author: Antreesy

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -4,40 +4,40 @@
 -->
 
 <template>
-	<NcModal ref="modal"
+	<NcDialog ref="modal"
+		:name="dialogTitle"
 		:container="container"
-		v-on="$listeners">
-		<div class="send-message-dialog">
-			<h2 class="send-message-dialog__title">
-				{{ dialogTitle }}
-			</h2>
-			<NewMessage v-if="modalContainerId"
-				:key="modalContainerId"
-				ref="newMessage"
-				role="region"
-				:token="token"
-				:container="modalContainerId"
-				:aria-label="t('spreed', 'Post message')"
-				:broadcast="broadcast"
-				@sent="handleMessageSent"
-				@failure="handleMessageFailure" />
-		</div>
-	</NcModal>
+		close-on-click-outside
+		size="normal"
+		v-on="$listeners"
+		@update:open="$emit('close')">
+		<NewMessage v-if="modalContainerId"
+			:key="modalContainerId"
+			ref="newMessage"
+			role="region"
+			class="send-message-dialog"
+			:token="token"
+			:container="modalContainerId"
+			:aria-label="t('spreed', 'Post message')"
+			:broadcast="broadcast"
+			@sent="handleMessageSent"
+			@failure="handleMessageFailure" />
+	</NcDialog>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import NewMessage from '../NewMessage/NewMessage.vue'
 
 export default {
 	name: 'SendMessageDialog',
 
 	components: {
-		NcModal,
+		NcDialog,
 		NewMessage,
 	},
 
@@ -91,7 +91,7 @@ export default {
 
 	mounted() {
 		// Postpone render of NewMessage until modal container is mounted
-		this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
+		this.modalContainerId = `#modal-description-${this.$refs.modal.navigationId}`
 		this.$nextTick(() => {
 			this.$refs.newMessage.focusInput()
 		})
@@ -117,10 +117,6 @@ export default {
 
 <style lang="scss" scoped>
 .send-message-dialog {
-	padding: 20px 20px 8px;
-
-	&__title {
-		margin-bottom: 8px;
-	}
+	padding-bottom: calc(3 * var(--default-grid-baseline));
 }
 </style>

src/components/ConversationSettings/BanSettings/BanSettings.vue

@@ -15,14 +15,12 @@
 			{{ t('spreed', 'Manage bans') }}
 		</NcButton>
 
-		<NcModal v-if="modal"
-			container=".conversation-ban__settings"
-			@close="modal = false">
+		<NcDialog :name="t('spreed', 'Banned users')"
+			:open.sync="modal"
+			size="normal"
+			close-on-click-outside
+			container=".conversation-ban__settings">
 			<div class="conversation-ban__content">
-				<h2 class="conversation-ban__title">
-					{{ t('spreed', 'Banned users') }}
-				</h2>
-
 				<ul v-if="banList.length" class="conversation-ban__list">
 					<BannedItem v-for="ban in banList"
 						:key="ban.id"
@@ -41,7 +39,7 @@
 					</template>
 				</NcEmptyContent>
 			</div>
-		</NcModal>
+		</NcDialog>
 	</div>
 </template>
 
@@ -51,9 +49,9 @@ import AccountCancel from 'vue-material-design-icons/AccountCancel.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import BannedItem from './BannedItem.vue'
 
@@ -64,9 +62,9 @@ export default {
 
 	components: {
 		NcButton,
+		NcDialog,
 		NcEmptyContent,
 		NcLoadingIcon,
-		NcModal,
 		BannedItem,
 		// Icons
 		AccountCancel,
@@ -116,11 +114,7 @@ export default {
 <style lang="scss" scoped>
 .conversation-ban {
 	&__content {
-		min-height: 250px;
-	}
-
-	&__title {
-		text-align: center;
+		min-height: 200px;
 	}
 
 	&__list {

src/components/LeftSidebar/InvitationHandler.vue

@@ -4,13 +4,12 @@
 -->
 
 <template>
-	<NcModal v-if="modal"
+	<NcDialog :open.sync="modal"
+		:name="t('spreed', 'Pending invitations')"
 		:container="container"
-		@close="closeModal">
+		size="normal"
+		close-on-click-outside>
 		<div class="inbox">
-			<h2 class="inbox__heading">
-				{{ t('spreed', 'Pending invitations') }}
-			</h2>
 			<p class="inbox__disclaimer">
 				{{ t('spreed', 'Join conversations from remote Nextcloud servers') }}
 			</p>
@@ -62,20 +61,22 @@
 				</template>
 			</NcEmptyContent>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import WebIcon from 'vue-material-design-icons/Web.vue'
 
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
@@ -88,28 +89,26 @@ export default {
 	name: 'InvitationHandler',
 
 	components: {
-		NcEmptyContent,
-		NcRichText,
 		ConversationIcon,
 		NcButton,
+		NcDialog,
+		NcEmptyContent,
 		NcLoadingIcon,
-		NcModal,
+		NcRichText,
 		// Icons
 		CancelIcon,
 		CheckIcon,
 		WebIcon,
 	},
 
 	setup() {
-		return {
-			federationStore: useFederationStore(),
-		}
-	},
+		const modal = ref(false)
+		const isLoading = ref(true)
 
-	data() {
 		return {
-			modal: false,
-			isLoading: true,
+			federationStore: useFederationStore(),
+			modal,
+			isLoading,
 		}
 	},
 
@@ -188,11 +187,7 @@ export default {
 	width: 100%;
 	height: 100%;
 	max-height: 700px;
-	padding: 20px;
-
-	&__heading {
-		margin-bottom: 4px;
-	}
+	padding-bottom: calc(3 * var(--default-grid-baseline));
 
 	&__disclaimer {
 		margin-bottom: 12px;

src/components/LeftSidebar/LeftSidebar.vue

@@ -112,7 +112,7 @@
 				<CallPhoneDialog ref="callPhoneDialog" />
 
 				<!-- New Pending Invitations dialog -->
-				<InvitationHandler v-if="isFederationEnabled" ref="invitationHandler" />
+				<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />
 			</div>
 			<NcAppNavigationItem v-if="pendingInvitationsCount"
 				class="invitation-button"

src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue

@@ -4,13 +4,11 @@
 -->
 
 <template>
-	<NcModal size="small"
+	<NcDialog :name="t('spreed', 'Reactions')"
 		:container="container"
-		@close="closeModal">
+		close-on-click-outside
+		@update:open="closeModal">
 		<div class="reactions__modal">
-			<h2>
-				{{ t('spreed', 'Reactions') }}
-			</h2>
 			<template v-if="Object.keys(reactionsOverview).length > 0">
 				<div class="reactions-list__navigation">
 					<NcButton v-for="reaction in reactionsMenu"
@@ -44,7 +42,7 @@
 			</template>
 			<NcLoadingIcon v-else :size="64" />
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
@@ -53,8 +51,8 @@ import HeartOutlineIcon from 'vue-material-design-icons/HeartOutline.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
@@ -67,9 +65,9 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		NcModal,
-		NcLoadingIcon,
 		NcButton,
+		NcDialog,
+		NcLoadingIcon,
 		HeartOutlineIcon,
 	},
 
@@ -172,17 +170,19 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.reactions__modal{
+.reactions__modal {
 	min-height: 450px;
-	padding: 18px;
+	padding-bottom: calc(3 * var(--default-grid-baseline));
 }
+
 .reactions-list__navigation {
 	display: flex;
 	gap: 2px;
 	flex-wrap: wrap;
 
 	:deep(.button-vue) {
 		border-radius: var(--border-radius-large);
+
 		&.active {
 			background-color: var(--color-primary-element-light);
 		}