Merge pull request #3139 from nocodb/refactor/gui-v2-corrections

fix(gui-v2): ui corrections

packages/nc-gui-v2/components/cell/Currency.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 const props = defineProps<Props>()

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

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

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

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Decimal.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null | string
+  modelValue: number | null | string | undefined
 }
 
 interface Emits {

packages/nc-gui-v2/components/cell/Duration.vue

@@ -11,7 +11,7 @@ import {
 } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Email.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 interface Emits {

packages/nc-gui-v2/components/cell/Float.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 interface Emits {

packages/nc-gui-v2/components/cell/Integer.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 interface Emits {

packages/nc-gui-v2/components/cell/Json.vue

@@ -2,6 +2,7 @@
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
 import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -15,7 +16,9 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj, ref(false))
+
+const readonly = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 
@@ -87,7 +90,7 @@ watch(editEnabled, () => {
 
 <template>
   <component :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
-    <div v-if="editEnabled" class="flex flex-col w-full">
+    <div v-if="editEnabled && !readonly" class="flex flex-col w-full">
       <div class="flex flex-row justify-between pt-1 pb-2">
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
           <CilFullscreenExit v-if="isExpanded" class="h-2.5" />

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -5,7 +5,7 @@ import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#import
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue?: string | string[]
+  modelValue?: string | string[] | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Percent.vue

@@ -2,7 +2,7 @@
 import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Rating.vue

@@ -2,7 +2,7 @@
 import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue?: number | null
+  modelValue?: number | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -4,7 +4,7 @@ import type { SelectOptionType } from 'nocodb-sdk'
 import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue?: string
+  modelValue?: string | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Text.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const props = defineProps<Props>()

packages/nc-gui-v2/components/cell/TextArea.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

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

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue?: string | null
+  modelValue?: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Url.vue

@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue: value } = defineProps<Props>()

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

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -29,8 +29,6 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
-const showTableList = ref(true)
-
 const tableCreateDlg = ref(false)
 
 let key = $ref(0)
@@ -165,17 +163,6 @@ const activeTable = computed(() => {
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
           </span>
-          <MdiPlus
-            v-if="isUIAllowed('treeview-add-button')"
-            v-t="['c:table:create:navdraw']"
-            class="transform text-gray-500 hover:(text-pink-500 scale-105) nc-btn-tbl-add"
-            @click.stop="tableCreateDlg = true"
-          />
-
-          <MdiMenuDown
-            class="transition-transform !duration-100 text-gray-500 hover:text-pink-500"
-            :class="{ 'transform rotate-180': showTableList }"
-          />
         </div>
         <div style="direction: ltr" class="flex-1">
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -107,11 +107,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           </a-checkbox>
         </div>
         <div class="p-2 flex gap-2" @click.stop>
-          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="showAll">
+          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="showAll()">
             <!-- Show All -->
             {{ $t('general.showAll') }}
           </a-button>
-          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
+          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="hideAll()">
             <!-- Hide All -->
             {{ $t('general.hideAll') }}
           </a-button>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -91,7 +91,7 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
-provide(ReadonlyInj, isUIAllowed('xcDatatableEditable'))
+provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
   await loadData()
@@ -294,9 +294,9 @@ const expandForm = (row: Row, state: Record<string, any>) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-            <tr class="nc-grid-header">
+            <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
-                <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
+                <div class="w-full h-full bg-gray-100 flex min-w-[80px] pl-5 pr-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -348,28 +348,26 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
-                  <td key="row-index" class="caption nc-grid-cell">
-                    <div class="align-center flex w-[80px]">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
+                    <div class="align-center flex min-w-[80px]">
                       <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
                       <div
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
+                      </div>
                       <span class="flex-1" />
-                        <div class="nc-expand">
+                      <div class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs"
+                          class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
                           :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
                         >
                           {{ row.rowMeta.commentCount }}
                         </span>
-                          <div
-                            v-else
-                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"
-                          >
+                        <div v-else class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
                           <MdiArrowExpand
                             class="select-none transform hover:(text-pink-500 scale-120)"
                             @click="expandForm(row, state)"
@@ -377,7 +375,6 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         </div>
                       </div>
                     </div>
-                    </div>
                   </td>
                   <td
                     v-for="(columnObj, colIndex) of fields"
@@ -484,7 +481,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
     position: relative;
   }
 
-  td > div {
+  td:not(:first-child) > div {
     overflow: hidden;
     @apply flex align-center h-auto px-1;
   }
@@ -534,11 +531,16 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 .nc-grid-row {
   .nc-row-expand-and-checkbox {
-    @apply w-full items-center justify-between p-1;
+    @apply w-full items-center justify-between;
   }
   .nc-expand {
+    &:not(.nc-comment) {
       @apply hidden;
     }
+    &.nc-comment {
+      display: flex;
+    }
+  }
 
   &:hover {
     .nc-row-no {
@@ -556,6 +558,11 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 }
 
 .nc-grid-header {
+  position: sticky;
+  top: -1px;
+
+  @apply z-1;
+
   &:hover {
     .nc-no-label {
       @apply hidden;

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -19,7 +19,9 @@ const page = computed({
 
 <template>
   <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
+    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500">
+      {{ count }} record{{ count !== 1 ? 's' : '' }}
+    </span>
 
     <div class="flex-1" />
 
@@ -51,4 +53,11 @@ const page = computed({
   line-height: 21px !important;
   @apply text-sm;
 }
+:deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
+  line-height: 21px !important;
+  @apply text-sm text-gray-500;
+}
+:deep(.ant-pagination-item-link) {
+  @apply text-gray-500;
+}
 </style>

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -54,7 +54,7 @@ const iconColor = '#1890ff'
       v-if="isUIAllowed('rowComments')"
       class="cursor-pointer select-none"
       @click="commentsDrawer = !commentsDrawer"
-    />>
+    />
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}

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

@@ -82,15 +82,15 @@ const isExpanded = useVModel(props, 'modelValue', emits)
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
-    <a-card class="!bg-gray-100 min-h-[70vh]">
-      <div class="flex h-full nc-form-wrapper items-stretch">
+    <a-card class="!bg-gray-100">
+      <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
             <div v-for="col in fields" :key="col.title" class="mt-2 py-2">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
 
-              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
+              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center mt-2">
                 <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
                 <SmartsheetCell
                   v-else

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -41,7 +41,6 @@ export function useViewColumns(
           [curr.fk_column_id]: curr,
         }
       }, {})
-
       fields.value = meta.value?.columns
         ?.map((column) => {
           const currentColumnField = fieldById[column.id!] || {}

packages/nc-gui-v2/context/index.ts

@@ -22,6 +22,5 @@ export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
-
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
-export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -144,7 +144,7 @@ const icon = (tab: TabItem) => {
           </template>
         </a-tabs>
       </div>
-      <div class="w-full min-h-[300px] grow">
+      <div class="w-full min-h-[300px] flex-grow">
         <NuxtPage />
       </div>
     </div>
@@ -174,7 +174,7 @@ const icon = (tab: TabItem) => {
         @apply font-weight-medium;
       }
       & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
-        @apply bg-gray-100;
+        @apply bg-gray-100 text-gray-500;
       }
     }
   }