wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Shared tooltip component with common settings [Refactoring only] (#2783)

Browse Source 
* Popover trigger on click, shared tooltip component

* Aborted trigger

* Updated version
main
Boris Sekachev 5 years ago committed by GitHub
parent f49eec7fba
commit 9a56e7edd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 400 additions and 347 deletions
Show Stats Download Patch File Download Diff File

8
cvat-ui/src/components/annotation-page/annotations-filters-input.tsx
Unescape Escape View File

@ -8,7 +8,6 @@ import Select, { SelectValue, LabeledValue } from 'antd/lib/select';
import Title from 'antd/lib/typography/Title';
import Text from 'antd/lib/typography/Text';
import Paragraph from 'antd/lib/typography/Paragraph';
import Tooltip from 'antd/lib/tooltip';
import Modal from 'antd/lib/modal';
import { FilterOutlined } from '@ant-design/icons';
@ -16,6 +15,7 @@ import {
changeAnnotationsFilters as changeAnnotationsFiltersAction,
fetchAnnotationsAsync,
} from 'actions/annotation-actions';
import CVATTooltip from 'components/common/cvat-tooltip';
import { CombinedState } from 'reducers/interfaces';
interface StateToProps {
@ -53,7 +53,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
dispatch(fetchAnnotationsAsync());
} else if (
Array.isArray(value) &&
value.every((element: string | number | LabeledValue): boolean => typeof element === 'string')
!value.some((element: string | number | LabeledValue): boolean => typeof element !== 'string')
) {
dispatch(changeAnnotationsFiltersAction(value as string[]));
dispatch(fetchAnnotationsAsync());
@ -134,7 +134,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
placeholder={
underCursor ? (
<>
<Tooltip title='Click to open help' mouseLeaveDelay={0}>
<CVATTooltip title='Click to open help'>
<FilterOutlined
style={{ pointerEvents: 'all' }}
onClick={() => {
@ -152,7 +152,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
onMouseEnter={() => setDropdownVisible(false)}
onMouseLeave={() => setDropdownVisible(true)}
/>
</Tooltip>
</CVATTooltip>
</>
) : (
<>

29
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import Button from 'antd/lib/button';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
currentAttribute: string;
currentIndex: number;
@ -24,20 +25,28 @@ function AttributeSwitcher(props: Props): JSX.Element {
const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
return (
<div className='cvat-attribute-annotation-sidebar-attribute-switcher'>
<Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`} mouseLeaveDelay={0}>
<Button className='cvat-attribute-annotation-sidebar-attribute-switcher-left' disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
<CVATTooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`}>
<Button
className='cvat-attribute-annotation-sidebar-attribute-switcher-left'
disabled={attributesCount <= 1}
onClick={() => nextAttribute(-1)}
>
<LeftOutlined />
</Button>
</Tooltip>
<Tooltip title={title} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={title}>
<Text className='cvat-text'>{currentAttribute}</Text>
<Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
</Tooltip>
<Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`} mouseLeaveDelay={0}>
<Button className='cvat-attribute-annotation-sidebar-attribute-switcher-right' disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
</CVATTooltip>
<CVATTooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`}>
<Button
className='cvat-attribute-annotation-sidebar-attribute-switcher-right'
disabled={attributesCount <= 1}
onClick={() => nextAttribute(1)}
>
<RightOutlined />
</Button>
</Tooltip>
</CVATTooltip>
</div>
);
}

29
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import Button from 'antd/lib/button';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
currentLabel: string;
clientID: number;
@ -26,21 +27,29 @@ function ObjectSwitcher(props: Props): JSX.Element {
const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
return (
<div className='cvat-attribute-annotation-sidebar-object-switcher'>
<Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`} mouseLeaveDelay={0}>
<Button className='cvat-attribute-annotation-sidebar-object-switcher-left' disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
<CVATTooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`}>
<Button
className='cvat-attribute-annotation-sidebar-object-switcher-left'
disabled={objectsCount <= 1}
onClick={() => nextObject(-1)}
>
<LeftOutlined />
</Button>
</Tooltip>
<Tooltip title={title} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={title}>
<Text className='cvat-text'>{currentLabel}</Text>
<Text className='cvat-text'>{` ${clientID} `}</Text>
<Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
</Tooltip>
<Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`} mouseLeaveDelay={0}>
<Button className='cvat-attribute-annotation-sidebar-object-switcher-right' disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
</CVATTooltip>
<CVATTooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`}>
<Button
className='cvat-attribute-annotation-sidebar-object-switcher-right'
disabled={objectsCount <= 1}
onClick={() => nextObject(1)}
>
<RightOutlined />
</Button>
</Tooltip>
</CVATTooltip>
</div>
);
}

8
cvat-ui/src/components/annotation-page/canvas/canvas-point-context-menu.tsx
Unescape Escape View File

@ -1,16 +1,16 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import { DeleteOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { CombinedState, ContextMenuType } from 'reducers/interfaces';
import { updateAnnotationsAsync, updateCanvasContextMenu } from 'actions/annotation-actions';
import CVATTooltip from 'components/common/cvat-tooltip';
interface StateToProps {
activatedState: any | null;
@ -103,11 +103,11 @@ function CanvasPointContextMenu(props: Props): React.ReactPortal | null {
return visible && contextMenuFor && type === ContextMenuType.CANVAS_SHAPE_POINT ?
ReactDOM.createPortal(
<div className='cvat-canvas-point-context-menu' style={{ top, left }}>
<Tooltip title='Delete point [Alt + dblclick]' mouseLeaveDelay={0}>
<CVATTooltip title='Delete point [Alt + dblclick]'>
<Button type='link' icon={<DeleteOutlined />} onClick={onPointDelete}>
Delete point
</Button>
</Tooltip>
</CVATTooltip>
{contextMenuFor && contextMenuFor.shapeType === 'polygon' && (
<Button type='link' icon={<EnvironmentOutlined />} onClick={onSetStartPoint}>
Set start point

11
cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx
Unescape Escape View File

@ -1,13 +1,12 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import Tooltip from 'antd/lib/tooltip';
import Layout from 'antd/lib/layout';
import Slider from 'antd/lib/slider';
import { PlusCircleOutlined } from '@ant-design/icons';
import {
ColorBy, GridColor, ObjectType, ContextMenuType, Workspace, ShapeType,
@ -16,7 +15,7 @@ import { LogType } from 'cvat-logger';
import { Canvas } from 'cvat-canvas-wrapper';
import getCore from 'cvat-core-wrapper';
import consts from 'consts';
import { PlusCircleOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
const cvat = getCore();
@ -908,9 +907,9 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
defaultValue={0}
onChange={(value: number): void => onSwitchZLayer(value as number)}
/>
<Tooltip title={`Add new layer ${maxZLayer + 1} and switch to it`} mouseLeaveDelay={0}>
<CVATTooltip title={`Add new layer ${maxZLayer + 1} and switch to it`}>
<PlusCircleOutlined onClick={onAddZLayer} />
</Tooltip>
</CVATTooltip>
</div>
</Layout.Content>
);

8
cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper';
import { RectangleIcon } from 'icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -20,7 +20,7 @@ function ResizeControl(props: Props): JSX.Element {
const { activeControl, canvasInstance, selectIssuePosition } = props;
return (
<Tooltip title='Open an issue' placement='right' mouseLeaveDelay={0}>
<CVATTooltip title='Open an issue' placement='right'>
<Icon
component={RectangleIcon}
className={
@ -39,7 +39,7 @@ function ResizeControl(props: Props): JSX.Element {
}
}}
/>
</Tooltip>
</CVATTooltip>
);
}

9
cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React, { ReactPortal, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Tag from 'antd/lib/tag';
import Tooltip from 'antd/lib/tooltip';
import { CheckOutlined, CloseCircleOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
id: number;
message: string;
@ -34,7 +35,7 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
const elementID = `cvat-hidden-issue-label-${id}`;
return ReactDOM.createPortal(
<Tooltip title={message}>
<CVATTooltip title={message}>
<Tag
id={elementID}
onClick={onClick}
@ -50,7 +51,7 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
)}
{message}
</Tag>
</Tooltip>,
</CVATTooltip>,
window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement,
);
}

12
cvat-ui/src/components/annotation-page/review/issue-dialog.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -9,10 +9,10 @@ import { CloseOutlined } from '@ant-design/icons';
import Comment from 'antd/lib/comment';
import Text from 'antd/lib/typography/Text';
import Title from 'antd/lib/typography/Title';
import Tooltip from 'antd/lib/tooltip';
import Button from 'antd/lib/button';
import Input from 'antd/lib/input';
import moment from 'moment';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
id: number;
@ -67,9 +67,9 @@ export default function IssueDialog(props: Props): JSX.Element {
author={<Text strong>{_comment.author ? _comment.author.username : 'Unknown'}</Text>}
content={<p>{_comment.message}</p>}
datetime={(
<Tooltip title={created.format('MMMM Do YYYY')}>
<CVATTooltip title={created.format('MMMM Do YYYY')}>
<span>{diff}</span>
</Tooltip>
</CVATTooltip>
)}
/>
);
@ -93,9 +93,9 @@ export default function IssueDialog(props: Props): JSX.Element {
<Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title>
</Col>
<Col>
<Tooltip title='Collapse the chat'>
<CVATTooltip title='Collapse the chat'>
<CloseOutlined onClick={collapse} />
</Tooltip>
</CVATTooltip>
</Col>
</Row>
<Row className='cvat-issue-dialog-chat' justify='start'>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { CursorIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -20,7 +20,7 @@ function CursorControl(props: Props): JSX.Element {
const { canvasInstance, activeControl, cursorShortkey } = props;
return (
<Tooltip title={`Cursor ${cursorShortkey}`} placement='right' mouseLeaveDelay={0}>
<CVATTooltip title={`Cursor ${cursorShortkey}`} placement='right'>
<Icon
component={CursorIcon}
className={
@ -30,7 +30,7 @@ function CursorControl(props: Props): JSX.Element {
}
onClick={activeControl !== ActiveControl.CURSOR ? (): void => canvasInstance.cancel() : undefined}
/>
</Tooltip>
</CVATTooltip>
);
}

20
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -7,13 +7,13 @@ import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button';
import InputNumber from 'antd/lib/input-number';
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text';
import { RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper';
import { ShapeType } from 'reducers/interfaces';
import { clamp } from 'utils/math';
import LabelSelector from 'components/label-selector/label-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
shapeType: ShapeType;
@ -129,11 +129,11 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
</Col>
<Col span={10}>
<InputNumber
onChange={(value: number | undefined | string) => {
if (typeof value !== 'undefined') {
onChangePoints(Math.floor(clamp(+value, minimumPoints, Number.MAX_SAFE_INTEGER)));
} else if (!value) {
onChange={(value: number | undefined | string | null) => {
if (typeof value === 'undefined' || value === null) {
onChangePoints(undefined);
} else {
onChangePoints(Math.floor(clamp(+value, minimumPoints, Number.MAX_SAFE_INTEGER)));
}
}}
className='cvat-draw-shape-popover-points-selector'
@ -146,14 +146,14 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
)}
<Row justify='space-around'>
<Col span={12}>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}>
<CVATTooltip title={`Press ${repeatShapeShortcut} to draw again`}>
<Button onClick={onDrawShape}>Shape</Button>
</Tooltip>
</CVATTooltip>
</Col>
<Col span={12}>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}>
<CVATTooltip title={`Press ${repeatShapeShortcut} to draw again`}>
<Button onClick={onDrawTrack}>Track</Button>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</div>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx
Unescape Escape View File

@ -1,13 +1,13 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { FitIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -17,9 +17,9 @@ function FitControl(props: Props): JSX.Element {
const { canvasInstance } = props;
return (
<Tooltip title='Fit the image [Double Click]' placement='right' mouseLeaveDelay={0}>
<CVATTooltip title='Fit the image [Double Click]' placement='right'>
<Icon className='cvat-fit-control' component={FitIcon} onClick={(): void => canvasInstance.fit()} />
</Tooltip>
</CVATTooltip>
);
}

51
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from '@ant-design/icons';
import { GroupIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -19,30 +19,37 @@ interface Props {
}
function GroupControl(props: Props): JSX.Element {
const { switchGroupShortcut, resetGroupShortcut, activeControl, canvasInstance, groupObjects } = props;
const {
switchGroupShortcut, resetGroupShortcut, activeControl, canvasInstance, groupObjects,
} = props;
const dynamicIconProps =
activeControl === ActiveControl.GROUP ? {
className: 'cvat-group-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.group({ enabled: false });
groupObjects(false);
},
} : {
className: 'cvat-group-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.group({ enabled: true });
groupObjects(true);
},
};
const title =
`Group shapes/tracks ${switchGroupShortcut}.` + ` Select and press ${resetGroupShortcut} to reset a group`;
activeControl === ActiveControl.GROUP ?
{
className: 'cvat-group-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.group({ enabled: false });
groupObjects(false);
},
} :
{
className: 'cvat-group-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.group({ enabled: true });
groupObjects(true);
},
};
const title = [
`Group shapes/tracks ${switchGroupShortcut}. `,
`Select and press ${resetGroupShortcut} to reset a group.`,
].join(' ');
return (
<Tooltip title={title} placement='right' mouseLeaveDelay={0}>
<CVATTooltip title={title} placement='right'>
<Icon {...dynamicIconProps} component={GroupIcon} />
</Tooltip>
</CVATTooltip>
);
}

2
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT

42
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from '@ant-design/icons';
import { MergeIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -18,28 +18,32 @@ interface Props {
}
function MergeControl(props: Props): JSX.Element {
const { switchMergeShortcut, activeControl, canvasInstance, mergeObjects } = props;
const {
switchMergeShortcut, activeControl, canvasInstance, mergeObjects,
} = props;
const dynamicIconProps =
activeControl === ActiveControl.MERGE ? {
className: 'cvat-merge-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.merge({ enabled: false });
mergeObjects(false);
},
} : {
className: 'cvat-merge-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.merge({ enabled: true });
mergeObjects(true);
},
};
activeControl === ActiveControl.MERGE ?
{
className: 'cvat-merge-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.merge({ enabled: false });
mergeObjects(false);
},
} :
{
className: 'cvat-merge-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.merge({ enabled: true });
mergeObjects(true);
},
};
return (
<Tooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right' mouseLeaveDelay={0}>
<CVATTooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right'>
<Icon {...dynamicIconProps} component={MergeIcon} />
</Tooltip>
</CVATTooltip>
);
}

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { MoveIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -19,7 +19,7 @@ function MoveControl(props: Props): JSX.Element {
const { canvasInstance, activeControl } = props;
return (
<Tooltip title='Move the image' placement='right' mouseLeaveDelay={0}>
<CVATTooltip title='Move the image' placement='right'>
<Icon
component={MoveIcon}
className={
@ -36,7 +36,7 @@ function MoveControl(props: Props): JSX.Element {
}
}}
/>
</Tooltip>
</CVATTooltip>
);
}

6
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx
Unescape Escape View File

@ -5,7 +5,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { Row, Col } from 'antd/lib/grid';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover';
import Icon, { ScissorOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text';
@ -29,6 +28,7 @@ import {
createAnnotationsAsync,
} from 'actions/annotation-actions';
import LabelSelector from 'components/label-selector/label-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
import withVisibilityHandling from './handle-popover-visibility';
interface Props {
@ -293,7 +293,7 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
</Row>
<Row justify='start' className='cvat-opencv-drawing-tools'>
<Col>
<Tooltip title='Intelligent scissors' className='cvat-opencv-drawing-tool'>
<CVATTooltip title='Intelligent scissors' className='cvat-opencv-drawing-tool'>
<Button
onClick={() => {
this.activeTool = openCVWrapper.segmentation.intelligentScissorsFactory();
@ -307,7 +307,7 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
>
<ScissorOutlined />
</Button>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ZoomIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -19,7 +19,7 @@ function ResizeControl(props: Props): JSX.Element {
const { activeControl, canvasInstance } = props;
return (
<Tooltip title='Select a region of interest' placement='right' mouseLeaveDelay={0}>
<CVATTooltip title='Select a region of interest' placement='right'>
<Icon
component={ZoomIcon}
className={
@ -36,7 +36,7 @@ function ResizeControl(props: Props): JSX.Element {
}
}}
/>
</Tooltip>
</CVATTooltip>
);
}

19
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
Unescape Escape View File

@ -4,12 +4,11 @@
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover';
import { RotateIcon } from 'icons';
import { Rotation } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import withVisibilityHandling from './handle-popover-visibility';
interface Props {
@ -27,28 +26,20 @@ function RotateControl(props: Props): JSX.Element {
placement='right'
content={(
<>
<Tooltip
title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`}
placement='topRight'
mouseLeaveDelay={0}
>
<CVATTooltip title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`} placement='topRight'>
<Icon
className='cvat-rotate-canvas-controls-left'
onClick={(): void => rotateFrame(Rotation.ANTICLOCKWISE90)}
component={RotateIcon}
/>
</Tooltip>
<Tooltip
title={`Rotate the image clockwise ${clockwiseShortcut}`}
placement='topRight'
mouseLeaveDelay={0}
>
</CVATTooltip>
<CVATTooltip title={`Rotate the image clockwise ${clockwiseShortcut}`} placement='topRight'>
<Icon
className='cvat-rotate-canvas-controls-right'
onClick={(): void => rotateFrame(Rotation.CLOCKWISE90)}
component={RotateIcon}
/>
</Tooltip>
</CVATTooltip>
</>
)}
trigger='hover'

9
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text';
import LabelSelector from 'components/label-selector/label-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
labels: any[];
@ -48,9 +49,9 @@ function SetupTagPopover(props: Props): JSX.Element {
</Row>
<Row justify='space-around'>
<Col span={24}>
<Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}>
<CVATTooltip title={`Press ${repeatShapeShortcut} to add a tag again`}>
<Button onClick={() => onSetup(selectedLabelID)}>Tag</Button>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</div>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from '@ant-design/icons';
import { SplitIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -41,9 +41,9 @@ function SplitControl(props: Props): JSX.Element {
};
return (
<Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right' mouseLeaveDelay={0}>
<CVATTooltip title={`Split a track ${switchSplitShortcut}`} placement='right'>
<Icon {...dynamicIconProps} component={SplitIcon} />
</Tooltip>
</CVATTooltip>
);
}

8
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React, { useState } from 'react';
@ -9,9 +9,9 @@ import Button from 'antd/lib/button';
import Popover from 'antd/lib/popover';
import Text from 'antd/lib/typography/Text';
import { SketchPicker } from 'react-color';
import Tooltip from 'antd/lib/tooltip';
import getCore from 'cvat-core-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
const core = getCore();
@ -108,7 +108,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
<Text strong>Select color</Text>
</Col>
<Col span={4}>
<Tooltip title='Cancel'>
<CVATTooltip title='Cancel'>
<Button
type='link'
onClick={() => {
@ -117,7 +117,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
>
<CloseOutlined />
</Button>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
)}

14
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
Unescape Escape View File

@ -8,12 +8,12 @@ import { CombinedState } from 'reducers/interfaces';
import {
LeftOutlined, RightOutlined, EyeInvisibleFilled, EyeOutlined,
} from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Alert from 'antd/lib/alert';
import { Row, Col } from 'antd/lib/grid';
import { changeFrameAsync } from 'actions/annotation-actions';
import { reviewActions } from 'actions/review-actions';
import CVATTooltip from 'components/common/cvat-tooltip';
export default function LabelsListComponent(): JSX.Element {
const dispatch = useDispatch();
@ -54,17 +54,17 @@ export default function LabelsListComponent(): JSX.Element {
<div className='cvat-objects-sidebar-issues-list-header'>
<Row justify='start' align='middle'>
<Col>
<Tooltip title='Find the previous frame with issues'>
<CVATTooltip title='Find the previous frame with issues'>
<LeftOutlined className='cvat-issues-sidebar-previous-frame' {...dinamicLeftProps} />
</Tooltip>
</CVATTooltip>
</Col>
<Col offset={1}>
<Tooltip title='Find the next frame with issues'>
<CVATTooltip title='Find the next frame with issues'>
<RightOutlined className='cvat-issues-sidebar-next-frame' {...dinamicRightProps} />
</Tooltip>
</CVATTooltip>
</Col>
<Col offset={3}>
<Tooltip title='Show/hide all the issues'>
<CVATTooltip title='Show/hide all the issues'>
{issuesHidden ? (
<EyeInvisibleFilled
className='cvat-issues-sidebar-hidden-issues'
@ -76,7 +76,7 @@ export default function LabelsListComponent(): JSX.Element {
onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(true))}
/>
)}
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</div>

8
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -7,9 +7,9 @@ import { Row, Col } from 'antd/lib/grid';
import { MoreOutlined } from '@ant-design/icons';
import Dropdown from 'antd/lib/dropdown';
import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import LabelSelector from 'components/label-selector/label-selector';
import ItemMenu from './object-item-menu';
@ -103,7 +103,7 @@ function ItemTopComponent(props: Props): JSX.Element {
</Text>
</Col>
<Col span={12}>
<Tooltip title='Change current label' mouseLeaveDelay={0}>
<CVATTooltip title='Change current label'>
<LabelSelector
disabled={readonly}
size='small'
@ -112,7 +112,7 @@ function ItemTopComponent(props: Props): JSX.Element {
onChange={changeLabel}
className='cvat-objects-sidebar-state-item-label-selector'
/>
</Tooltip>
</CVATTooltip>
</Col>
<Col span={2}>
<Dropdown

36
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -17,8 +17,8 @@ import Icon, {
StarOutlined,
EyeOutlined,
} from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import CVATTooltip from 'components/common/cvat-tooltip';
import { ObjectType, ShapeType } from 'reducers/interfaces';
import {
ObjectOutsideIcon, FirstIcon, LastIcon, PreviousIcon, NextIcon,
@ -107,9 +107,9 @@ function NavigateFirstKeyframe(props: Props): JSX.Element {
function NavigatePrevKeyframe(props: Props): JSX.Element {
const { prevKeyFrameShortcut, navigatePrevKeyframe } = props;
return navigatePrevKeyframe ? (
<Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`}>
<Icon {...classes.prevKeyFrame} component={PreviousIcon} onClick={navigatePrevKeyframe} />
</Tooltip>
</CVATTooltip>
) : (
<Icon {...classes.prevKeyFrame} component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
);
@ -118,9 +118,9 @@ function NavigatePrevKeyframe(props: Props): JSX.Element {
function NavigateNextKeyframe(props: Props): JSX.Element {
const { navigateNextKeyframe, nextKeyFrameShortcut } = props;
return navigateNextKeyframe ? (
<Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`}>
<Icon {...classes.nextKeyFrame} component={NextIcon} onClick={navigateNextKeyframe} />
</Tooltip>
</CVATTooltip>
) : (
<Icon {...classes.nextKeyFrame} component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
);
@ -140,13 +140,13 @@ function SwitchLock(props: Props): JSX.Element {
locked, switchLockShortcut, lock, unlock,
} = props;
return (
<Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch lock property ${switchLockShortcut}`}>
{locked ? (
<LockFilled {...classes.lock.enabled} onClick={unlock} />
) : (
<UnlockOutlined {...classes.lock.disabled} onClick={lock} />
)}
</Tooltip>
</CVATTooltip>
);
}
@ -155,26 +155,26 @@ function SwitchOccluded(props: Props): JSX.Element {
switchOccludedShortcut, occluded, unsetOccluded, setOccluded,
} = props;
return (
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
{occluded ? (
<TeamOutlined {...classes.occluded.enabled} onClick={unsetOccluded} />
) : (
<UserOutlined {...classes.occluded.disabled} onClick={setOccluded} />
)}
</Tooltip>
</CVATTooltip>
);
}
function SwitchPinned(props: Props): JSX.Element {
const { pinned, pin, unpin } = props;
return (
<Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
<CVATTooltip title='Switch pinned property'>
{pinned ? (
<PushpinFilled {...classes.pinned.enabled} onClick={unpin} />
) : (
<PushpinOutlined {...classes.pinned.disabled} onClick={pin} />
)}
</Tooltip>
</CVATTooltip>
);
}
@ -184,13 +184,13 @@ function SwitchHidden(props: Props): JSX.Element {
} = props;
const hiddenStyle = hiddenDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
return (
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
{hidden ? (
<EyeInvisibleFilled {...classes.hidden.enabled} onClick={show} style={hiddenStyle} />
) : (
<EyeOutlined {...classes.hidden.disabled} onClick={hide} style={hiddenStyle} />
)}
</Tooltip>
</CVATTooltip>
);
}
@ -200,7 +200,7 @@ function SwitchOutside(props: Props): JSX.Element {
} = props;
const outsideStyle = outsideDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
return (
<Tooltip title={`Switch outside property ${switchOutsideShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch outside property ${switchOutsideShortcut}`}>
{outside ? (
<Icon
{...classes.outside.enabled}
@ -211,7 +211,7 @@ function SwitchOutside(props: Props): JSX.Element {
) : (
<SelectOutlined {...classes.outside.disabled} onClick={setOutside} style={outsideStyle} />
)}
</Tooltip>
</CVATTooltip>
);
}
@ -221,13 +221,13 @@ function SwitchKeyframe(props: Props): JSX.Element {
} = props;
const keyframeStyle = keyframeDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
return (
<Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
{keyframe ? (
<StarFilled {...classes.keyframe.enabled} onClick={unsetKeyframe} style={keyframeStyle} />
) : (
<StarOutlined {...classes.keyframe.disabled} onClick={setKeyframe} style={keyframeStyle} />
)}
</Tooltip>
</CVATTooltip>
);
}

33
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -6,7 +6,6 @@ import React from 'react';
import Menu from 'antd/lib/menu';
import Button from 'antd/lib/button';
import Modal from 'antd/lib/modal';
import Tooltip from 'antd/lib/tooltip';
import Icon, {
LinkOutlined,
CopyOutlined,
@ -15,9 +14,11 @@ import Icon, {
RetweetOutlined,
DeleteOutlined,
} from '@ant-design/icons';
import {
BackgroundIcon, ForegroundIcon, ResetPerspectiveIcon, ColorizeIcon,
} from 'icons';
import CVATTooltip from 'components/common/cvat-tooltip';
import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces';
import ColorPicker from './color-picker';
@ -71,11 +72,11 @@ function MakeCopyItem(props: ItemProps): JSX.Element {
const { copyShortcut, pasteShortcut, copy } = toolProps;
return (
<Menu.Item {...rest}>
<Tooltip title={`${copyShortcut} and ${pasteShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${copyShortcut} and ${pasteShortcut}`}>
<Button type='link' icon={<CopyOutlined />} onClick={copy}>
Make a copy
</Button>
</Tooltip>
</CVATTooltip>
</Menu.Item>
);
}
@ -85,11 +86,11 @@ function PropagateItem(props: ItemProps): JSX.Element {
const { propagateShortcut, propagate } = toolProps;
return (
<Menu.Item {...rest}>
<Tooltip title={`${propagateShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${propagateShortcut}`}>
<Button type='link' icon={<BlockOutlined />} onClick={propagate}>
Propagate
</Button>
</Tooltip>
</CVATTooltip>
</Menu.Item>
);
}
@ -99,11 +100,11 @@ function TrackingItem(props: ItemProps): JSX.Element {
const { activateTracking } = toolProps;
return (
<Menu.Item {...rest}>
<Tooltip title='Run tracking with the active tracker' mouseLeaveDelay={0}>
<CVATTooltip title='Run tracking with the active tracker'>
<Button type='link' icon={<GatewayOutlined />} onClick={activateTracking}>
Track
</Button>
</Tooltip>
</CVATTooltip>
</Menu.Item>
);
}
@ -138,12 +139,12 @@ function ToBackgroundItem(props: ItemProps): JSX.Element {
const { toBackgroundShortcut, toBackground } = toolProps;
return (
<Menu.Item {...rest}>
<Tooltip title={`${toBackgroundShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${toBackgroundShortcut}`}>
<Button type='link' onClick={toBackground}>
<Icon component={BackgroundIcon} />
To background
</Button>
</Tooltip>
</CVATTooltip>
</Menu.Item>
);
}
@ -153,12 +154,12 @@ function ToForegroundItem(props: ItemProps): JSX.Element {
const { toForegroundShortcut, toForeground } = toolProps;
return (
<Menu.Item {...rest}>
<Tooltip title={`${toForegroundShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${toForegroundShortcut}`}>
<Button type='link' onClick={toForeground}>
<Icon component={ForegroundIcon} />
To foreground
</Button>
</Tooltip>
</CVATTooltip>
</Menu.Item>
);
}
@ -182,12 +183,12 @@ function SwitchColorItem(props: ItemProps): JSX.Element {
onVisibleChange={changeColorPickerVisible}
resetVisible={false}
>
<Tooltip title={`${changeColorShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${changeColorShortcut}`}>
<Button type='link'>
<Icon component={ColorizeIcon} />
{`Change ${colorBy.toLowerCase()} color`}
</Button>
</Tooltip>
</CVATTooltip>
</ColorPicker>
</Menu.Item>
);
@ -198,7 +199,7 @@ function RemoveItem(props: ItemProps): JSX.Element {
const { removeShortcut, locked, remove } = toolProps;
return (
<Menu.Item {...rest}>
<Tooltip title={`${removeShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${removeShortcut}`}>
<Button
type='link'
icon={<DeleteOutlined />}
@ -219,7 +220,7 @@ function RemoveItem(props: ItemProps): JSX.Element {
>
Remove
</Button>
</Tooltip>
</CVATTooltip>
</Menu.Item>
);
}

16
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -12,8 +12,8 @@ import {
CaretDownOutlined,
CaretUpFilled,
} from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import CVATTooltip from 'components/common/cvat-tooltip';
import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input';
import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector';
import { StatesOrdering } from 'reducers/interfaces';
@ -41,9 +41,9 @@ function LockAllSwitcher(props: Props): JSX.Element {
} = props;
return (
<Col span={2}>
<Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch lock property for all ${switchLockAllShortcut}`}>
{statesLocked ? <LockFilled onClick={unlockAllStates} /> : <UnlockOutlined onClick={lockAllStates} />}
</Tooltip>
</CVATTooltip>
</Col>
);
}
@ -54,13 +54,13 @@ function HideAllSwitcher(props: Props): JSX.Element {
} = props;
return (
<Col span={2}>
<Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`}>
{statesHidden ? (
<EyeInvisibleFilled onClick={showAllStates} />
) : (
<EyeOutlined onClick={hideAllStates} />
)}
</Tooltip>
</CVATTooltip>
</Col>
);
}
@ -69,13 +69,13 @@ function CollapseAllSwitcher(props: Props): JSX.Element {
const { statesCollapsed, expandAllStates, collapseAllStates } = props;
return (
<Col span={2}>
<Tooltip title='Expand/collapse all' mouseLeaveDelay={0}>
<CVATTooltip title='Expand/collapse all'>
{statesCollapsed ? (
<CaretDownOutlined onClick={expandAllStates} />
) : (
<CaretUpFilled onClick={collapseAllStates} />
)}
</Tooltip>
</CVATTooltip>
</Col>
);
}

10
cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/cursor-control.tsx
Unescape Escape View File

@ -4,11 +4,11 @@
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { CursorIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces';
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
canvasInstance: Canvas;
@ -20,15 +20,15 @@ function CursorControl(props: Props): JSX.Element {
const { activeControl, cursorShortkey } = props;
return (
<Tooltip title={`Cursor ${cursorShortkey}`} placement='right' mouseLeaveDelay={0}>
<CVATTooltip title={`Cursor ${cursorShortkey}`} placement='right'>
<Icon
component={CursorIcon}
className={[
'cvat-cursor-control',
activeControl === ActiveControl.CURSOR ? 'cvat-active-canvas-control ' : null,
]}
activeControl === ActiveControl.CURSOR ? 'cvat-active-canvas-control ' : '',
].join(' ')}
/>
</Tooltip>
</CVATTooltip>
);
}

10
cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/move-control.tsx
Unescape Escape View File

@ -4,10 +4,10 @@
import React from 'react';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { MoveIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
interface Props {
@ -19,15 +19,15 @@ function MoveControl(props: Props): JSX.Element {
const { activeControl } = props;
return (
<Tooltip title='Move the image' placement='right' mouseLeaveDelay={0}>
<CVATTooltip title='Move the image' placement='right'>
<Icon
component={MoveIcon}
className={[
'cvat-move-control',
activeControl === ActiveControl.DRAG_CANVAS ? ' cvat-active-canvas-control' : null,
]}
activeControl === ActiveControl.DRAG_CANVAS ? 'cvat-active-canvas-control' : '',
].join(' ')}
/>
</Tooltip>
</CVATTooltip>
);
}

9
cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx
Unescape Escape View File

@ -2,10 +2,11 @@
//
// SPDX-License-Identifier: MIT
import React from 'react';
import CameraIcon from '@ant-design/icons/CameraOutlined';
import Tooltip from 'antd/lib/tooltip';
import CVATTooltip from 'components/common/cvat-tooltip';
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
import React from 'react';
import { ActiveControl } from 'reducers/interfaces';
interface Props {
@ -19,7 +20,7 @@ function PhotoContextControl(props: Props): JSX.Element {
const { activeControl, contextImageHide, hideShowContextImage } = props;
return (
<Tooltip title='Photo context show/hide' placement='right' mouseLeaveDelay={0}>
<CVATTooltip title='Photo context show/hide' placement='right'>
<CameraIcon
className={`cvat-move-control
cvat-control-side-bar-icon-size ${
@ -29,7 +30,7 @@ function PhotoContextControl(props: Props): JSX.Element {
hideShowContextImage(!contextImageHide);
}}
/>
</Tooltip>
</CVATTooltip>
);
}

66
cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import { Col } from 'antd/lib/grid';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover';
import CVATTooltip from 'components/common/cvat-tooltip';
import {
FirstIcon,
BackJumpIcon,
@ -104,18 +104,18 @@ function PlayerButtons(props: Props): JSX.Element {
return (
<Col className='cvat-player-buttons'>
<Tooltip title='Go to the first frame' mouseLeaveDelay={0}>
<CVATTooltip title='Go to the first frame'>
<Icon className='cvat-player-first-button' component={FirstIcon} onClick={onFirstFrame} />
</Tooltip>
<Tooltip title={`Go back with a step ${backwardShortcut}`} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={`Go back with a step ${backwardShortcut}`}>
<Icon className='cvat-player-backward-button' component={BackJumpIcon} onClick={onBackward} />
</Tooltip>
</CVATTooltip>
<Popover
trigger='contextMenu'
placement='bottom'
content={(
<>
<Tooltip title={`${prevRegularText}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${prevRegularText}`}>
<Icon
className='cvat-player-previous-inlined-button'
component={PreviousIcon}
@ -123,8 +123,8 @@ function PlayerButtons(props: Props): JSX.Element {
setPrevButton('regular');
}}
/>
</Tooltip>
<Tooltip title={`${prevFilteredText}`} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={`${prevFilteredText}`}>
<Icon
className='cvat-player-previous-filtered-inlined-button'
component={PreviousFilteredIcon}
@ -132,8 +132,8 @@ function PlayerButtons(props: Props): JSX.Element {
setPrevButton('filtered');
}}
/>
</Tooltip>
<Tooltip title={`${prevEmptyText}`} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={`${prevEmptyText}`}>
<Icon
className='cvat-player-previous-empty-inlined-button'
component={PreviousEmptyIcon}
@ -141,27 +141,23 @@ function PlayerButtons(props: Props): JSX.Element {
setPrevButton('empty');
}}
/>
</Tooltip>
</CVATTooltip>
</>
)}
>
<Tooltip
placement='top'
mouseLeaveDelay={0}
title={`${prevButtonTooltipMessage} ${previousFrameShortcut}`}
>
<CVATTooltip placement='top' title={`${prevButtonTooltipMessage} ${previousFrameShortcut}`}>
{prevButton}
</Tooltip>
</CVATTooltip>
</Popover>
{!playing ? (
<Tooltip title={`Play ${playPauseShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Play ${playPauseShortcut}`}>
<Icon className='cvat-player-play-button' component={PlayIcon} onClick={onSwitchPlay} />
</Tooltip>
</CVATTooltip>
) : (
<Tooltip title={`Pause ${playPauseShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Pause ${playPauseShortcut}`}>
<Icon className='cvat-player-pause-button' component={PauseIcon} onClick={onSwitchPlay} />
</Tooltip>
</CVATTooltip>
)}
<Popover
@ -169,7 +165,7 @@ function PlayerButtons(props: Props): JSX.Element {
placement='bottom'
content={(
<>
<Tooltip title={`${nextRegularText}`} mouseLeaveDelay={0}>
<CVATTooltip title={`${nextRegularText}`}>
<Icon
className='cvat-player-next-inlined-button'
component={NextIcon}
@ -177,8 +173,8 @@ function PlayerButtons(props: Props): JSX.Element {
setNextButton('regular');
}}
/>
</Tooltip>
<Tooltip title={`${nextFilteredText}`} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={`${nextFilteredText}`}>
<Icon
className='cvat-player-next-filtered-inlined-button'
component={NextFilteredIcon}
@ -186,8 +182,8 @@ function PlayerButtons(props: Props): JSX.Element {
setNextButton('filtered');
}}
/>
</Tooltip>
<Tooltip title={`${nextEmptyText}`} mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title={`${nextEmptyText}`}>
<Icon
className='cvat-player-next-empty-inlined-button'
component={NextEmptyIcon}
@ -195,20 +191,20 @@ function PlayerButtons(props: Props): JSX.Element {
setNextButton('empty');
}}
/>
</Tooltip>
</CVATTooltip>
</>
)}
>
<Tooltip placement='top' mouseLeaveDelay={0} title={`${nextButtonTooltipMessage} ${nextFrameShortcut}`}>
<CVATTooltip placement='top' title={`${nextButtonTooltipMessage} ${nextFrameShortcut}`}>
{nextButton}
</Tooltip>
</CVATTooltip>
</Popover>
<Tooltip title={`Go next with a step ${forwardShortcut}`} mouseLeaveDelay={0}>
<CVATTooltip title={`Go next with a step ${forwardShortcut}`}>
<Icon className='cvat-player-forward-button' component={ForwardJumpIcon} onClick={onForward} />
</Tooltip>
<Tooltip title='Go to the last frame' mouseLeaveDelay={0}>
</CVATTooltip>
<CVATTooltip title='Go to the last frame'>
<Icon className='cvat-player-last-button' component={LastIcon} onClick={onLastFrame} />
</Tooltip>
</CVATTooltip>
</Col>
);
}

20
cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -7,11 +7,11 @@ import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd/lib/grid';
import { LinkOutlined } from '@ant-design/icons';
import Slider from 'antd/lib/slider';
import Tooltip from 'antd/lib/tooltip';
import InputNumber from 'antd/lib/input-number';
import Input from 'antd/lib/input';
import Text from 'antd/lib/typography/Text';
import CVATTooltip from 'components/common/cvat-tooltip';
import { clamp } from 'utils/math';
interface Props {
@ -63,26 +63,26 @@ function PlayerNavigation(props: Props): JSX.Element {
</Row>
<Row justify='center'>
<Col className='cvat-player-filename-wrapper'>
<Tooltip title={frameFilename} mouseLeaveDelay={0}>
<CVATTooltip title={frameFilename}>
<Text type='secondary'>{frameFilename}</Text>
</Tooltip>
</CVATTooltip>
</Col>
<Col offset={1}>
<Tooltip title='Create frame URL' mouseLeaveDelay={0}>
<CVATTooltip title='Create frame URL'>
<LinkOutlined className='cvat-player-frame-url-icon' onClick={onURLIconClick} />
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</Col>
<Col>
<Tooltip title={`Press ${focusFrameInputShortcut} to focus here`} mouseLeaveDelay={0}>
<CVATTooltip title={`Press ${focusFrameInputShortcut} to focus here`}>
<InputNumber
ref={inputFrameRef}
className='cvat-player-frame-selector'
type='number'
value={frameInputValue}
onChange={(value: number | undefined | string) => {
if (typeof value !== 'undefined') {
onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined' && value !== null) {
setFrameInputValue(Math.floor(clamp(+value, startFrame, stopFrame)));
}
}}
@ -93,7 +93,7 @@ function PlayerNavigation(props: Props): JSX.Element {
onInputChange(frameInputValue);
}}
/>
</Tooltip>
</CVATTooltip>
</Col>
</>
);

7
cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
Unescape Escape View File

@ -5,12 +5,13 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import { QuestionCircleOutlined } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Table from 'antd/lib/table';
import Modal from 'antd/lib/modal';
import Spin from 'antd/lib/spin';
import Text from 'antd/lib/typography/Text';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props {
collecting: boolean;
data: any;
@ -76,12 +77,12 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
});
const makeShapesTracksTitle = (title: string): JSX.Element => (
<Tooltip title='Shapes / Tracks' mouseLeaveDelay={0}>
<CVATTooltip title='Shapes / Tracks'>
<Text strong style={{ marginRight: 5 }}>
{title}
</Text>
<QuestionCircleOutlined className='cvat-info-circle-icon' />
</Tooltip>
</CVATTooltip>
);
const columns = [

18
cvat-ui/src/components/common/cvat-tooltip.tsx
Unescape Escape View File

@ -0,0 +1,18 @@
// Copyright (C) 2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Tooltip, { TooltipProps } from 'antd/lib/tooltip';
function CVATTooltip(props: TooltipProps): JSX.Element {
const { children, ...rest } = props;
return (
<Tooltip destroyTooltipOnHide={{ keepParent: false }} mouseLeaveDelay={0} {...rest}>
{children}
</Tooltip>
);
}
export default React.memo(CVATTooltip);

23
cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -7,12 +7,12 @@ import { Row, Col } from 'antd/lib/grid';
import { PercentageOutlined } from '@ant-design/icons';
import Input from 'antd/lib/input';
import Checkbox from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
import Form, { FormInstance, RuleObject, RuleRender } from 'antd/lib/form';
import Text from 'antd/lib/typography/Text';
import { Store } from 'antd/lib/form/interface';
import CVATTooltip from 'components/common/cvat-tooltip';
import patterns from 'utils/validation-patterns';
import { Store } from 'antd/lib/form/interface';
export interface AdvancedConfiguration {
bugTracker?: string;
@ -176,7 +176,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderImageQuality(): JSX.Element {
return (
<Tooltip title='Defines images compression level' mouseLeaveDelay={0}>
<CVATTooltip title='Defines images compression level'>
<Form.Item
label='Image quality'
name='imageQuality'
@ -190,13 +190,13 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
>
<Input size='large' type='number' min={5} max={100} suffix={<PercentageOutlined />} />
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
private renderOverlap(): JSX.Element {
return (
<Tooltip title='Defines a number of intersected frames between different segments' mouseLeaveDelay={0}>
<CVATTooltip title='Defines a number of intersected frames between different segments'>
<Form.Item
label='Overlap size'
name='overlapSize'
@ -205,17 +205,17 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
>
<Input size='large' type='number' min={0} />
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
private renderSegmentSize(): JSX.Element {
return (
<Tooltip title='Defines a number of frames in a segment' mouseLeaveDelay={0}>
<CVATTooltip title='Defines a number of frames in a segment'>
<Form.Item label='Segment size' name='segmentSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' min={1} />
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
@ -329,7 +329,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderChunkSize(): JSX.Element {
return (
<Tooltip
<CVATTooltip
title={(
<>
Defines a number of frames to be packed in a chunk when send from client to server. Server
@ -346,12 +346,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
More: 1 - 4
</>
)}
mouseLeaveDelay={0}
>
<Form.Item label='Chunk size' name='dataChunkSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' />
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}

8
cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -10,7 +10,6 @@ import Text from 'antd/lib/typography/Text';
import Paragraph from 'antd/lib/typography/Paragraph';
import Collapse from 'antd/lib/collapse';
import TextArea from 'antd/lib/input/TextArea';
import Tooltip from 'antd/lib/tooltip';
import copy from 'copy-to-clipboard';
import ErrorStackParser from 'error-stack-parser';
@ -18,6 +17,7 @@ import { ThunkDispatch } from 'utils/redux';
import { resetAfterErrorAsync } from 'actions/boundaries-actions';
import { CombinedState } from 'reducers/interfaces';
import logger, { LogType } from 'cvat-logger';
import CVATTooltip from 'components/common/cvat-tooltip';
import consts from 'consts';
interface StateToProps {
@ -146,7 +146,7 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
</Paragraph>
<ul>
<li>
<Tooltip title='Copied!' trigger='click' mouseLeaveDelay={0}>
<CVATTooltip title='Copied!' trigger='click'>
{/* eslint-disable-next-line */}
<a
onClick={() => {
@ -157,7 +157,7 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
Copy
{' '}
</a>
</Tooltip>
</CVATTooltip>
the error message to clipboard
</li>
<li>

12
cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
Unescape Escape View File

@ -1,12 +1,12 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import { EditOutlined, CloseOutlined } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text';
import CVATTooltip from 'components/common/cvat-tooltip';
import consts from 'consts';
import { Label } from './common';
@ -25,7 +25,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
return (
<div style={{ background: color || consts.NEW_LABEL_COLOR }} className='cvat-constructor-viewer-item'>
<Text>{label.name}</Text>
<Tooltip title='Update attributes' mouseLeaveDelay={0}>
<CVATTooltip title='Update attributes'>
<span
role='button'
tabIndex={0}
@ -34,9 +34,9 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
>
<EditOutlined />
</span>
</Tooltip>
</CVATTooltip>
{label.id < 0 && (
<Tooltip title='Delete label' mouseLeaveDelay={0}>
<CVATTooltip title='Delete label'>
<span
role='button'
tabIndex={0}
@ -45,7 +45,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
>
<CloseOutlined />
</span>
</Tooltip>
</CVATTooltip>
)}
</div>
);

60
cvat-ui/src/components/labels-editor/label-form.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -8,12 +8,12 @@ import Icon, { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';
import Checkbox from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
import Select from 'antd/lib/select';
import Form, { FormInstance } from 'antd/lib/form';
import Badge from 'antd/lib/badge';
import { Store } from 'antd/lib/form/interface';
import CVATTooltip from 'components/common/cvat-tooltip';
import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker';
import { ColorizeIcon } from 'icons';
import patterns from 'utils/validation-patterns';
@ -132,17 +132,27 @@ export default class LabelForm extends React.Component<Props> {
const type = attr ? attr.input_type.toUpperCase() : AttributeType.SELECT;
return (
<Tooltip title='An HTML element representing the attribute' mouseLeaveDelay={0}>
<CVATTooltip title='An HTML element representing the attribute'>
<Form.Item name={[key, 'type']} fieldKey={[fieldInstance.fieldKey, 'type']} initialValue={type}>
<Select className='cvat-attribute-type-input' disabled={locked}>
<Select.Option value={AttributeType.SELECT} className='cvat-attribute-type-input-select'>Select</Select.Option>
<Select.Option value={AttributeType.RADIO} className='cvat-attribute-type-input-radio'>Radio</Select.Option>
<Select.Option value={AttributeType.CHECKBOX} className='cvat-attribute-type-input-checkbox'>Checkbox</Select.Option>
<Select.Option value={AttributeType.TEXT} className='cvat-attribute-type-input-text'>Text</Select.Option>
<Select.Option value={AttributeType.NUMBER} className='cvat-attribute-type-input-number'>Number</Select.Option>
<Select.Option value={AttributeType.SELECT} className='cvat-attribute-type-input-select'>
Select
</Select.Option>
<Select.Option value={AttributeType.RADIO} className='cvat-attribute-type-input-radio'>
Radio
</Select.Option>
<Select.Option value={AttributeType.CHECKBOX} className='cvat-attribute-type-input-checkbox'>
Checkbox
</Select.Option>
<Select.Option value={AttributeType.TEXT} className='cvat-attribute-type-input-text'>
Text
</Select.Option>
<Select.Option value={AttributeType.NUMBER} className='cvat-attribute-type-input-number'>
Number
</Select.Option>
</Select>
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
@ -168,7 +178,7 @@ export default class LabelForm extends React.Component<Props> {
};
return (
<Tooltip title='Press enter to add a new value' mouseLeaveDelay={0}>
<CVATTooltip title='Press enter to add a new value'>
<Form.Item
name={[key, 'values']}
fieldKey={[fieldInstance.fieldKey, 'values']}
@ -190,7 +200,7 @@ export default class LabelForm extends React.Component<Props> {
dropdownStyle={{ display: 'none' }}
/>
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
@ -199,14 +209,14 @@ export default class LabelForm extends React.Component<Props> {
const value = attr ? attr.values[0] : 'false';
return (
<Tooltip title='Specify a default value' mouseLeaveDelay={0}>
<CVATTooltip title='Specify a default value'>
<Form.Item name={[key, 'values']} fieldKey={[fieldInstance.fieldKey, 'values']} initialValue={value}>
<Select className='cvat-attribute-values-input'>
<Select.Option value='false'>False</Select.Option>
<Select.Option value='true'>True</Select.Option>
</Select>
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
@ -281,7 +291,7 @@ export default class LabelForm extends React.Component<Props> {
const value = attr ? attr.mutable : false;
return (
<Tooltip title='Can this attribute be changed frame to frame?' mouseLeaveDelay={0}>
<CVATTooltip title='Can this attribute be changed frame to frame?'>
<Form.Item
name={[key, 'mutable']}
fieldKey={[fieldInstance.fieldKey, 'mutable']}
@ -292,7 +302,7 @@ export default class LabelForm extends React.Component<Props> {
Mutable
</Checkbox>
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
@ -301,7 +311,7 @@ export default class LabelForm extends React.Component<Props> {
const locked = attr ? attr.id >= 0 : false;
return (
<Tooltip title='Delete the attribute' mouseLeaveDelay={0}>
<CVATTooltip title='Delete the attribute'>
<Form.Item>
<Button
type='link'
@ -314,7 +324,7 @@ export default class LabelForm extends React.Component<Props> {
<CloseCircleOutlined />
</Button>
</Form.Item>
</Tooltip>
</CVATTooltip>
);
}
@ -407,7 +417,7 @@ export default class LabelForm extends React.Component<Props> {
private renderDoneButton(): JSX.Element {
return (
<Tooltip title='Save the label and return' mouseLeaveDelay={0}>
<CVATTooltip title='Save the label and return'>
<Button
style={{ width: '150px' }}
type='primary'
@ -418,7 +428,7 @@ export default class LabelForm extends React.Component<Props> {
>
Done
</Button>
</Tooltip>
</CVATTooltip>
);
}
@ -427,7 +437,7 @@ export default class LabelForm extends React.Component<Props> {
if (label) return null;
return (
<Tooltip title='Save the label and create one more' mouseLeaveDelay={0}>
<CVATTooltip title='Save the label and create one more'>
<Button
style={{ width: '150px' }}
type='primary'
@ -438,7 +448,7 @@ export default class LabelForm extends React.Component<Props> {
>
Continue
</Button>
</Tooltip>
</CVATTooltip>
);
}
@ -446,7 +456,7 @@ export default class LabelForm extends React.Component<Props> {
const { onSubmit } = this.props;
return (
<Tooltip title='Do not save the label and return' mouseLeaveDelay={0}>
<CVATTooltip title='Do not save the label and return'>
<Button
type='primary'
danger
@ -457,7 +467,7 @@ export default class LabelForm extends React.Component<Props> {
>
Cancel
</Button>
</Tooltip>
</CVATTooltip>
);
}
@ -469,7 +479,7 @@ export default class LabelForm extends React.Component<Props> {
{() => (
<Form.Item name='color' initialValue={label ? label?.color : undefined}>
<ColorPicker placement='bottom'>
<Tooltip title='Change color of the label'>
<CVATTooltip title='Change color of the label'>
<Button type='default' className='cvat-change-task-label-color-button'>
<Badge
className='cvat-change-task-label-color-badge'
@ -477,7 +487,7 @@ export default class LabelForm extends React.Component<Props> {
text={<Icon component={ColorizeIcon} />}
/>
</Button>
</Tooltip>
</CVATTooltip>
</ColorPicker>
</Form.Item>
)}

8
cvat-ui/src/components/labels-editor/labels-editor.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -6,12 +6,12 @@ import './styles.scss';
import React from 'react';
import Tabs from 'antd/lib/tabs';
import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import notification from 'antd/lib/notification';
import Text from 'antd/lib/typography/Text';
import copy from 'copy-to-clipboard';
import { CopyOutlined, EditOutlined, BuildOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
import RawViewer from './raw-viewer';
import ConstructorViewer from './constructor-viewer';
import ConstructorCreator from './constructor-creator';
@ -195,7 +195,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditortProps
type='card'
tabBarStyle={{ marginBottom: '0px' }}
tabBarExtraContent={(
<Tooltip title='Copied to clipboard!' trigger='click' mouseLeaveDelay={0}>
<CVATTooltip title='Copied to clipboard!' trigger='click'>
<Button
type='link'
icon={<CopyOutlined />}
@ -218,7 +218,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditortProps
>
Copy
</Button>
</Tooltip>
</CVATTooltip>
)}
>
<Tabs.TabPane

12
cvat-ui/src/components/labels-editor/raw-viewer.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -6,10 +6,10 @@ import React, { RefObject } from 'react';
import { Row, Col } from 'antd/lib/grid';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import Form, { FormInstance, RuleObject } from 'antd/lib/form';
import { Store } from 'antd/lib/form/interface';
import CVATTooltip from 'components/common/cvat-tooltip';
import {
Label, Attribute, validateParsedLabel, idGenerator,
} from './common';
@ -87,14 +87,14 @@ export default class RawViewer extends React.PureComponent<Props> {
</Form.Item>
<Row justify='start' align='middle'>
<Col>
<Tooltip title='Save labels and return' mouseLeaveDelay={0}>
<CVATTooltip title='Save labels and return'>
<Button style={{ width: '150px' }} type='primary' htmlType='submit'>
Done
</Button>
</Tooltip>
</CVATTooltip>
</Col>
<Col offset={1}>
<Tooltip title='Do not save the label and return' mouseLeaveDelay={0}>
<CVATTooltip title='Do not save the label and return'>
<Button
type='primary'
danger
@ -107,7 +107,7 @@ export default class RawViewer extends React.PureComponent<Props> {
>
Reset
</Button>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</Form>

36
cvat-ui/src/components/model-runner-modal/detector-runner.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -8,7 +8,6 @@ import { Row, Col } from 'antd/lib/grid';
import { CloseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import Select from 'antd/lib/select';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
import Tag from 'antd/lib/tag';
import Text from 'antd/lib/typography/Text';
import InputNumber from 'antd/lib/input-number';
@ -19,6 +18,8 @@ import { OptionData, OptionGroupData } from 'rc-select/lib/interface';
import { Model, StringObject } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import { clamp } from 'utils/math';
import consts from 'consts';
import { DimensionType } from '../../reducers/interfaces';
@ -93,7 +94,7 @@ function DetectorRunner(props: Props): JSX.Element {
onChange: (label: string) => void,
): JSX.Element {
return (
<Tooltip title={tooltip}>
<CVATTooltip title={tooltip}>
<Select
value={value}
onChange={onChange}
@ -118,7 +119,7 @@ function DetectorRunner(props: Props): JSX.Element {
),
)}
</Select>
</Tooltip>
</CVATTooltip>
);
}
@ -169,7 +170,7 @@ function DetectorRunner(props: Props): JSX.Element {
<Tag color={color}>{mapping[modelLabel]}</Tag>
</Col>
<Col offset={1}>
<Tooltip title='Remove the mapped values' mouseLeaveDelay={0}>
<CVATTooltip title='Remove the mapped values'>
<CloseCircleOutlined
className='cvat-danger-circle-icon'
onClick={(): void => {
@ -178,7 +179,7 @@ function DetectorRunner(props: Props): JSX.Element {
setMapping(newmapping);
}}
/>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
);
@ -195,12 +196,9 @@ function DetectorRunner(props: Props): JSX.Element {
updateMatch(null, taskLabel))}
</Col>
<Col span={1} offset={1}>
<Tooltip
title='Specify a label mapping between model labels and task labels'
mouseLeaveDelay={0}
>
<CVATTooltip title='Specify a label mapping between model labels and task labels'>
<QuestionCircleOutlined className='cvat-info-circle-icon' />
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</>
@ -222,19 +220,19 @@ function DetectorRunner(props: Props): JSX.Element {
<Text>Threshold</Text>
</Col>
<Col offset={1}>
<Tooltip title='Minimum similarity value for shapes that can be merged'>
<CVATTooltip title='Minimum similarity value for shapes that can be merged'>
<InputNumber
min={0.01}
step={0.01}
max={1}
value={threshold}
onChange={(value: number | undefined | string) => {
if (typeof value !== 'undefined') {
onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined' && value !== null) {
setThreshold(clamp(+value, 0.01, 1));
}
}}
/>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
<Row align='middle' justify='start'>
@ -242,18 +240,18 @@ function DetectorRunner(props: Props): JSX.Element {
<Text>Maximum distance</Text>
</Col>
<Col offset={1}>
<Tooltip title='Maximum distance between shapes that can be merged'>
<CVATTooltip title='Maximum distance between shapes that can be merged'>
<InputNumber
placeholder='Threshold'
min={1}
value={distance}
onChange={(value: number | undefined | string) => {
if (typeof value !== 'undefined') {
onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined' && value !== null) {
setDistance(+value);
}
}}
/>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</div>

21
cvat-ui/src/components/task-page/job-list.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -9,11 +9,12 @@ import { Row, Col } from 'antd/lib/grid';
import { LoadingOutlined, QuestionCircleOutlined, CopyOutlined } from '@ant-design/icons';
import Table from 'antd/lib/table';
import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text';
import moment from 'moment';
import copy from 'copy-to-clipboard';
import CVATTooltip from 'components/common/cvat-tooltip';
import getCore from 'cvat-core-wrapper';
import UserSelector, { User } from './user-selector';
@ -145,9 +146,9 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
return (
<Text strong className={progressColor}>
{status}
<Tooltip title={<ReviewSummaryComponent jobInstance={jobInstance} />}>
<CVATTooltip title={<ReviewSummaryComponent jobInstance={jobInstance} />}>
<QuestionCircleOutlined />
</Tooltip>
</CVATTooltip>
</Text>
);
},
@ -225,7 +226,7 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
<Row justify='space-between' align='middle'>
<Col>
<Text className='cvat-text-color cvat-jobs-header'> Jobs </Text>
<Tooltip trigger='click' title='Copied to clipboard!' mouseLeaveDelay={0}>
<CVATTooltip trigger='click' title='Copied to clipboard!'>
<Button
type='link'
onClick={(): void => {
@ -258,13 +259,19 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
<CopyOutlined />
Copy
</Button>
</Tooltip>
</CVATTooltip>
</Col>
<Col>
<Text className='cvat-text-color'>{`${completed} of ${data.length} jobs`}</Text>
</Col>
</Row>
<Table className='cvat-task-jobs-table' rowClassName={() => 'cvat-task-jobs-table-row'} columns={columns} dataSource={data} size='small' />
<Table
className='cvat-task-jobs-table'
rowClassName={() => 'cvat-task-jobs-table-row'}
columns={columns}
dataSource={data}
size='small'
/>
</div>
);
}

9
cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2020-2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
@ -7,8 +7,9 @@ import { Row, Col } from 'antd/lib/grid';
import { CloseOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text';
import Progress from 'antd/lib/progress';
import Tooltip from 'antd/lib/tooltip';
import Modal from 'antd/lib/modal';
import CVATTooltip from 'components/common/cvat-tooltip';
import { ActiveInference } from 'reducers/interfaces';
interface Props {
@ -41,7 +42,7 @@ export default function AutomaticAnnotationProgress(props: Props): JSX.Element |
/>
</Col>
<Col span={1} className='close-auto-annotation-icon'>
<Tooltip title='Cancel automatic annotation' mouseLeaveDelay={0}>
<CVATTooltip title='Cancel automatic annotation'>
<CloseOutlined
onClick={() => {
Modal.confirm({
@ -57,7 +58,7 @@ export default function AutomaticAnnotationProgress(props: Props): JSX.Element |
});
}}
/>
</Tooltip>
</CVATTooltip>
</Col>
</Row>
</>

Write Preview
Loading…
Cancel
Save