fix : added showOnlyOnTruncate prop to tooltip

1 year ago · 9a52a58c20
15 changed files with 40 additions and 23 deletions
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@ -429,6 +429,7 @@ const projectDelete = () => {
            class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
            :class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }"
+            :showOnTruncateOnly="true"
          >
            <template #title>{{ base.title }}</template>
            <span @click="onProjectClick(base)">
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@ -231,7 +231,10 @@ const isTableOpened = computed(() => {
          </div>
        </div>
      </div>
-      <NcTooltip class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none">
+      <NcTooltip
+        class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none"
+        :showOnTruncateOnly="true"
+      >
        <template #title>{{ table.title }}</template>
        <span
          :class="{
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@ -232,7 +232,7 @@ watch(isDropdownOpen, async () => {
        @blur="onRename"
        @keydown.stop="onKeyDown($event)"
      />
-      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full">
+      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full" :showOnTruncateOnly="true">
        <template #title> {{ vModel.alias || vModel.title }}</template>
        <div
          data-testid="sidebar-view-title"
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@ -147,7 +147,7 @@ const toggleSelectAll = (role: Role) => {
 <template>
  <div class="flex flex-row w-full items-center justify-center">
    <div class="flex flex-col w-[900px]">
-      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate">
+      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate" :showOnTruncateOnly="true">
        <template #title>{{ base.title }}</template>
        <span> UI ACL : {{ base.title }} </span>
      </NcTooltip>
@ -211,7 +211,7 @@ const toggleSelectAll = (role: Role) => {
                <div class="min-w-5 flex items-center justify-center">
                  <GeneralTableIcon :meta="{ meta: record.table_meta, type: record.ptype }" class="text-gray-500" />
                </div>
-                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" :showOnTruncateOnly="true">
                  <template #title>{{ record._ptn }}</template>
                  <span>{{ record._ptn }}</span>
                </NcTooltip>
@ -223,7 +223,7 @@ const toggleSelectAll = (role: Role) => {
                <div class="min-w-5 flex items-center justify-center">
                  <GeneralViewIcon :meta="record" class="text-gray-500"></GeneralViewIcon>
                </div>
-                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" :showOnTruncateOnly="true">
                  <template #title>{{ record.title }}</template>
                  <span>{{ record.title }}</span>
                </NcTooltip>
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@ -11,6 +11,7 @@ interface Props {
  // force disable tooltip
  disabled?: boolean
  placement?: TooltipPlacement | undefined
+  showOnTruncateOnly?: boolean
  hideOnClick?: boolean
  overlayClassName?: string
 }
@ -20,6 +21,7 @@ const props = defineProps<Props>()
 const modifierKey = computed(() => props.modifierKey)
 const tooltipStyle = computed(() => props.tooltipStyle)
 const disabled = computed(() => props.disabled)
+const showOnTruncateOnly = computed(() => props?.showOnTruncateOnly)
 const hideOnClick = computed(() => props.hideOnClick)
 const placement = computed(() => props.placement ?? 'top')

@ -65,9 +67,16 @@ onKeyStroke(
 )

 watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => {
-  const targetElement = el?.value
-  const isElementTruncated = targetElement?.scrollWidth > targetElement?.clientWidth
-  if (!hovering || isDisabled || !isElementTruncated) {
+  if (showOnTruncateOnly.value) {
+    const targetElement = el?.value
+    const isElementTruncated = targetElement?.scrollWidth > targetElement?.clientWidth
+    if (!isElementTruncated) {
+      showTooltip.value = false
+      return
+    }
+  }
+
+  if (!hovering || isDisabled) {
    showTooltip.value = false
    return
  }
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@ -75,7 +75,7 @@ watch(
        <GeneralOpenLeftSidebarBtn />
        <div class="flex flex-row items-center h-full gap-x-2.5">
          <GeneralProjectIcon :type="openedProject?.type" />
-          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150">
+          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" :showOnTruncateOnly="true">
            <template #title> {{ openedProject?.title }}</template>
            <span class="truncate">
              {{ openedProject?.title }}
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@ -82,7 +82,7 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
              <div class="min-w-5 flex items-center justify-center">
                <GeneralTableIcon :meta="table" class="text-gray-500" />
              </div>
-              <NcTooltip class="flex-1 truncate">
+              <NcTooltip class="flex-1 truncate" :showOnTruncateOnly="true">
                <template #title>{{ table.title }}</template>
                <span>{{ table.title }}</span>
              </NcTooltip>
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@ -819,6 +819,7 @@ const onFieldOptionUpdate = () => {
                        'text-brand-500': compareCols(field, activeField),
                      }"
                      class="truncate flex-1"
+                      :showOnTruncateOnly="true"
                    >
                      <template #title> {{ fieldState(field)?.title || field.title }} </template>
                      <span>
@ -978,6 +979,7 @@ const onFieldOptionUpdate = () => {
                      :class="{
                        'text-brand-500': compareCols(displayColumn, activeField),
                      }"
+                      :showOnTruncateOnly="true"
                    >
                      <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
                      <span>
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@ -99,6 +99,7 @@ const onClick = (e: Event) => {
      }"
      class="name pl-1"
      placement="bottom"
+      :showOnTruncateOnly="true"
    >
      <template #title> {{ column.title }} </template>

--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@ -154,7 +154,7 @@ const openDropDown = (e: Event) => {
  >
    <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />

-    <NcTooltip placement="bottom" class="truncate name pl-1">
+    <NcTooltip placement="bottom" class="truncate name pl-1" :showOnTruncateOnly="true">
      <template #title>
        {{ tooltipMsg }}
      </template>
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@ -104,11 +104,11 @@ const onArrowUp = () => {
        @click="onClick(option)"
      >
        <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate">
+        <NcTooltip class="truncate" :showOnTruncateOnly="true">
          <template #title> {{ option.title }}</template>
-          <span>
+          <template #default>
            {{ option.title }}
-          </span>
+          </template>
        </NcTooltip>
      </div>
    </div>
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@ -85,11 +85,12 @@ if (!localValue.value && allowEmpty !== true) {
        <NcTooltip
          :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
          class="max-w-[15rem] truncate select-none"
+          :showOnTruncateOnly="true"
        >
          <template #title> {{ option.label }}</template>
-          <span>
+          <template #default>
            {{ option.label }}
-          </span>
+          </template>
        </NcTooltip>
      </div>
    </a-select-option>
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@ -380,11 +380,11 @@ useMenuCloseOnEsc(open)
                    "
                  >
                    <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                    <NcTooltip :disabled="field.title.length < 30" class="flex-1 px-1 truncate">
+                    <NcTooltip :showOnTruncateOnly="true" class="flex-1 px-1 truncate">
                      <template #title>
                        {{ field.title }}
                      </template>
-                      <span>{{ field.title }}</span>
+                      <template #default>{{ field.title }}</template>
                    </NcTooltip>

                    <NcSwitch v-e="['a:fields:show-hide']" :checked="field.show" :disabled="field.isViewEssentialField" />
@ -406,9 +406,9 @@ useMenuCloseOnEsc(open)
                  @click.stop
                >
                  <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-                  <NcTooltip :disabled="filteredFieldList?.[0]?.title?.length < 30" class="px-1 flex-1 truncate">
+                  <NcTooltip :showOnTruncateOnly="true" class="px-1 flex-1 truncate">
                    <template #title>{{ filteredFieldList[0].title }}</template>
-                    <span>{{ filteredFieldList[0].title }}</span>
+                    <template #default>{{ filteredFieldList[0].title }}</template>
                  </NcTooltip>

                  <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@ -182,7 +182,7 @@ function openDeleteDialog() {
        'text-gray-800 font-medium': !activeView?.is_default,
      }"
    >
-      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit">
+      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit" :showOnTruncateOnly="true">
        <template #title>{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} </template>
        <span
          :class="{
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@ -114,9 +114,9 @@ watch(columns, () => {
        <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
          <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
            <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
-            <NcTooltip class="truncate" placement="top">
+            <NcTooltip class="truncate" placement="top" :showOnTruncateOnly="true">
              <template #title>{{ op.label }}</template>
-              <span>{{ op.label }}</span>
+              <template #default>{{ op.label }}</template>
            </NcTooltip>
          </div>
        </a-select-option>