Browse Source

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

fix(gui-v2): ui corrections
pull/3149/head
navi 2 years ago committed by GitHub
parent
commit
cc51b1b1c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      packages/nc-gui-v2/components/cell/Currency.vue
  2. 2
      packages/nc-gui-v2/components/cell/DatePicker.vue
  3. 2
      packages/nc-gui-v2/components/cell/DateTimePicker.vue
  4. 2
      packages/nc-gui-v2/components/cell/Decimal.vue
  5. 2
      packages/nc-gui-v2/components/cell/Duration.vue
  6. 2
      packages/nc-gui-v2/components/cell/Email.vue
  7. 2
      packages/nc-gui-v2/components/cell/Float.vue
  8. 2
      packages/nc-gui-v2/components/cell/Integer.vue
  9. 7
      packages/nc-gui-v2/components/cell/Json.vue
  10. 2
      packages/nc-gui-v2/components/cell/MultiSelect.vue
  11. 2
      packages/nc-gui-v2/components/cell/Percent.vue
  12. 2
      packages/nc-gui-v2/components/cell/Rating.vue
  13. 2
      packages/nc-gui-v2/components/cell/SingleSelect.vue
  14. 2
      packages/nc-gui-v2/components/cell/Text.vue
  15. 2
      packages/nc-gui-v2/components/cell/TextArea.vue
  16. 2
      packages/nc-gui-v2/components/cell/TimePicker.vue
  17. 2
      packages/nc-gui-v2/components/cell/Url.vue
  18. 2
      packages/nc-gui-v2/components/cell/YearPicker.vue
  19. 13
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  20. 4
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  21. 63
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  22. 11
      packages/nc-gui-v2/components/smartsheet/Pagination.vue
  23. 2
      packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
  24. 6
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
  25. 1
      packages/nc-gui-v2/composables/useViewColumns.ts
  26. 3
      packages/nc-gui-v2/context/index.ts
  27. 4
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

2
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>()

2
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>()

2
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>()

2
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 {

2
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>()

2
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 {

2
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 {

2
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 {

7
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" />

2
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>()

2
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>()

2
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>()

2
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>()

2
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>()

2
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>()

2
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>()

2
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>()

2
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>()

13
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">

4
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>

63
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>
@ -422,9 +419,9 @@ const expandForm = (row: Row, state: Record<string, any>) => {
</template>
</SmartsheetRow>
<!--
<!--
TODO: add relationType !== 'bt' ?
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-->
<tr v-if="!isView && !isLocked && !isPublicView && isUIAllowed('xcDatatableEditable')">
<td
@ -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;

11
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>

2
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') }}

6
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

1
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!] || {}

3
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')

4
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;
}
}
}

Loading…
Cancel
Save