fix: expanded form ui changes

packages/nc-gui/components/cell/Checkbox.vue

@@ -40,6 +40,8 @@ const isGallery = inject(IsGalleryInj, ref(false))
 
 const readOnly = inject(ReadonlyInj)
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+
 const checkboxMeta = computed(() => {
   return {
     icon: {
@@ -82,8 +84,8 @@ useSelectedCellKeyupListener(active, (e) => {
   <div
     class="flex cursor-pointer w-full h-full items-center"
     :class="{
-      'justify-center': !isForm || !isGallery,
+      'w-full flex-start pl-2': isForm || isGallery || isExpandedFormOpen,
-      'w-full flex-start': isForm || isGallery,
+      'w-full justify-center': !isForm && !isGallery && !isExpandedFormOpen,
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
     }"

packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts

@@ -39,7 +39,7 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
     case UITypes.QrCode:
       return { icon: iconMap.qrCode, color: 'text-grey' }
     case UITypes.Barcode:
-      return { icon: iconMap.qrCode, color: 'text-grey' }
+      return { icon: iconMap.barCode, color: 'text-grey' }
     case UITypes.Lookup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:

packages/nc-gui/components/virtual-cell/QrCode.vue

@@ -11,6 +11,8 @@ const isGallery = inject(IsGalleryInj, ref(false))
 
 const qrValue = computed(() => String(cellValue?.value))
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+
 const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOfAllowedCharsForQrValue)
 
 const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value)
@@ -66,15 +68,22 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-[10px]">
     {{ $t('labels.qrCodeValueTooLong') }}
   </div>
-  <img
+  <div
-    v-if="showQrCode && rowHeight"
+    class="pl-2 w-full flex"
-    :class="{ 'mx-auto': !isGallery }"
+    :class="{
-    :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      'flex-start': isExpandedFormOpen,
-    :src="qrCode"
+      'justify-center': !isExpandedFormOpen,
-    :alt="$t('title.qrCode')"
+    }"
-    @click="showQrModal"
+  >
-  />
+    <img
-  <img v-else-if="showQrCode" class="mx-auto" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+      v-if="showQrCode && rowHeight"
+      :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      :src="qrCode"
+      :alt="$t('title.qrCode')"
+      @click="showQrModal"
+    />
+    <img v-else-if="showQrCode" class="mx-auto" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+  </div>
   <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -15,6 +15,8 @@ const tooManyCharsForBarcode = computed(() => barcodeValue.value.length > maxNum
 
 const modalVisible = ref(false)
 
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+
 const showBarcodeModal = () => {
   modalVisible.value = true
 }
@@ -46,31 +48,39 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
   >
     <JsBarcodeWrapper v-if="showBarcode" :barcode-value="barcodeValue" :barcode-format="barcodeMeta.barcodeFormat" />
   </a-modal>
-  <JsBarcodeWrapper
+  <div
-    v-if="showBarcode && rowHeight"
+    class="flex ml-2 w-full items-center"
-    :barcode-value="barcodeValue"
+    :class="{
-    :barcode-format="barcodeMeta.barcodeFormat"
+      'justify-start': isExpandedFormOpen,
-    :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      'justify-center': !isExpandedFormOpen,
-    @on-click-barcode="showBarcodeModal"
+    }"
-  >
-    <template #barcodeRenderError>
-      <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
-        {{ $t('msg.warning.barcode.renderError') }}
-      </div>
-    </template>
-  </JsBarcodeWrapper>
-  <JsBarcodeWrapper
-    v-else-if="showBarcode"
-    :barcode-value="barcodeValue"
-    :barcode-format="barcodeMeta.barcodeFormat"
-    @on-click-barcode="showBarcodeModal"
   >
-    <template #barcodeRenderError>
+    <JsBarcodeWrapper
-      <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
+      v-if="showBarcode && rowHeight"
-        {{ $t('msg.warning.barcode.renderError') }}
+      :barcode-value="barcodeValue"
-      </div>
+      :barcode-format="barcodeMeta.barcodeFormat"
-    </template>
+      :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem`, width: 40 }"
-  </JsBarcodeWrapper>
+      @on-click-barcode="showBarcodeModal"
+    >
+      <template #barcodeRenderError>
+        <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
+          {{ $t('msg.warning.barcode.renderError') }}
+        </div>
+      </template>
+    </JsBarcodeWrapper>
+    <JsBarcodeWrapper
+      v-else-if="showBarcode"
+      :barcode-value="barcodeValue"
+      :barcode-format="barcodeMeta.barcodeFormat"
+      @on-click-barcode="showBarcodeModal"
+    >
+      <template #barcodeRenderError>
+        <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
+          {{ $t('msg.warning.barcode.renderError') }}
+        </div>
+      </template>
+    </JsBarcodeWrapper>
+  </div>
 
   <div v-if="tooManyCharsForBarcode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('labels.barcodeValueTooLong') }}

packages/nc-gui/composables/useViewData.ts

@@ -106,7 +106,7 @@ export function useViewData(
 
   const isFirstRow = computed(() => {
     const currentIndex = getExpandedRowIndex()
-    return paginationData.value?.isFirstPage && currentIndex === 1
+    return paginationData.value?.isFirstPage && currentIndex === 0
   })
 
   const queryParams = computed(() => ({