Replace OC dialog with NcDialog

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -48,7 +48,7 @@
 				:title="deleteButtonLabel"
 				:aria-label="deleteButtonLabel"
 				type="error"
-				@click="deleteBreakoutRooms">
+				@click="toggleShowDialog">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
@@ -88,6 +88,19 @@
 				{{ confirmButtonLabel }}
 			</NcButton>
 		</div>
+		<NcDialog :open.sync="showDialog"
+			:name="t('spreed','Delete breakout rooms')"
+			:message="dialogMessage"
+			:container="container">
+			<template #actions>
+				<NcButton type="tertiary" @click="toggleShowDialog">
+					{{ t('spreed', 'Cancel') }}
+				</NcButton>
+				<NcButton type="error" @click="deleteBreakoutRooms">
+					{{ t('spreed', 'Delete breakout rooms') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
@@ -100,6 +113,7 @@ import Reload from 'vue-material-design-icons/Reload.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import BreakoutRoomItem from '../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue'
 import SelectableParticipant from './SelectableParticipant.vue'
@@ -119,6 +133,7 @@ export default {
 		NcButton,
 		ArrowLeft,
 		Delete,
+		NcDialog,
 	},
 
 	props: {
@@ -144,6 +159,7 @@ export default {
 		return {
 			selectedParticipants: [],
 			assignments: [],
+			showDialog: false,
 		}
 	},
 
@@ -217,6 +233,10 @@ export default {
 		deleteButtonLabel() {
 			return t('spreed', 'Delete breakout rooms')
 		},
+
+		dialogMessage() {
+			return t('spreed', 'Current breakout rooms and settings will be lost')
+		},
 	},
 
 	created() {
@@ -313,25 +333,14 @@ export default {
 			this.$emit('close')
 		},
 
+		toggleShowDialog() {
+			this.showDialog = !this.showDialog
+		},
+
 		deleteBreakoutRooms() {
-			OC.dialogs.confirmDestructive(
-				t('spreed', 'Current breakout rooms and settings will be lost'),
-				t('spreed', 'Delete breakout rooms'),
-				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('spreed', 'Delete breakout rooms'),
-					confirmClasses: 'error',
-					cancel: t('spreed', 'Cancel'),
-				},
-				(decision) => {
-					if (!decision) {
-						return
-					}
-					this.$store.dispatch('deleteBreakoutRoomsAction', {
-						token: this.token,
-					})
-				}
-			)
+			this.$store.dispatch('deleteBreakoutRoomsAction', {
+				token: this.token,
+			})
 		},
 	},
 }
@@ -368,6 +377,11 @@ export default {
 	left: 0;
 }
 
+:deep(.dialog) {
+	padding-block: 0px 8px;
+	padding-inline: 12px 8px;
+}
+
 .delete {
 	margin-right: auto;
 }

src/components/ConversationSettings/ConversationSettingsDialog.vue

@@ -20,7 +20,8 @@
 -->
 
 <template>
-	<NcAppSettingsDialog :aria-label="t('spreed', 'Conversation settings')"
+	<NcAppSettingsDialog id="conversation-settings-container"
+		:aria-label="t('spreed', 'Conversation settings')"
 		:name="t('spreed', 'Conversation settings')"
 		:open.sync="showSettings"
 		:show-navigation="true"

src/components/ConversationSettings/DangerZone.vue

@@ -44,9 +44,23 @@
 					{{ t('spreed', 'Permanently delete this conversation.') }}
 				</p>
 				<NcButton type="error"
-					@click="deleteConversation">
+					@click="toggleShowDeleteConversationDialog">
 					{{ t('spreed', 'Delete conversation') }}
 				</NcButton>
+				<NcDialog class="danger-zone__dialog"
+					:open.sync="isDeleteConversationDialogOpen"
+					:name="t('spreed','Delete Conversation')"
+					:message="deleteConversationDialogMessage"
+					:container="container">
+					<template #actions>
+						<NcButton type="tertiary" @click="toggleShowDeleteConversationDialog">
+							{{ t('spreed', 'No') }}
+						</NcButton>
+						<NcButton type="error" @click="deleteConversation">
+							{{ t('spreed', 'Yes') }}
+						</NcButton>
+					</template>
+				</NcDialog>
 			</div>
 			<div v-if="canDeleteConversation" class="app-settings-subsection">
 				<h4 class="app-settings-section__subtitle">
@@ -56,9 +70,23 @@
 					{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
 				</p>
 				<NcButton type="error"
-					@click="clearChatHistory">
+					@click="toggleShowDeleteChatDialog">
 					{{ t('spreed', 'Delete chat messages') }}
 				</NcButton>
+				<NcDialog class="danger-zone__dialog"
+					:open.sync="isDeleteChatDialogOpen"
+					:name="t('spreed','Delete all chat messages')"
+					:message="deleteChatDialogMessage"
+					:container="container">
+					<template #actions>
+						<NcButton type="tertiary" @click="toggleShowDeleteChatDialog">
+							{{ t('spreed', 'No') }}
+						</NcButton>
+						<NcButton type="error" @click="clearChatHistory">
+							{{ t('spreed', 'Yes') }}
+						</NcButton>
+					</template>
+				</NcDialog>
 			</div>
 			<div />
 		</div>
@@ -70,14 +98,17 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 
 export default {
 	name: 'DangerZone',
 	components: {
 		NcButton,
 		NcNoteCard,
+		NcDialog,
 	},
+
 	props: {
 		conversation: {
 			type: Object,
@@ -95,10 +126,35 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			isDeleteConversationDialogOpen: false,
+			isDeleteChatDialogOpen: false,
+		}
+	},
+
 	computed: {
+		container() {
+			return '#conversation-settings-container'
+		},
+
 		token() {
 			return this.conversation.token
 		},
+
+		deleteConversationDialogMessage() {
+			return t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		},
+
+		deleteChatDialogMessage() {
+			return t('spreed', 'Do you really want to delete all messages in "{displayName}"?', this.conversation, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		}
 	},
 
 	methods: {
@@ -126,59 +182,44 @@ export default {
 		 * Deletes the conversation.
 		 */
 		async deleteConversation() {
-			OC.dialogs.confirm(
-				t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
-					escape: false,
-					sanitize: false,
-				}),
-				t('spreed', 'Delete conversation'),
-				async function(decision) {
-					if (!decision) {
-						return
-					}
-
-					if (this.token === this.$store.getters.getToken()) {
-						this.$router.push({ name: 'root' })
-						this.$store.dispatch('updateToken', '')
-					}
-
-					try {
-						await this.$store.dispatch('deleteConversationFromServer', { token: this.token })
-						// Close the settings
-						this.hideConversationSettings()
-					} catch (error) {
-						console.debug(`error while deleting conversation ${error}`)
-						showError(t('spreed', 'Error while deleting conversation'))
-					}
-				}.bind(this)
-			)
+			this.isDeleteConversationDialogOpen = false
+
+			if (this.token === this.$store.getters.getToken()) {
+				this.$router.push({ name: 'root' })
+				this.$store.dispatch('updateToken', '')
+			}
+
+			try {
+				await this.$store.dispatch('deleteConversationFromServer', { token: this.token })
+				// Close the settings
+				this.hideConversationSettings()
+			} catch (error) {
+				console.debug(`error while deleting conversation ${error}`)
+				showError(t('spreed', 'Error while deleting conversation'))
+			}
 		},
 
 		/**
 		 * Clears the chat history
 		 */
 		async clearChatHistory() {
-			OC.dialogs.confirm(
-				t('spreed', 'Do you really want to delete all messages in "{displayName}"?', this.conversation, undefined, {
-					escape: false,
-					sanitize: false,
-				}),
-				t('spreed', 'Delete all chat messages'),
-				async function(decision) {
-					if (!decision) {
-						return
-					}
-
-					try {
-						await this.$store.dispatch('clearConversationHistory', { token: this.token })
-						// Close the settings
-						this.hideConversationSettings()
-					} catch (error) {
-						console.debug(`error while clearing chat history ${error}`)
-						showError(t('spreed', 'Error while clearing chat history'))
-					}
-				}.bind(this)
-			)
+			try {
+				await this.$store.dispatch('clearConversationHistory', { token: this.token })
+				this.isDeleteChatDialogOpen = false
+				// Close the settings
+				this.hideConversationSettings()
+			} catch (error) {
+				console.debug(`error while clearing chat history ${error}`)
+				showError(t('spreed', 'Error while clearing chat history'))
+			}
+		},
+
+		toggleShowDeleteConversationDialog() {
+			this.isDeleteConversationDialogOpen = !this.isDeleteConversationDialogOpen
+		},
+
+		toggleShowDeleteChatDialog() {
+			this.isDeleteChatDialogOpen = !this.isDeleteChatDialogOpen
 		},
 	},
 }
@@ -193,6 +234,12 @@ h4 {
 	&__hint {
 		color: var(--color-text-maxcontrast);
 	}
+	&__dialog {
+		:deep(.modal-container) {
+			padding-block: 4px 8px;
+			padding-inline: 12px 8px;
+		}
+	}
 }
 
 </style>