Nc fix: expanded record UI/UX (#8847)

* fix(nc-gui): update qr code according to new design

* fix(nc-gui): audit logs empty state style

* fix(nc-gui): small changes

* fix(nc-gui): update barcode & qrcode cell from expanded form

* fix(nc-gui): increase expanded form field gap

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

@@ -249,7 +249,7 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
     !isGrid.value ||
     isExpandedForm.value ||
     isEditColumn.value ||
-    isExpandedFormOpen()
+    isExpandedFormOpenExist()
   ) {
     return
   }

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

@@ -303,7 +303,7 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
     !isGrid.value ||
     isExpandedForm.value ||
     isEditColumn.value ||
-    isExpandedFormOpen()
+    isExpandedFormOpenExist()
   ) {
     return
   }

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

@@ -233,7 +233,7 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
     !isGrid.value ||
     isExpandedForm.value ||
     isEditColumn.value ||
-    isExpandedFormOpen()
+    isExpandedFormOpenExist()
   ) {
     return
   }

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

@@ -214,7 +214,7 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
     !isGrid.value ||
     isExpandedForm.value ||
     isEditColumn.value ||
-    isExpandedFormOpen()
+    isExpandedFormOpenExist()
   ) {
     return
   }

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -738,7 +738,7 @@ export default {
         >
           <div
             ref="expandedFormScrollWrapper"
-            class="flex flex-col flex-grow gap-4 h-full max-h-full nc-scrollbar-thin items-center w-full p-4 xs:(px-4 pt-4 pb-2 gap-6) children:max-w-[588px] <lg:(children:max-w-[450px])"
+            class="flex flex-col flex-grow gap-6 h-full max-h-full nc-scrollbar-thin items-center w-full p-4 xs:(px-4 pt-4 pb-2 gap-6) children:max-w-[588px] <lg:(children:max-w-[450px])"
           >
             <div
               v-for="(col, i) of fields"
@@ -1058,6 +1058,34 @@ export default {
   &:focus-within:not(.nc-readonly-div-data-cell):not(.nc-system-field) {
     @apply !shadow-selected;
   }
+
+  &:has(.nc-virtual-cell-qrcode .nc-qrcode-container),
+  &:has(.nc-virtual-cell-barcode .nc-barcode-container) {
+    @apply !border-none px-0 !rounded-none;
+    :deep(.nc-virtual-cell-qrcode),
+    :deep(.nc-virtual-cell-barcode) {
+      @apply px-0;
+      & > div {
+        @apply !px-0;
+      }
+      .barcode-wrapper {
+        @apply ml-0;
+      }
+    }
+    :deep(.nc-virtual-cell-qrcode) {
+      img {
+        @apply !h-[84px] border-1 border-solid border-gray-200 rounded;
+      }
+    }
+    :deep(.nc-virtual-cell-barcode) {
+      .nc-barcode-container {
+        @apply border-1 rounded-lg border-gray-200 h-[64px] max-w-full p-2;
+        svg {
+          @apply !h-full;
+        }
+      }
+    }
+  }
 }
 .nc-data-cell:focus-within {
   @apply !border-1 !border-brand-500;

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

@@ -75,7 +75,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   </a-modal>
   <div
     v-if="showQrCode"
-    class="w-full flex"
+    class="nc-qrcode-container w-full flex"
     :class="{
       'flex-start pl-2': isExpandedFormOpen,
       'justify-center': !isExpandedFormOpen,
@@ -91,7 +91,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
       class="min-w-[1.4em]"
       @click="showQrModal"
     />
-    <img v-else class="mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+    <img v-else class="flex-none mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
   </div>
   <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('labels.qrCodeValueTooLong') }}

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

@@ -70,6 +70,7 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
       :custom-style="{
         height: rowHeight ? `${rowHeight === 1 ? rowHeightInPx['1'] - 4 : rowHeightInPx[`${rowHeight}`] - 20}px` : `1.8rem`,
       }"
+      class="nc-barcode-container"
       @on-click-barcode="showBarcodeModal"
     >
       <template #barcodeRenderError>
@@ -83,6 +84,7 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
       tabindex="-1"
       :barcode-value="barcodeValue"
       :barcode-format="barcodeMeta.barcodeFormat"
+      class="nc-barcode-container"
       @on-click-barcode="showBarcodeModal"
     >
       <template #barcodeRenderError>

packages/nc-gui/components/workspace/AuditLogs.vue

@@ -437,9 +437,9 @@ useEventListener(tableWrapper, 'scroll', () => {
         </div>
         <div
           v-if="!isLoading && !audits?.length"
-          class="flex items-center justify-center absolute left-0 top-[54px] w-full h-[calc(100%_-_54px)] pb-10 flex items-center justify-center text-gray-500"
+          class="flex items-center justify-center absolute left-0 top-0 w-full h-full pb-10 flex items-center justify-center text-gray-500"
         >
-          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
+          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
         </div>
         <div
           v-if="totalRows"
@@ -690,4 +690,7 @@ useEventListener(tableWrapper, 'scroll', () => {
     @apply !px-2;
   }
 }
+:deep(.ant-empty-description) {
+  @apply mb-0;
+}
 </style>

packages/nc-gui/composables/useUndoRedo.ts

@@ -167,7 +167,9 @@ export const useUndoRedo = createSharedComposable(() => {
   useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
 
-    if ((e && (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) || isExpandedFormOpen()) return
+    if ((e && (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) || isExpandedFormOpenExist()) {
+      return
+    }
 
     if (cmdOrCtrl && !e.altKey) {
       switch (e.keyCode) {

packages/nc-gui/utils/browserUtils.ts

@@ -2,7 +2,7 @@
 export const isMac = () => /Mac/i.test(navigator.platform)
 export const isDrawerExist = () => document.querySelector('.ant-drawer-open')
 export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer-open')
-export const isExpandedFormOpen = () => document.querySelector('.nc-drawer-expanded-form.active')
+export const isExpandedFormOpenExist = () => document.querySelector('.nc-drawer-expanded-form.active')
 export const isExpandedCellInputExist = () => document.querySelector('.expanded-cell-input')
 export const cmdKActive = () => document.querySelector('.cmdk-modal-active')