move modal into tab vue

Signed-off-by: Felix Beichler <felix@beichlers.de>
nextcloud · May 12, 2024 · 72ebf01 · 72ebf01
1 parent 171480e
commit 72ebf01
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 122 deletions.
diff --git a/src/components/QrModal.vue b/src/components/QrModal.vue
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -21,7 +21,7 @@
   -
   -->
 
-<template>
+  <template>
 	<div class="sidebar-tabs__content">
 		<SharingSearchDiv :current-shares="form.shares"
 			:show-loading="isLoading"
@@ -98,12 +98,15 @@
 		</TransitionGroup>
 
 		<NcModal v-if="qrModal" size="small" @close="qrModal=false">
-			<QrModal :name="qrTitle"
-				:encodeText="qrText"
-				class="modal__content">
-				<template #description>
-				</template>
-			</QrModal>
+			<div class="qr-code modal__content">
+				<h2>{{ form.title }}</h2>
+				<div class="canvas">
+					<img :src="qrUri" :alt="qrText">
+				</div>
+				<p class="qr-url">
+					{{ qrText }}
+				</p>
+			</div>
 		</NcModal>
 
 		<!-- Legacy Info, if present -->
@@ -206,12 +209,12 @@ 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 QRCode from 'qrcode'
 
 import FormsIcon from '../Icons/FormsIcon.vue'
 import IconCopyAll from '../Icons/IconCopyAll.vue'
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
-import QrModal from '../QrModal.vue'
 import PermissionTypes from '../../mixins/PermissionTypes.js'
 import ShareTypes from '../../mixins/ShareTypes.js'
 import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
@@ -236,7 +239,6 @@ export default {
 		NcCheckboxRadioSwitch,
 		SharingSearchDiv,
 		SharingShareDiv,
-		QrModal,
 		NcModal,
 	},
 
@@ -255,7 +257,7 @@ export default {
 			appConfig: loadState(appName, 'appConfig'),
 			qrModal: false,
 			qrText: '',
-			qrTitle: '',
+			qrUri: '',
 		}
 	},
 
@@ -415,10 +417,14 @@ export default {
 			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		openQrModal(qrText) {
-			this.qrModal = true
-			this.qrTitle = this.form.title
+		async openQrModal(qrText) {
 			this.qrText = qrText
+			try {
+				this.qrUri = await QRCode.toDataURL(this.qrText)
+				this.qrModal = true
+			} catch (err) {
+				console.error(err)
+			}
 		},
 	},
 }
@@ -492,4 +498,12 @@ export default {
 	flex-direction: column;
 	color: var(--color-main-text);
 }
+
+.canvas {
+	margin: auto;
+}
+.qr-url {
+  font-size: 0.6em;
+  margin-top: 16px;
+}
 </style>