From 965c683ff4241dc9f8815a3467dfd934024ba034 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 5 Sep 2022 20:21:29 +0300
Subject: [PATCH 1/2] feat: implement TruncateText component

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/dashboard/TreeView.vue         |  4 +-
 .../components/general/TruncateText.vue       | 44 +++++++++++++++++++
 .../smartsheet-toolbar/ViewActions.vue        |  4 +-
 .../pages/[projectType]/[projectId]/index.vue |  4 +-
 .../[projectType]/[projectId]/index/index.vue |  2 +-
 5 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/general/TruncateText.vue

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 4489dd6e67..2f16905f33 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/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'))"
diff --git a/packages/nc-gui-v2/components/general/TruncateText.vue b/packages/nc-gui-v2/components/general/TruncateText.vue
new file mode 100644
index 0000000000..c5b95f6fe9
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
index ed91e49878..71c8fc47ab 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index f8714b8781..e30e116bbf 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index c8f294c591..783e664f07 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -51,7 +51,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
               <div class="flex items-center gap-2">
                 <component :is="icon(tab)" class="text-sm" />
 
-                {{ tab.title }}
+                <GeneralTruncateText>{{ tab.title }}</GeneralTruncateText>
               </div>
             </template>
           </a-tab-pane>

From 0fff778729463ebaa2f2255b9131e682eb964b9f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 5 Sep 2022 22:37:52 +0300
Subject: [PATCH 2/2] fix: tab title truncation

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../[projectType]/[projectId]/index/index.vue  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 783e664f07..b40b82aee6 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/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">
-                <component :is="icon(tab)" class="text-sm" />
-
-                <GeneralTruncateText>{{ tab.title }}</GeneralTruncateText>
+              <div class="flex items-center gap-2 max-w-[110px]">
+                <div class="flex items-center">
+                  <component :is="icon(tab)" class="text-sm" />
+                </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>