Move dialog into component

Signed-off-by: Felix Beichler <felix@beichlers.de>
nextcloud · Jun 16, 2024 · ddcb904 · ddcb904
1 parent e33f332
commit ddcb904
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 23 deletions.
diff --git a/src/components/QRDialog.vue b/src/components/QRDialog.vue
@@ -1,21 +1,30 @@
 <template>
-	<div class="qrDialog__content">
-		<h2>{{ title }}</h2>
-		<div>
+	<NcDialog close-on-click-outside
+		:name="title"
+		:open="isOpen"
+		@close="isOpen = false"
+		@update:open="$emit('closed', true)">
+		<div class="qr-dialog__content">
 			<img :src="uri"
 				:title="text"
 				:alt="t('forms', 'QR code representation of {text}', { text: text })">
 		</div>
-	</div>
+	</NcDialog>
 </template>
 
 <script>
 
 import QRCode from 'qrcode'
 
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+
 export default {
 	name: 'QRDialog',
 
+	components: {
+		NcDialog,
+	},
+
 	props: {
 		title: {
 			type: String,
@@ -27,25 +36,41 @@ export default {
 		},
 	},
 
+	emits: ['closed'],
+
 	data() {
 		return {
 			uri: {
 				type: String,
 				default: '',
 			},
+			isOpen: {
+				type: Boolean,
+				default: false,
+			},
 		}
 	},
 
-	created() {
-		this.generateQr()
+	watch: {
+		text: {
+			immediate: true,
+			handler() {
+				this.generateQr()
+				this.isOpen = !!this.text
+			},
+		},
 	},
 
 	methods: {
 		async generateQr() {
-			try {
-				this.uri = await QRCode.toDataURL(this.text)
-			} catch (err) {
-				console.error(err)
+			if (this.text) {
+				try {
+					this.uri = await QRCode.toDataURL(this.text, { width: 256 })
+				} catch (err) {
+					console.error(err)
+				}
+			} else {
+				this.uri = null
 			}
 		},
 	},
@@ -54,8 +79,9 @@ export default {
 </script>
 
 <style lang="scss">
-.qrDialog__content {
-    margin-bottom: 50px;
-    text-align: center;
+.qr-dialog__content {
+	display: flex;
+	justify-content: space-around;
+	width: 100%;
 }
 </style>
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -70,7 +70,7 @@
 						</template>
 						{{ t('forms', 'Copy to clipboard') }}
 					</NcActionLink>
-					<NcActionButton @click="openQrDialog(getPublicShareLink(share))">
+					<NcActionButton @click="openQrDialog(share)">
 						<template #icon>
 							<IconQr :size="20" />
 						</template>
@@ -110,10 +110,9 @@
 			</div>
 		</TransitionGroup>
 
-		<NcDialog :open.sync="qrDialog" close-on-click-outside="true" @close="qrDialog=false">
-			<QRDialog :title="t('forms', 'Share {formTitle}', { formTitle: form.title })"
-				:text="qrDialog" />
-		</NcDialog>
+		<QRDialog :title="t('forms', 'Share {formTitle}', { formTitle: form.title })"
+			:text="qrDialogText"
+			@closed="qrDialogText = ''" />
 
 		<!-- Legacy Info, if present -->
 		<div v-if="form.access.legacyLink" class="share-div">
@@ -228,7 +227,6 @@ 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 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 IconCodeBrackets from 'vue-material-design-icons/CodeBrackets.vue'
@@ -265,7 +263,6 @@ export default {
 		NcActionButton,
 		NcActionLink,
 		NcCheckboxRadioSwitch,
-		NcDialog,
 		QRDialog,
 		SharingSearchDiv,
 		SharingShareDiv,
@@ -284,7 +281,7 @@ export default {
 		return {
 			isLoading: false,
 			appConfig: loadState(appName, 'appConfig'),
-			qrDialog: false,
+			qrDialogText: '',
 		}
 	},
 
@@ -472,8 +469,8 @@ export default {
 			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		async openQrDialog(qrText) {
-			this.qrDialog = qrText
+		openQrDialog(share) {
+			this.qrDialogText = this.getPublicShareLink(share)
 		},
 	},
 }