change nc modal to dialog

Signed-off-by: Felix Beichler <[email protected]>
nextcloud · May 16, 2024 · a916650 · a916650
1 parent e71359c
commit a916650
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -60,7 +60,7 @@
 						</template>
 						{{ t('forms', 'Copy to clipboard') }}
 					</NcActionLink>
-					<NcActionButton @click="openQrModal(getPublicShareLink(share))">
+					<NcActionButton @click="openQrDialog(getPublicShareLink(share))">
 						<template #icon>
 							<IconQr :size="20" />
 						</template>
@@ -97,14 +97,14 @@
 			</div>
 		</TransitionGroup>
 
-		<NcModal v-if="qrModal.on" size="small" @close="qrModal.on=false">
-			<div class="modal__content">
+		<NcDialog :open.sync="qrDialog.on" closeOnClickOutside="true" @close="qrDialog.on=false">
+			<div class="qrDialog__content">
 				<h2>{{ form.title }}</h2>
 				<div>
-					<img :src="qrModal.uri" :title="qrModal.text" :alt=" t('forms', 'QR code representation of {title}', {title: form.title})">
+					<img :src="qrDialog.uri" :title="qrDialog.text" :alt=" t('forms', 'QR code representation of {title}', {title: form.title})">
 				</div>
 			</div>
-		</NcModal>
+		</NcDialog>
 
 		<!-- Legacy Info, if present -->
 		<div v-if="form.access.legacyLink" class="share-div">
@@ -197,15 +197,15 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.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 IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconQr from 'vue-material-design-icons/Qrcode.vue'
 import IconCodeBrackets from 'vue-material-design-icons/CodeBrackets.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconLinkBoxVariantOutline from 'vue-material-design-icons/LinkBoxVariantOutline.vue'
 import IconLinkVariant from 'vue-material-design-icons/LinkVariant.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconQr from 'vue-material-design-icons/Qrcode.vue'
 import QRCode from 'qrcode'
 
 import FormsIcon from '../Icons/FormsIcon.vue'
@@ -224,17 +224,17 @@ export default {
 		IconAccountMultiple,
 		IconAlertCircleOutline,
 		IconCodeBrackets,
+		IconQr,
 		IconCopyAll,
 		IconDelete,
 		IconLinkBoxVariantOutline,
 		IconLinkVariant,
 		IconPlus,
-		IconQr,
 		NcActions,
 		NcActionButton,
 		NcActionLink,
 		NcCheckboxRadioSwitch,
-		NcModal,
+		NcDialog,
 		SharingSearchDiv,
 		SharingShareDiv,
 	},
@@ -252,7 +252,7 @@ export default {
 		return {
 			isLoading: false,
 			appConfig: loadState(appName, 'appConfig'),
-			qrModal: {
+			qrDialog: {
 				on: false,
 				text: '',
 				uri: '',
@@ -416,11 +416,11 @@ export default {
 			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		async openQrModal(qrText) {
-			this.qrModal.text = qrText
+		async openQrDialog(qrText) {
+			this.qrDialog.text = qrText
 			try {
-				this.qrModal.uri = await QRCode.toDataURL(this.qrModal.text)
-				this.qrModal.on = true
+				this.qrDialog.uri = await QRCode.toDataURL(this.qrDialog.text)
+				this.qrDialog.on = true
 			} catch (err) {
 				console.error(err)
 			}
@@ -490,8 +490,8 @@ export default {
 	}
 }
 
-.modal__content {
-	margin: 50px;
+.qrDialog__content {
+	margin-bottom: 50px;
 	text-align: center;
 }
 </style>