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: 8 additions & 1 deletion cvat-ui/src/components/projects-page/project-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Meta from 'antd/lib/card/Meta';
import Dropdown from 'antd/lib/dropdown';
import Button from 'antd/lib/button';
import Badge from 'antd/lib/badge';
import Tooltip from 'antd/lib/tooltip';
import { MoreOutlined } from '@ant-design/icons';

import { CombinedState, Project } from 'reducers';
Expand Down Expand Up @@ -85,7 +86,13 @@ export default function ProjectItemComponent(props: Props): JSX.Element {
className='cvat-projects-project-item-card'
>
<Meta
title={(
title={instance.name.length >= 21 ? (
<Tooltip title={instance.name} placement='topLeft'>
<span onClick={onOpenProject} className='cvat-projects-project-item-title' aria-hidden>
{instance.name}
</span>
</Tooltip>
) : (
<span onClick={onOpenProject} className='cvat-projects-project-item-title' aria-hidden>
{instance.name}
</span>
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