Browse Source

Merge pull request #3502 from nocodb/fix/3482-name-length

feat: implement TruncateText component
pull/3506/head
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
commit
3b25f5edd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 44
      packages/nc-gui-v2/components/general/TruncateText.vue
  3. 4
      packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
  4. 4
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  5. 16
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

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

@ -334,7 +334,9 @@ function openTableCreateDialog() {
/>
</div>
<div class="nc-tbl-title flex-1">{{ table.title }}</div>
<div class="nc-tbl-title flex-1">
<GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
</div>
<a-dropdown
v-if="!isSharedBase && !isLocked && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"

44
packages/nc-gui-v2/components/general/TruncateText.vue

@ -0,0 +1,44 @@
<script lang="ts" setup>
interface Props {
placement?:
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'leftTop'
| 'leftBottom'
| 'rightTop'
| 'rightBottom'
length?: number
}
const props = withDefaults(defineProps<Props>(), {
placement: 'bottom',
length: 20,
})
const text = ref()
const enableTooltip = computed(() => text?.value?.textContent.length > props.length)
const shortName = computed(() =>
text?.value?.textContent.length > props.length
? `${text?.value?.textContent.substr(0, props.length - 3)}...`
: text?.value?.textContent,
)
</script>
<template>
<a-tooltip v-if="enableTooltip" :placement="props.placement">
<template #title>
<slot></slot>
</template>
<div>{{ shortName }}</div>
</a-tooltip>
<div v-else><slot></slot></div>
<div ref="text" class="hidden"><slot></slot></div>
</template>
<style scoped></style>

4
packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@ -89,7 +89,9 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
class="nc-view-icon group-hover:hidden"
:style="{ color: viewIcons[selectedView?.type].color }"
/>
<span class="!text-sm font-weight-normal">{{ selectedView?.title }}</span>
<span class="!text-sm font-weight-normal"
><GeneralTruncateText>{{ selectedView?.title }}</GeneralTruncateText></span
>
<component :is="Icon" class="text-gray-500" :class="`nc-icon-${selectedView?.lock_type}`" />
<MdiMenuDown class="text-grey" />
</div>

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

@ -215,7 +215,9 @@ const copyAuthToken = async () => {
<MdiFolder class="group-hover:text-accent text-xl" />
<div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
<div class="text-lg group-hover:(!text-primary) font-semibold">
<GeneralTruncateText>{{ project.title }}</GeneralTruncateText>
</div>
<div v-if="!isSharedBase" class="flex items-center gap-1">
<div class="group-hover:(!text-primary)">ID:</div>

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

@ -48,10 +48,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
<a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
<a-tab-pane v-for="(tab, i) of tabs" :key="i">
<template #tab>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 max-w-[110px]">
<div class="flex items-center">
<component :is="icon(tab)" class="text-sm" />
{{ tab.title }}
</div>
<a-tooltip v-if="tab.title?.length > 12" placement="bottom">
<div class="truncate">{{ tab.title }}</div>
<template #title>
<div>{{ tab.title }}</div>
</template>
</a-tooltip>
<div v-else>{{ tab.title }}</div>
</div>
</template>
</a-tab-pane>
@ -126,4 +133,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
:deep(.ant-menu-submenu::after) {
@apply !border-none;
}
:deep(.ant-tabs-tab-remove) {
@apply mt-[3px];
}
</style>

Loading…
Cancel
Save