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

fix(gui-v2): ui corrections
2 years ago · cc51b1b1c0
27 changed files with 76 additions and 72 deletions
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/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 {
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/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 {
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/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 {
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/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 {
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/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" />
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/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">
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/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>
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/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,33 +348,30 @@ 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" />
-                        <span class="flex-1" />
-                        <div class="nc-expand">
-                          <span
-                            v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs"
-                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                      </div>
+                      <span class="flex-1" />
+                      <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 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">
+                          <MdiArrowExpand
+                            class="select-none transform hover:(text-pink-500 scale-120)"
                            @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"
-                          >
-                            <MdiArrowExpand
-                              class="select-none transform hover:(text-pink-500 scale-120)"
-                              @click="expandForm(row, state)"
-                            />
-                          </div>
+                          />
                        </div>
                      </div>
                    </div>
@ -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,10 +531,15 @@ 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 {
-    @apply hidden;
+    &:not(.nc-comment) {
+      @apply hidden;
+    }
+    &.nc-comment {
+      display: flex;
+    }
  }

  &:hover {
@ -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;
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/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>
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/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') }}
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/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
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/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!] || {}
--- a/packages/nc-gui-v2/context/index.ts
+++ b/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')
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/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;
      }
    }
  }