[GSoC2024] Add tooltip to long project card name (#7550)

cvat-ai · Mar 14, 2024 · f22322f · f22322f
1 parent ae7999b
commit f22322f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/changelog.d/20240313_200940_syedbarimnajan_long_cardname_tooltip.md b/changelog.d/20240313_200940_syedbarimnajan_long_cardname_tooltip.md
@@ -0,0 +1,4 @@
+### Added
+
+- Tooltips for long names on cards (projects, tasks, cloud storages, and models)
+  (<https://github.com/opencv/cvat/pull/7550>)
diff --git a/cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx b/cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx
@@ -95,7 +95,7 @@ export default function CloudStorageItemComponent(props: Props): JSX.Element {
         >
             <Meta
                 title={(
-                    <Paragraph>
+                    <Paragraph ellipsis={{ tooltip: displayName }}>
                         <Text strong>{`#${id}: `}</Text>
                         <Text>{displayName}</Text>
                     </Paragraph>

diff --git a/cvat-ui/src/components/models-page/deployed-model-item.tsx b/cvat-ui/src/components/models-page/deployed-model-item.tsx
@@ -166,9 +166,9 @@ export default function DeployedModelItem(props: Props): JSX.Element {
             >
                 <Meta
                     title={(
-                        <span onClick={onOpenModel} className='cvat-models-item-title' aria-hidden>
+                        <Text ellipsis={{ tooltip: model.name }} onClick={onOpenModel} className='cvat-models-item-title' aria-hidden>
                             {model.name}
-                        </span>
+                        </Text>
                     )}
                     description={(
                         <div className='cvat-models-item-description'>

diff --git a/cvat-ui/src/components/projects-page/project-item.tsx b/cvat-ui/src/components/projects-page/project-item.tsx
@@ -86,9 +86,14 @@ export default function ProjectItemComponent(props: Props): JSX.Element {
             >
                 <Meta
                     title={(
-                        <span onClick={onOpenProject} className='cvat-projects-project-item-title' aria-hidden>
+                        <Text
+                            ellipsis={{ tooltip: instance.name }}
+                            onClick={onOpenProject}
+                            className='cvat-projects-project-item-title'
+                            aria-hidden
+                        >
                             {instance.name}
-                        </span>
+                        </Text>
                     )}
                     description={(
                         <div className='cvat-projects-project-item-description'>

diff --git a/cvat-ui/src/components/tasks-page/task-item.tsx b/cvat-ui/src/components/tasks-page/task-item.tsx
@@ -14,7 +14,6 @@ import Dropdown from 'antd/lib/dropdown';
 import Progress from 'antd/lib/progress';
 import Badge from 'antd/lib/badge';
 import moment from 'moment';
-
 import { Task, RQStatus } from 'cvat-core-wrapper';
 import ActionsMenuContainer from 'containers/actions-menu/actions-menu';
 import Preview from 'components/common/preview';
@@ -116,14 +115,13 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
         const updated = moment(taskInstance.updatedDate).fromNow();
         const created = moment(taskInstance.createdDate).format('MMMM Do YYYY');
 
-        // Get and truncate a task name
-        const name = `${taskInstance.name.substring(0, 70)}${taskInstance.name.length > 70 ? '...' : ''}`;
-
         return (
             <Col span={10} className='cvat-task-item-description'>
-                <Text strong type='secondary' className='cvat-item-task-id'>{`#${id}: `}</Text>
-                <Text strong className='cvat-item-task-name'>
-                    {name}
+                <Text ellipsis={{ tooltip: taskInstance.name }}>
+                    <Text strong type='secondary' className='cvat-item-task-id'>{`#${id}: `}</Text>
+                    <Text strong className='cvat-item-task-name'>
+                        {taskInstance.name}
+                    </Text>
                 </Text>
                 <br />
                 {owner && (