From 35b55ec1273e33672c55f0d6e3c3108f881d99d1 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 18 Jan 2023 22:07:43 +0300
Subject: [PATCH] feat: QrCode row height support

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/virtual-cell/QrCode.vue | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue
index b030d24c5f..c255143618 100644
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
+import { GridType } from 'nocodb-sdk'
+import { ActiveViewInj } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
+const view = inject(ActiveViewInj, ref())
+
 const cellValue = inject(CellValueInj)
 
 const qrValue = computed(() => String(cellValue?.value))
@@ -11,6 +15,21 @@ const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOf
 
 const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value)
 
+const rowHeight = computed(() => {
+  if ((view.value?.view as GridType)?.row_height !== undefined) {
+    switch ((view.value?.view as GridType)?.row_height) {
+      case 0:
+        return 1
+      case 1:
+        return 2
+      case 2:
+        return 4
+      case 3:
+        return 6
+    }
+  }
+})
+
 const qrCode = useQRCode(qrValue, {
   width: 150,
 })
@@ -47,7 +66,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('labels.qrCodeValueTooLong') }}
   </div>
-  <img v-if="showQrCode" :src="qrCode" alt="QR Code" @click="showQrModal" />
+  <img v-if="showQrCode" class="mx-auto" :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }" :src="qrCode" alt="QR Code" @click="showQrModal" />
   <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>