Merge pull request #12997 from nextcloud/fix/12970/migrate-ncdialog-2

fix(a11y): migrate NcModal to NcDialog p2

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -72,7 +72,7 @@
 					@create-rooms="handleCreateRooms" />
 			</template>
 		</div>
-	</ncmodal>
+	</NcModal>
 </template>
 
 <script>

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -51,18 +51,18 @@
 							<Message :size="20" />
 						</template>
 					</NcButton>
-					<NcModal v-if="logModal"
+					<NcDialog :open.sync="logModal"
+						:name="t('spreed', 'Log content')"
+						size="normal"
 						container=".matterbridge-settings"
-						@close="closeLogModal">
-						<div class="modal__content">
-							<NcTextArea :value="processLog"
-								class="log-content"
-								:label="t('spreed', 'Log content')"
-								rows="29"
-								readonly
-								resize="vertical" />
-						</div>
-					</NcModal>
+						close-on-click-outside>
+						<NcTextArea :value="processLog"
+							class="log-content"
+							:label="t('spreed', 'Log content')"
+							:rows="29"
+							readonly
+							resize="vertical" />
+					</NcDialog>
 				</div>
 			</div>
 			<ul>
@@ -82,8 +82,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-
 import Message from 'vue-material-design-icons/Message.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
@@ -93,7 +91,7 @@ import { imagePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
@@ -109,13 +107,14 @@ import {
 export default {
 	name: 'MatterbridgeSettings',
 	components: {
+		BridgePart,
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcDialog,
 		NcSelect,
-		BridgePart,
-		Message,
-		NcModal,
 		NcTextArea,
+		// Icons
+		Message,
 		Plus,
 	},
 
@@ -620,9 +619,6 @@ export default {
 			this.getBridgeProcessState(this.token)
 			this.logModal = true
 		},
-		closeLogModal() {
-			this.logModal = false
-		},
 	},
 }
 </script>
@@ -727,11 +723,7 @@ export default {
 	}
 }
 
-.log-content {
-	width: 590px;
-}
-
-:deep(.modal-container__content) {
-	padding: 5px;
+.log-content :deep(.textarea__input) {
+	height: unset;
 }
 </style>

src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue

@@ -4,15 +4,14 @@
 -->
 
 <template>
-	<NcModal v-if="modal"
+	<NcDialog :open="modal"
+		:name="t('spreed', 'Call a phone number')"
 		class="call-phone"
 		:container="container"
-		@close="closeModal">
+		size="normal"
+		close-on-click-outside
+		@update:open="closeModal">
 		<template v-if="!loading">
-			<h2 class="call-phone__header">
-				{{ t('spreed', 'Call a phone number') }}
-			</h2>
-
 			<div class="call-phone__form">
 				<NcTextField ref="textField"
 					class="call-phone__form-input"
@@ -40,16 +39,16 @@
 				<p>{{ t('spreed', 'Creating the conversation …') }}</p>
 			</template>
 		</NcEmptyContent>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import LoadingComponent from '../../LoadingComponent.vue'
@@ -67,8 +66,8 @@ export default {
 	components: {
 		DialpadPanel,
 		LoadingComponent,
+		NcDialog,
 		NcEmptyContent,
-		NcModal,
 		NcTextField,
 		SelectPhoneNumber,
 	},
@@ -191,30 +190,26 @@ export default {
 
 <style lang="scss" scoped>
 .call-phone {
-	&:deep(.modal-wrapper) {
+	:deep(.modal-wrapper) {
 		.modal-container {
 			height: 60%;
 		}
 
-		.modal-container__content {
-			padding: calc(var(--default-grid-baseline) * 5);
+		.dialog__content {
+			padding-bottom: calc(var(--default-grid-baseline) * 3);
 		}
 	}
 
 	&__form {
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
 		gap: var(--default-grid-baseline);
-
-		&-input {
-			margin: 0;
-		}
 	}
 
-  &__loading {
-    margin: 0 !important;
-	padding: 0 !important;
-    height: 100%;
-  }
+	&__loading {
+		margin: 0 !important;
+		padding: 0 !important;
+		height: 100%;
+	}
 }
 </style>

src/components/LeftSidebar/LeftSidebar.vue

@@ -109,7 +109,7 @@
 				<NewConversationDialog ref="newConversationDialog" :can-moderate-sip-dial-out="canModerateSipDialOut" />
 
 				<!-- New phone (SIP dial-out) dialog -->
-				<CallPhoneDialog ref="callPhoneDialog" />
+				<CallPhoneDialog v-if="canModerateSipDialOut" ref="callPhoneDialog" />
 
 				<!-- New Pending Invitations dialog -->
 				<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageForwarder.vue

@@ -18,29 +18,31 @@
 		<!-- Second step of the flow: confirmation modal that gives the user
 		the possibility to directly route to the conversation to which the
 		message has been forwarded -->
-		<NcModal v-else
+		<NcDialog v-else
+			:name="dialogTitle"
 			:container="container"
-			@close="handleClose">
+			close-on-click-outside
+			@update:open="handleClose">
 			<NcEmptyContent :description="t('spreed', 'The message has been forwarded to {selectedConversationName}', { selectedConversationName })">
 				<template #icon>
 					<Check :size="64" />
 				</template>
-				<template #action>
-					<NcButton type="tertiary" @click="handleClose">
-						{{ t('spreed', 'Dismiss') }}
-					</NcButton>
-					<NcButton type="primary" @click="openConversation">
-						{{ t('spreed', 'Go to conversation') }}
-					</NcButton>
-				</template>
 			</NcEmptyContent>
-		</NcModal>
+			<template #actions>
+				<NcButton type="tertiary" @click="handleClose">
+					{{ t('spreed', 'Dismiss') }}
+				</NcButton>
+				<NcButton type="primary" @click="openConversation">
+					{{ t('spreed', 'Go to conversation') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
 <script>
 
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 import Check from 'vue-material-design-icons/Check.vue'
 
@@ -49,20 +51,20 @@ import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 
 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 NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import RoomSelector from '../../../../RoomSelector.vue'
 
 export default {
 	name: 'MessageForwarder',
 
 	components: {
-		RoomSelector,
-		NcEmptyContent,
-		NcModal,
-		NcButton,
 		Check,
+		NcButton,
+		NcDialog,
+		NcEmptyContent,
+		RoomSelector,
 	},
 
 	props: {
@@ -79,17 +81,17 @@ export default {
 	emits: ['close'],
 
 	setup() {
-		return {
-			isTalkMainApp: inject('Talk:isMainApp', false)
-		}
-	},
+		const selectedConversationToken = ref(null)
+		const selectedConversationName = ref(null)
+		const showForwardedConfirmation = ref(false)
+		const forwardedMessageID = ref('')
 
-	data() {
 		return {
-			selectedConversationToken: null,
-			selectedConversationName: null,
-			showForwardedConfirmation: false,
-			forwardedMessageID: '',
+			isTalkMainApp: inject('Talk:isMainApp', false),
+			selectedConversationToken,
+			selectedConversationName,
+			showForwardedConfirmation,
+			forwardedMessageID,
 		}
 	},
 
@@ -156,11 +158,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-:deep(.empty-content) {
-	padding: 20px;
-}
-:deep(.empty-content__action) {
-	gap: 10px;
-}
 </style>