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>
+  <div
+    class="pl-2 w-full flex"
+    :class="{
+      'flex-start': isExpandedFormOpen,
+      'justify-center': !isExpandedFormOpen,
+    }"
+  >
     <img
       v-if="showQrCode && rowHeight"
-    :class="{ 'mx-auto': !isGallery }"
       :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,11 +48,18 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
   >
     <JsBarcodeWrapper v-if="showBarcode" :barcode-value="barcodeValue" :barcode-format="barcodeMeta.barcodeFormat" />
   </a-modal>
+  <div
+    class="flex ml-2 w-full items-center"
+    :class="{
+      'justify-start': isExpandedFormOpen,
+      'justify-center': !isExpandedFormOpen,
+    }"
+  >
     <JsBarcodeWrapper
       v-if="showBarcode && rowHeight"
       :barcode-value="barcodeValue"
       :barcode-format="barcodeMeta.barcodeFormat"
-    :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem`, width: 40 }"
       @on-click-barcode="showBarcodeModal"
     >
       <template #barcodeRenderError>
@@ -71,6 +80,7 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
         </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(() => ({