From 9a56e7edd56a0603c4d21a61b2c4ea085f0d2205 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Thu, 11 Feb 2021 21:01:51 +0300 Subject: [PATCH] Shared tooltip component with common settings [Refactoring only] (#2783) * Popover trigger on click, shared tooltip component * Aborted trigger * Updated version --- .../annotations-filters-input.tsx | 8 +-- .../attribute-switcher.tsx | 29 +++++--- .../object-switcher.tsx | 29 +++++--- .../canvas/canvas-point-context-menu.tsx | 8 +-- .../annotation-page/canvas/canvas-wrapper.tsx | 11 ++-- .../controls-side-bar/issue-control.tsx | 8 +-- .../review/hidden-issue-label.tsx | 9 +-- .../annotation-page/review/issue-dialog.tsx | 12 ++-- .../controls-side-bar/cursor-control.tsx | 8 +-- .../controls-side-bar/draw-shape-popover.tsx | 20 +++--- .../controls-side-bar/fit-control.tsx | 8 +-- .../controls-side-bar/group-control.tsx | 51 +++++++------- .../handle-popover-visibility.tsx | 2 +- .../controls-side-bar/merge-control.tsx | 42 ++++++------ .../controls-side-bar/move-control.tsx | 8 +-- .../controls-side-bar/opencv-control.tsx | 6 +- .../controls-side-bar/resize-control.tsx | 8 +-- .../controls-side-bar/rotate-control.tsx | 19 ++---- .../controls-side-bar/setup-tag-popover.tsx | 9 +-- .../controls-side-bar/split-control.tsx | 8 +-- .../objects-side-bar/color-picker.tsx | 8 +-- .../objects-side-bar/issues-list.tsx | 14 ++-- .../objects-side-bar/object-item-basics.tsx | 8 +-- .../objects-side-bar/object-item-buttons.tsx | 36 +++++----- .../objects-side-bar/object-item-menu.tsx | 33 +++++----- .../objects-side-bar/objects-list-header.tsx | 16 ++--- .../controls-side-bar/cursor-control.tsx | 10 +-- .../controls-side-bar/move-control.tsx | 10 +-- .../controls-side-bar/photo-context.tsx | 9 +-- .../top-bar/player-buttons.tsx | 66 +++++++++---------- .../top-bar/player-navigation.tsx | 20 +++--- .../top-bar/statistics-modal.tsx | 7 +- .../src/components/common/cvat-tooltip.tsx | 18 +++++ .../advanced-configuration-form.tsx | 23 ++++--- .../global-error-boundary.tsx | 8 +-- .../labels-editor/constructor-viewer-item.tsx | 12 ++-- .../components/labels-editor/label-form.tsx | 60 ++++++++++------- .../labels-editor/labels-editor.tsx | 8 +-- .../components/labels-editor/raw-viewer.tsx | 12 ++-- .../model-runner-modal/detector-runner.tsx | 36 +++++----- cvat-ui/src/components/task-page/job-list.tsx | 21 ++++-- .../automatic-annotation-progress.tsx | 9 +-- 42 files changed, 400 insertions(+), 347 deletions(-) create mode 100644 cvat-ui/src/components/common/cvat-tooltip.tsx diff --git a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx index 0d701df3..674e8e30 100644 --- a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx +++ b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx @@ -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 ? ( <> - + { @@ -152,7 +152,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele onMouseEnter={() => setDropdownVisible(false)} onMouseLeave={() => setDropdownVisible(true)} /> - + ) : ( <> diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx index 2632b6a6..59a17593 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx @@ -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 (
- - - - + + {currentAttribute} {` [${currentIndex + 1}/${attributesCount}]`} - - - - +
); } diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx index f371a287..b64d2c5f 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx @@ -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 (
- - - - + + {currentLabel} {` ${clientID} `} {`[${currentIndex + 1}/${objectsCount}]`} - - - - +
); } diff --git a/cvat-ui/src/components/annotation-page/canvas/canvas-point-context-menu.tsx b/cvat-ui/src/components/annotation-page/canvas/canvas-point-context-menu.tsx index 04ecd78c..49035958 100644 --- a/cvat-ui/src/components/annotation-page/canvas/canvas-point-context-menu.tsx +++ b/cvat-ui/src/components/annotation-page/canvas/canvas-point-context-menu.tsx @@ -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(
- + - + {contextMenuFor && contextMenuFor.shapeType === 'polygon' && (
); diff --git a/cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx b/cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx index 6fe71158..4947f766 100644 --- a/cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx +++ b/cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx b/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx index 02b5572e..579bec31 100644 --- a/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx +++ b/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx @@ -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( - + - , + , window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement, ); } diff --git a/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx b/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx index 8660017d..27b89772 100644 --- a/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx +++ b/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx @@ -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={{_comment.author ? _comment.author.username : 'Unknown'}} content={

{_comment.message}

} datetime={( - + {diff} - + )} /> ); @@ -93,9 +93,9 @@ export default function IssueDialog(props: Props): JSX.Element { {id >= 0 ? `Issue #${id}` : 'Issue'} - + - + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx index 9983fd6c..dd26d376 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx @@ -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 ( - + canvasInstance.cancel() : undefined} /> - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index a8a7ff42..b85f5d6a 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -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 { { - 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 { )} - + - + - + - + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx index e8f10f29..baa544ff 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx @@ -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 ( - + canvasInstance.fit()} /> - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx index fb05e3f9..8b93c757 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx index c9de255d..fdc80926 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx @@ -1,4 +1,4 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2020-2021 Intel Corporation // // SPDX-License-Identifier: MIT diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx index b00c9eb5..2d29fb21 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx index 05b38556..760a59dd 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx index d4903427..8bb4ea87 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx @@ -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 - + - + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx index 47d216d7..ac7806cb 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx index 3aa537eb..9fa1e2f9 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx @@ -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={( <> - + rotateFrame(Rotation.ANTICLOCKWISE90)} component={RotateIcon} /> - - + + rotateFrame(Rotation.CLOCKWISE90)} component={RotateIcon} /> - + )} trigger='hover' diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx index a0e31a60..a202e346 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx @@ -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 { - + - + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx index 43625fd6..61d6bfce 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx index e877af6c..28043cce 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx @@ -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): JSX.Element { Select color - + - + )} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx index 47695f06..f9fb7070 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx @@ -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 {
- + - + - + - + - + {issuesHidden ? ( dispatch(reviewActions.switchIssuesHiddenFlag(true))} /> )} - +
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx index 8aa249ee..0e7cda1e 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx @@ -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 { - + - + + - + ) : ( ); @@ -118,9 +118,9 @@ function NavigatePrevKeyframe(props: Props): JSX.Element { function NavigateNextKeyframe(props: Props): JSX.Element { const { navigateNextKeyframe, nextKeyFrameShortcut } = props; return navigateNextKeyframe ? ( - + - + ) : ( ); @@ -140,13 +140,13 @@ function SwitchLock(props: Props): JSX.Element { locked, switchLockShortcut, lock, unlock, } = props; return ( - + {locked ? ( ) : ( )} - + ); } @@ -155,26 +155,26 @@ function SwitchOccluded(props: Props): JSX.Element { switchOccludedShortcut, occluded, unsetOccluded, setOccluded, } = props; return ( - + {occluded ? ( ) : ( )} - + ); } function SwitchPinned(props: Props): JSX.Element { const { pinned, pin, unpin } = props; return ( - + {pinned ? ( ) : ( )} - + ); } @@ -184,13 +184,13 @@ function SwitchHidden(props: Props): JSX.Element { } = props; const hiddenStyle = hiddenDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {}; return ( - + ); } @@ -200,7 +200,7 @@ function SwitchOutside(props: Props): JSX.Element { } = props; const outsideStyle = outsideDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {}; return ( - + {outside ? ( )} - + ); } @@ -221,13 +221,13 @@ function SwitchKeyframe(props: Props): JSX.Element { } = props; const keyframeStyle = keyframeDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {}; return ( - + {keyframe ? ( ) : ( )} - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx index d27aa05b..933a1283 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx @@ -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 ( - + - + ); } @@ -85,11 +86,11 @@ function PropagateItem(props: ItemProps): JSX.Element { const { propagateShortcut, propagate } = toolProps; return ( - + - + ); } @@ -99,11 +100,11 @@ function TrackingItem(props: ItemProps): JSX.Element { const { activateTracking } = toolProps; return ( - + - + ); } @@ -138,12 +139,12 @@ function ToBackgroundItem(props: ItemProps): JSX.Element { const { toBackgroundShortcut, toBackground } = toolProps; return ( - + - + ); } @@ -153,12 +154,12 @@ function ToForegroundItem(props: ItemProps): JSX.Element { const { toForegroundShortcut, toForeground } = toolProps; return ( - + - + ); } @@ -182,12 +183,12 @@ function SwitchColorItem(props: ItemProps): JSX.Element { onVisibleChange={changeColorPickerVisible} resetVisible={false} > - + - + ); @@ -198,7 +199,7 @@ function RemoveItem(props: ItemProps): JSX.Element { const { removeShortcut, locked, remove } = toolProps; return ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx index 05c1272a..1e77e7af 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx @@ -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 ( - + {statesLocked ? : } - + ); } @@ -54,13 +54,13 @@ function HideAllSwitcher(props: Props): JSX.Element { } = props; return ( - + ); } @@ -69,13 +69,13 @@ function CollapseAllSwitcher(props: Props): JSX.Element { const { statesCollapsed, expandAllStates, collapseAllStates } = props; return ( - + {statesCollapsed ? ( ) : ( )} - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/cursor-control.tsx b/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/cursor-control.tsx index b8b63456..72b2c99d 100644 --- a/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/cursor-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/cursor-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/move-control.tsx b/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/move-control.tsx index 05ddd20a..4a41c6df 100644 --- a/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/move-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/move-control.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx b/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx index b18b84b8..f5b9587b 100644 --- a/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx +++ b/cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx @@ -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 ( - + - + ); } diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx index 22ca7c97..5bc79ca2 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx @@ -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 ( - + - - + + - + - + - - + + - - + + - + )} > - + {prevButton} - + {!playing ? ( - + - + ) : ( - + - + )} - + - - + + - - + + - + )} > - + {nextButton} - + - + - - + + - + ); } diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx index 65ef5130..dfe72354 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx @@ -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 { - + {frameFilename} - + - + - + - + { - 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); }} /> - + ); diff --git a/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx b/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx index 7db9b687..2ac1339d 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx @@ -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 => ( - + {title} - + ); const columns = [ diff --git a/cvat-ui/src/components/common/cvat-tooltip.tsx b/cvat-ui/src/components/common/cvat-tooltip.tsx new file mode 100644 index 00000000..062fedd1 --- /dev/null +++ b/cvat-ui/src/components/common/cvat-tooltip.tsx @@ -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 ( + + {children} + + ); +} + +export default React.memo(CVATTooltip); diff --git a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx index 804a8725..5ac9d3ae 100644 --- a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx +++ b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx @@ -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 { private renderImageQuality(): JSX.Element { return ( - + { > } /> - + ); } private renderOverlap(): JSX.Element { return ( - + { > - + ); } private renderSegmentSize(): JSX.Element { return ( - + - + ); } @@ -329,7 +329,7 @@ class AdvancedConfigurationForm extends React.PureComponent { private renderChunkSize(): JSX.Element { return ( - 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 { More: 1 - 4 )} - mouseLeaveDelay={0} > - + ); } diff --git a/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx b/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx index 6330ca00..30db61c7 100644 --- a/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx +++ b/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx @@ -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 {
  • - + {/* eslint-disable-next-line */} { @@ -157,7 +157,7 @@ class GlobalErrorBoundary extends React.PureComponent { Copy {' '} - + the error message to clipboard
  • diff --git a/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx b/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx index 8e972742..32c56dd7 100644 --- a/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx +++ b/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx @@ -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 (
    {label.name} - + - + {label.id < 0 && ( - + - + )}
    ); diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx index e8e73880..4d763952 100644 --- a/cvat-ui/src/components/labels-editor/label-form.tsx +++ b/cvat-ui/src/components/labels-editor/label-form.tsx @@ -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 { const type = attr ? attr.input_type.toUpperCase() : AttributeType.SELECT; return ( - + - + ); } @@ -168,7 +178,7 @@ export default class LabelForm extends React.Component { }; return ( - + { dropdownStyle={{ display: 'none' }} /> - + ); } @@ -199,14 +209,14 @@ export default class LabelForm extends React.Component { const value = attr ? attr.values[0] : 'false'; return ( - + - + ); } @@ -281,7 +291,7 @@ export default class LabelForm extends React.Component { const value = attr ? attr.mutable : false; return ( - + { Mutable - + ); } @@ -301,7 +311,7 @@ export default class LabelForm extends React.Component { const locked = attr ? attr.id >= 0 : false; return ( - + - + ); } @@ -407,7 +417,7 @@ export default class LabelForm extends React.Component { private renderDoneButton(): JSX.Element { return ( - + - + ); } @@ -427,7 +437,7 @@ export default class LabelForm extends React.Component { if (label) return null; return ( - + - + ); } @@ -446,7 +456,7 @@ export default class LabelForm extends React.Component { const { onSubmit } = this.props; return ( - + - + ); } @@ -469,7 +479,7 @@ export default class LabelForm extends React.Component { {() => ( - + - + )} diff --git a/cvat-ui/src/components/labels-editor/labels-editor.tsx b/cvat-ui/src/components/labels-editor/labels-editor.tsx index a95ed14d..df92fc41 100644 --- a/cvat-ui/src/components/labels-editor/labels-editor.tsx +++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx @@ -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 + - + )} > { - + - + - + - + diff --git a/cvat-ui/src/components/model-runner-modal/detector-runner.tsx b/cvat-ui/src/components/model-runner-modal/detector-runner.tsx index db757867..2c049fe8 100644 --- a/cvat-ui/src/components/model-runner-modal/detector-runner.tsx +++ b/cvat-ui/src/components/model-runner-modal/detector-runner.tsx @@ -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 ( - +