Merge pull request #6729 from nocodb/nc-fix/misc-ui-fix

Misc UI fix

packages/nc-gui/components/nc/Button.vue

@@ -52,10 +52,8 @@ const onFocus = (e: FocusEvent) => {
       isFocused.value = false
     } else {
       const relatedTarget = e.relatedTarget as HTMLElement | null
-      const focusFromModal =
-        relatedTarget?.classList?.contains('ant-modal-wrap') || relatedTarget?.classList?.contains('ant-modal-wrap')
 
-      isFocused.value = !focusFromModal
+      isFocused.value = !!relatedTarget
     }
 
     isClicked.value = false

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

@@ -75,7 +75,7 @@ onKeyStroke('Enter', (event) => {
 })
 
 const comments = computed(() => commentsAndLogs.value.filter((log) => log.op_type === 'COMMENT'))
-const audits = computed(() => commentsAndLogs.value.filter((log) => log.op_type !== 'COMMENT'))
+const audits = computed(() => commentsAndLogs.value.filter((log) => log.op_type !== 'COMMENT' && log.details))
 
 function editComment(log: AuditType) {
   editLog.value = log
@@ -176,7 +176,7 @@ const onClickAudit = () => {
     <div
       class="h-[calc(100%-4rem)]"
       :class="{
-        'pb-2': tab !== 'comments' && !appInfo.ee,
+        'pb-1': tab !== 'comments' && !appInfo.ee,
       }"
     >
       <div v-if="isExpandedFormLoading" class="flex flex-col h-full">
@@ -261,7 +261,7 @@ const onClickAudit = () => {
           </div>
         </div>
       </div>
-      <div v-if="tab === 'audits'" ref="commentsWrapperEl" class="flex flex-col h-full pl-2 pr-1 pt-2 nc-scrollbar-md space-y-2">
+      <div v-if="tab === 'audits'" ref="commentsWrapperEl" class="flex flex-col h-full nc-scrollbar-md !overflow-y-auto">
         <template v-if="audits.length === 0">
           <div class="flex flex-col text-center justify-center h-full">
             <div class="text-center text-3xl text-gray-600">
@@ -270,25 +270,24 @@ const onClickAudit = () => {
             <div class="font-bold text-center my-1 text-gray-600">See changes to this record</div>
           </div>
         </template>
-        <div v-for="log of audits" :key="log.id">
+
-          <div v-if="log.details" class="bg-white rounded-xl border-1 gap-3 border-gray-200">
+        <div v-for="log of audits" :key="log.id" class="nc-audit-item">
-            <div class="flex flex-col p-4 gap-3">
+          <div class="flex flex-col p-4 gap-3">
-              <div class="flex justify-between">
+            <div class="flex justify-between">
-                <div class="flex items-center gap-2">
+              <div class="flex items-center gap-2">
-                  <GeneralUserIcon size="base" :email="log.user" />
+                <GeneralUserIcon size="base" :email="log.user" />
-
+
-                  <div class="flex flex-col">
+                <div class="flex flex-col">
-                    <span class="truncate font-bold max-w-50">
+                  <span class="truncate font-bold max-w-50">
-                      {{ log.display_name ?? log.user.split('@')[0].slice(0, 2) ?? 'Shared source' }}
+                    {{ log.display_name ?? log.user.split('@')[0].slice(0, 2) ?? 'Shared source' }}
-                    </span>
+                  </span>
-                    <div v-if="log.id !== editLog?.id" class="text-xs font-medium text-gray-500">
+                  <div v-if="log.id !== editLog?.id" class="text-xs font-medium text-gray-500">
-                      {{ timeAgo(log.created_at) }}
+                    {{ timeAgo(log.created_at) }}
-                    </div>
                   </div>
                 </div>
               </div>
-              <div v-dompurify-html="log.details" class="text-sm font-medium"></div>
             </div>
+            <div v-dompurify-html="log.details" class="text-sm font-medium"></div>
           </div>
         </div>
       </div>
@@ -300,6 +299,15 @@ const onClickAudit = () => {
 .tab {
   @apply max-w-1/2;
 }
+
+.nc-audit-item {
+  @apply border-b-1 gap-3 border-gray-200;
+}
+
+.nc-audit-item:last-child {
+  @apply border-b-0;
+}
+
 .tab .tab-title {
   @apply min-w-0 flex justify-center gap-2 font-semibold items-center;
   word-break: 'keep-all';

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

@@ -438,7 +438,7 @@ export default {
     :class="{ active: isExpanded }"
   >
     <div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6">
-      <div class="flex h-8 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">
+      <div class="flex h-9.5 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">
         <template v-if="!isMobileMode">
           <div class="flex gap-3 w-100">
             <div class="flex gap-2">
@@ -484,7 +484,7 @@ export default {
                 {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
               </div>
             </NcButton>
-            <NcDropdown v-if="!isNew">
+            <NcDropdown v-if="!isNew" placement="bottomRight">
               <NcButton type="secondary" class="nc-expand-form-more-actions w-10">
                 <GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" />
               </NcButton>
@@ -580,7 +580,7 @@ export default {
           }"
         >
           <div
-            class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md !pb-2 items-center w-full bg-white p-4 xs:p-0"
+            class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md pb-6 items-center w-full bg-white p-4 xs:p-0"
           >
             <div
               v-for="(col, i) of fields"
@@ -710,7 +710,7 @@ export default {
             v-if="isUIAllowed('dataEdit')"
             class="w-full h-16 border-t-1 border-gray-200 bg-white flex items-center justify-end p-3 xs:(p-0 mt-4 border-t-0 gap-x-4 justify-between)"
           >
-            <NcDropdown v-if="!isNew && isMobileMode">
+            <NcDropdown v-if="!isNew && isMobileMode" placement="bottomRight">
               <NcButton type="secondary" class="nc-expand-form-more-actions w-10">
                 <GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" />
               </NcButton>

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1209,7 +1209,7 @@ const loaderText = computed(() => {
         <div class="table-overlay" :class="{ 'nc-grid-skelton-loader': showSkeleton }">
           <table
             ref="smartTable"
-            class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
+            class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white relative"
             :class="{
               mobile: isMobileMode,
               desktop: !isMobileMode,
@@ -1552,11 +1552,15 @@ const loaderText = computed(() => {
                 @mouseup.stop
                 @click="addEmptyRow()"
               >
-                <td class="text-left pointer sticky left-0 !border-r-0">
+                <div
-                  <div class="px-2 w-full flex items-center text-gray-500">
+                  class="h-10.5 border-b-1 border-gray-100 bg-white group-hover:bg-gray-50 absolute left-0 bottom-0 px-2 sticky z-40 w-full flex items-center text-gray-500"
-                    <component :is="iconMap.plus" class="text-pint-500 text-base ml-2 text-gray-600 group-hover:text-black" />
+                >
-                  </div>
+                  <component
-                </td>
+                    :is="iconMap.plus"
+                    v-if="!isViewColumnsLoading"
+                    class="text-pint-500 text-base ml-2 mt-0 text-gray-600 group-hover:text-black"
+                  />
+                </div>
                 <td class="!border-gray-100" :colspan="visibleColLength"></td>
               </tr>
             </tbody>

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

@@ -63,7 +63,7 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
   } else if (isYear(column, abstractType)) {
     return iconMap.calendar
   } else if (isTime(column, abstractType)) {
-    return iconMap.calendar
+    return iconMap.clock
   } else if (isRating(column)) {
     return iconMap.rating
   } else if (isAttachment(column)) {

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

@@ -98,20 +98,8 @@ watch(columns, () => {
       <div v-if="!isMobileMode" class="w-16 text-[0.75rem] font-medium text-gray-400 truncate">
         {{ displayColumnLabel }}
       </div>
-      <div
+      <div class="xs:(text-gray-600) group-hover:text-gray-700 sm:(text-gray-400)">
-        :class="{
+        <component :is="iconMap.arrowDown" class="text-sm text-inherit" />
-          'opacity-0 group-hover:opacity-100': !isMobileMode,
-          'text-gray-700': isMobileMode,
-        }"
-      >
-        <component
-          :is="iconMap.arrowDown"
-          class="text-sm"
-          :class="{
-            'text-gray-400': !isMobileMode,
-            'text-gray-600': isMobileMode,
-          }"
-        />
       </div>
       <a-select
         v-model:value="search.field"