From e4d7f95fe9793bf02215087e2efe64f00e105389 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 19:50:31 +0530
Subject: [PATCH] fix: qr alignment

---
 .../nc-gui/components/virtual-cell/QrCode.vue    |  7 +++++--
 .../virtual-cell/barcode/JsBarcodeWrapper.vue    | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue
index dd0d9054f2..2cf8879dd7 100644
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 import type QRCode from 'qrcode'
-import { RowHeightInj, computed, inject, ref } from '#imports'
+import { IsGalleryInj, RowHeightInj, computed, inject, ref } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
 const cellValue = inject(CellValueInj)
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const qrValue = computed(() => String(cellValue?.value))
 
 const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOfAllowedCharsForQrValue)
@@ -36,6 +38,7 @@ const qrCodeLarge = useQRCode(qrValue, {
 const modalVisible = ref(false)
 
 const showQrModal = (ev: MouseEvent) => {
+  if (isGallery.value) return
   ev.stopPropagation()
   modalVisible.value = true
 }
@@ -65,7 +68,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   </div>
   <img
     v-if="showQrCode && rowHeight"
-    class="mx-auto"
+    :class="{ 'mx-auto': !isGallery }"
     :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
     :src="qrCode"
     alt="QR Code"
diff --git a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
index 4799b4a5d7..95ec4fba0d 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import JsBarcode from 'jsbarcode'
-import { onMounted } from '#imports'
+import { IsGalleryInj, onMounted } from '#imports'
 
 const props = defineProps({
   barcodeValue: { type: String, required: true },
@@ -10,6 +10,8 @@ const props = defineProps({
 
 const emit = defineEmits(['onClickBarcode'])
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const barcodeSvgRef = ref<HTMLElement>()
 const errorForCurrentInput = ref(false)
 
@@ -33,6 +35,7 @@ const generate = () => {
 }
 
 const onBarcodeClick = (ev: MouseEvent) => {
+  if (isGallery.value) return
   ev.stopPropagation()
   emit('onClickBarcode')
 }
@@ -42,6 +45,15 @@ onMounted(generate)
 </script>
 
 <template>
-  <svg v-show="!errorForCurrentInput" ref="barcodeSvgRef" class="w-full" data-testid="barcode" @click="onBarcodeClick"></svg>
+  <svg
+    v-show="!errorForCurrentInput"
+    ref="barcodeSvgRef"
+    :class="{
+      'w-full': !isGallery,
+      'w-auto': isGallery,
+    }"
+    data-testid="barcode"
+    @click="onBarcodeClick"
+  ></svg>
   <slot v-if="errorForCurrentInput" name="barcodeRenderError" />
 </template>