Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
9 changes: 7 additions & 2 deletions cvat-ui/src/components/projects-page/project-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down
20 changes: 16 additions & 4 deletions cvat-ui/src/components/tasks-page/task-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { LoadingOutlined, MoreOutlined } from '@ant-design/icons';
import Dropdown from 'antd/lib/dropdown';
import Progress from 'antd/lib/progress';
import Badge from 'antd/lib/badge';
import Tooltip from 'antd/lib/tooltip';
import moment from 'moment';

import { Task, RQStatus } from 'cvat-core-wrapper';
Expand Down Expand Up @@ -121,10 +122,21 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone

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>
{taskInstance.name.length > 70 ? (
<Tooltip title={taskInstance.name} placement='topLeft'>
<Text strong type='secondary' className='cvat-item-task-id'>{`#${id}: `}</Text>
<Text strong className='cvat-item-task-name'>
{name}
</Text>
</Tooltip>
) : (
<>
<Text strong type='secondary' className='cvat-item-task-id'>{`#${id}: `}</Text>
<Text strong className='cvat-item-task-name'>
{name}
</Text>
</>
)}
<br />
{owner && (
<>
Expand Down