Merge pull request #5952 from nocodb/refactor/5951-general-ui-ux

General UI/UX - enhancement/bugs

packages/nc-gui/components/cell/attachment/index.vue

@@ -2,6 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
+import { RowHeightInj } from '~/context'
 import {
   ActiveCellInj,
   CurrentCellInj,
@@ -129,11 +130,16 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
     }
   }
 })
+
+const rowHeight = inject(RowHeightInj, ref(1.8))
 </script>
 
 <template>
   <div
     ref="attachmentCellRef"
+    :style="{
+      height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+    }"
     class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
   >
     <LazyCellAttachmentCarousel />
@@ -153,7 +159,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
       @click.stop="open"
     >
@@ -162,7 +168,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       <a-tooltip v-else placement="bottom">
         <template #title> Click or drop a file into cell</template>
 
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1">
           <MaterialSymbolsAttachFile
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
           />
@@ -183,7 +189,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex cursor-pointer justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
+        class="flex cursor-pointer justify-center items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
+        :style="{
+          maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+        }"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
           <a-tooltip placement="bottom">
@@ -192,7 +201,11 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
             </template>
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
-                <LazyCellAttachmentImage :alt="item.title || `#${i}`" :srcs="getPossibleAttachmentSrc(item)" />
+                <LazyCellAttachmentImage
+                  class="max-h-[1.8rem] max-w-[1.8rem]"
+                  :alt="item.title || `#${i}`"
+                  :srcs="getPossibleAttachmentSrc(item)"
+                />
               </div>
             </div>
             <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
@@ -229,7 +242,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
 .nc-cell {
   .nc-attachment-cell {
     .nc-attachment {
-      @apply w-[50px] h-[50px] min-h-[50px] min-w-[50px] ring-1 ring-gray-300 rounded;
+      @apply w-[1.8rem] h-[1.8rem] min-h-[1.8rem] min-w-[1.8rem] ring-1 ring-gray-300 rounded;
     }
 
     .ghost,

packages/nc-gui/components/smartsheet/header/Icon.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { ColumnType, isVirtualCol } from 'nocodb-sdk'
+
+const { column } = defineProps<{ column: ColumnType }>()
+
+</script>
+
+<template>
+  <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" :column-meta="column" />
+  <SmartsheetHeaderCellIcon v-else :column-meta="column" />
+</template>

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { isSystemColumn } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -27,10 +28,15 @@ const searchDropdown = ref(null)
 onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
-  (meta.value as TableType)?.columns?.map((column) => ({
+  (meta.value as TableType)?.columns
-    value: column.id,
+    ?.filter((c) => {
-    label: column.title,
+      return !isSystemColumn(c)
-  })),
+    })
+    .map((column) => ({
+      value: column.id,
+      label: column.title,
+      column,
+    })),
 )
 
 watch(
@@ -65,10 +71,16 @@ function onPressEnter() {
         :open="isDropdownOpen"
         size="small"
         :dropdown-match-select-width="false"
-        :options="columns"
         dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option"
         class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
-      />
+      >
+        <a-select-option v-for="op of columns" :key="op.value" :value="op.value">
+          <div class="flex items-center -ml-1 gap-2">
+            <SmartsheetHeaderIcon class="" :column="op.column" />
+            {{ op.label }}
+          </div>
+        </a-select-option>
+      </a-select>
     </div>
 
     <a-input

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -267,7 +267,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         addOrEditStackRow(row.value, isNewRow)
       }
 
-      message.success(`${displayValue.value || 'Row'} updated successfully.`)
+      // trim the display value if greater than 20chars
+      const trimmedDisplayValue =
+        displayValue.value && displayValue.value?.length > 20 ? `${displayValue.value?.substring(0, 20)}...` : displayValue.value
+
+      message.success(`${trimmedDisplayValue || 'Row'} updated successfully.`)
 
       changedColumns.value = new Set()
     } catch (e: any) {