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

Fixed icons

Browse Source
main
Boris Sekachev 5 years ago
parent e5356cd887
commit 55f4d95e67
76 changed files with 2902 additions and 2798 deletions
Show Stats Download Patch File Download Diff File

4932
cvat-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
cvat-ui/package.json
Unescape Escape View File

@ -47,6 +47,8 @@
"worker-loader": "^2.0.0"
},
"dependencies": {
"@ant-design/compatible": "^1.0.8",
"@ant-design/icons": "^4.3.0",
"@types/lodash": "^4.14.165",
"@types/platform": "^1.3.3",
"@types/react": "^16.9.56",
@ -57,7 +59,7 @@
"@types/react-router-dom": "^5.1.6",
"@types/react-share": "^3.0.3",
"@types/redux-logger": "^3.0.8",
"antd": "^3.26.20",
"antd": "^4.9.1",
"copy-to-clipboard": "^3.3.1",
"cvat-canvas": "file:../cvat-canvas",
"cvat-core": "file:../cvat-core",

6
cvat-ui/src/components/actions-menu/dump-submenu.tsx
Unescape Escape View File

@ -4,7 +4,7 @@
import React from 'react';
import Menu from 'antd/lib/menu';
import Icon from 'antd/lib/icon';
import { DownloadOutlined, LoadingOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text';
function isDefaultFormat(dumperName: string, taskMode: string): boolean {
@ -35,11 +35,11 @@ export default function DumpSubmenu(props: Props): JSX.Element {
const isDefault = isDefaultFormat(dumper.name, taskMode);
return (
<Menu.Item key={dumper.name} disabled={disabled} className='cvat-menu-dump-submenu-item'>
<Icon type='download' />
<DownloadOutlined />
<Text strong={isDefault} disabled={disabled}>
{dumper.name}
</Text>
{pending && <Icon style={{ marginLeft: 10 }} type='loading' />}
{pending && <LoadingOutlined style={{ marginLeft: 10 }} />}
</Menu.Item>
);
},

6
cvat-ui/src/components/actions-menu/export-submenu.tsx
Unescape Escape View File

@ -4,8 +4,8 @@
import React from 'react';
import Menu from 'antd/lib/menu';
import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
import { ExportOutlined, LoadingOutlined } from '@ant-design/icons';
interface Props {
menuKey: string;
@ -30,9 +30,9 @@ export default function ExportSubmenu(props: Props): JSX.Element {
disabled={disabled}
className='cvat-menu-export-submenu-item'
>
<Icon type='export' />
<ExportOutlined />
<Text disabled={disabled}>{exporter.name}</Text>
{pending && <Icon style={{ marginLeft: 10 }} type='loading' />}
{pending && <LoadingOutlined style={{ marginLeft: 10 }} />}
</Menu.Item>
);
},

6
cvat-ui/src/components/actions-menu/load-submenu.tsx
Unescape Escape View File

@ -4,10 +4,10 @@
import React from 'react';
import Menu from 'antd/lib/menu';
import Icon from 'antd/lib/icon';
import Upload from 'antd/lib/upload';
import Button from 'antd/lib/button';
import Text from 'antd/lib/typography/Text';
import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
interface Props {
menuKey: string;
@ -43,9 +43,9 @@ export default function LoadSubmenu(props: Props): JSX.Element {
}}
>
<Button block type='link' disabled={disabled}>
<Icon type='upload' />
<UploadOutlined />
<Text>{loader.name}</Text>
{pending && <Icon style={{ marginLeft: 10 }} type='loading' />}
{pending && <LoadingOutlined style={{ marginLeft: 10 }} />}
</Button>
</Upload>
</Menu.Item>

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

@ -10,7 +10,7 @@ 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 Icon from 'antd/lib/icon';
import { FilterOutlined } from '@ant-design/icons';
import {
changeAnnotationsFilters as changeAnnotationsFiltersAction,
@ -133,8 +133,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
underCursor ? (
<>
<Tooltip title='Click to open help' mouseLeaveDelay={0}>
<Icon
type='filter'
<FilterOutlined
onClick={(e: React.MouseEvent) => {
e.stopPropagation();
Modal.info({
@ -148,7 +147,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
</>
) : (
<>
<Icon style={{ transform: 'scale(0.9)' }} type='filter' />
<FilterOutlined style={{ transform: 'scale(0.9)' }} />
<span style={{ marginLeft: 5 }}>Annotations filters</span>
</>
)

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

@ -9,7 +9,7 @@ import Layout, { SiderProps } from 'antd/lib/layout';
import { SelectValue } from 'antd/lib/select';
import { Row, Col } from 'antd/lib/grid';
import Text from 'antd/lib/typography/Text';
import Icon from 'antd/lib/icon';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { ThunkDispatch } from 'utils/redux';
import { Canvas } from 'cvat-canvas-wrapper';
@ -292,9 +292,9 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
onClick={collapse}
>
{sidebarCollapsed ? (
<Icon type='menu-fold' title='Show' />
<MenuFoldOutlined title='Show' />
) : (
<Icon type='menu-unfold' title='Hide' />
<MenuUnfoldOutlined title='Hide' />
)}
</span>
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
@ -374,7 +374,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
ant-layout-sider-zero-width-trigger-left`}
onClick={collapse}
>
{sidebarCollapsed ? <Icon type='menu-fold' title='Show' /> : <Icon type='menu-unfold' title='Hide' />}
{sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
</span>
<Row className='cvat-objects-sidebar-filter-input'>
<Col>

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

@ -3,10 +3,10 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
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';
interface Props {
currentAttribute: string;
@ -24,7 +24,7 @@ function AttributeSwitcher(props: Props): JSX.Element {
<div className='attribute-annotation-sidebar-attribute-switcher'>
<Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`} mouseLeaveDelay={0}>
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
<Icon type='left' />
<LeftOutlined />
</Button>
</Tooltip>
<Tooltip title={title} mouseLeaveDelay={0}>
@ -33,7 +33,7 @@ function AttributeSwitcher(props: Props): JSX.Element {
</Tooltip>
<Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`} mouseLeaveDelay={0}>
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
<Icon type='right' />
<RightOutlined />
</Button>
</Tooltip>
</div>

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

@ -3,10 +3,10 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
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';
interface Props {
currentLabel: string;
@ -26,7 +26,7 @@ function ObjectSwitcher(props: Props): JSX.Element {
<div className='attribute-annotation-sidebar-object-switcher'>
<Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`} mouseLeaveDelay={0}>
<Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
<Icon type='left' />
<LeftOutlined />
</Button>
</Tooltip>
<Tooltip title={title} mouseLeaveDelay={0}>
@ -36,7 +36,7 @@ function ObjectSwitcher(props: Props): JSX.Element {
</Tooltip>
<Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`} mouseLeaveDelay={0}>
<Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
<Icon type='right' />
<RightOutlined />
</Button>
</Tooltip>
</div>

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

@ -6,6 +6,7 @@ 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';
@ -103,12 +104,12 @@ function CanvasPointContextMenu(props: Props): React.ReactPortal | null {
ReactDOM.createPortal(
<div className='cvat-canvas-point-context-menu' style={{ top, left }}>
<Tooltip title='Delete point [Alt + dblclick]' mouseLeaveDelay={0}>
<Button type='link' icon='delete' onClick={onPointDelete}>
<Button type='link' icon={<DeleteOutlined />} onClick={onPointDelete}>
Delete point
</Button>
</Tooltip>
{contextMenuFor && contextMenuFor.shapeType === 'polygon' && (
<Button type='link' icon='environment' onClick={onSetStartPoint}>
<Button type='link' icon={<EnvironmentOutlined />} onClick={onSetStartPoint}>
Set start point
</Button>
)}

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

@ -6,9 +6,8 @@ import React from 'react';
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
import Layout from 'antd/lib/layout/layout';
import Slider, { SliderValue } from 'antd/lib/slider';
import Slider from 'antd/lib/slider';
import {
ColorBy, GridColor, ObjectType, ContextMenuType, Workspace, ShapeType,
@ -17,6 +16,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';
const cvat = getCore();
@ -906,10 +906,10 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
vertical
reverse
defaultValue={0}
onChange={(value: SliderValue): void => onSwitchZLayer(value as number)}
onChange={(value: number): void => onSwitchZLayer(value as number)}
/>
<Tooltip title={`Add new layer ${maxZLayer + 1} and switch to it`} mouseLeaveDelay={0}>
<Icon type='plus-circle' onClick={onAddZLayer} />
<PlusCircleOutlined onClick={onAddZLayer} />
</Tooltip>
</div>
</Layout.Content>

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ActiveControl } from 'reducers/interfaces';

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

@ -5,7 +5,7 @@
import React, { ReactPortal } from 'react';
import ReactDOM from 'react-dom';
import { useDispatch } from 'react-redux';
import Form, { FormComponentProps } from 'antd/lib/form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';
import { Row, Col } from 'antd/lib/grid';

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

@ -5,8 +5,8 @@
import React, { ReactPortal, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Tag from 'antd/lib/tag';
import Icon from 'antd/lib/icon';
import Tooltip from 'antd/lib/tooltip';
import { CheckOutlined, CloseCircleOutlined } from '@ant-design/icons';
interface Props {
id: number;
@ -44,9 +44,9 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
className='cvat-hidden-issue-label'
>
{resolved ? (
<Icon className='cvat-hidden-issue-resolved-indicator' type='check' />
<CheckOutlined className='cvat-hidden-issue-resolved-indicator' />
) : (
<Icon className='cvat-hidden-issue-unsolved-indicator' type='close-circle' />
<CloseCircleOutlined className='cvat-hidden-issue-unsolved-indicator' />
)}
{message}
</Tag>

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

@ -5,13 +5,13 @@
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Row, Col } from 'antd/lib/grid';
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 Icon from 'antd/lib/icon';
import moment from 'moment';
interface Props {
@ -94,7 +94,7 @@ export default function IssueDialog(props: Props): JSX.Element {
</Col>
<Col>
<Tooltip title='Collapse the chat'>
<Icon type='close' onClick={collapse} />
<CloseOutlined onClick={collapse} />
</Tooltip>
</Col>
</Row>

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { CursorIcon } from 'icons';
@ -24,9 +24,9 @@ function CursorControl(props: Props): JSX.Element {
<Icon
component={CursorIcon}
className={
activeControl === ActiveControl.CURSOR
? 'cvat-active-canvas-control cvat-cursor-control'
: 'cvat-cursor-control'
activeControl === ActiveControl.CURSOR ?
'cvat-active-canvas-control cvat-cursor-control' :
'cvat-cursor-control'
}
onClick={activeControl !== ActiveControl.CURSOR ? (): void => canvasInstance.cancel() : undefined}
/>

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

@ -4,7 +4,7 @@
import React from 'react';
import Popover from 'antd/lib/popover';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { ShapeType } from 'reducers/interfaces';
@ -21,22 +21,18 @@ interface Props {
function DrawPolygonControl(props: Props): JSX.Element {
const { canvasInstance, isDrawing } = props;
const dynamcPopoverPros = isDrawing
? {
overlayStyle: {
display: 'none',
},
}
: {};
const dynamicIconProps = isDrawing
? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
}
: {};
const dynamcPopoverPros = isDrawing ? {
overlayStyle: {
display: 'none',
},
} : {};
const dynamicIconProps = isDrawing ? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
} : {};
return (
<Popover

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

@ -4,7 +4,7 @@
import React from 'react';
import Popover from 'antd/lib/popover';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { PointIcon } from 'icons';
@ -20,22 +20,18 @@ interface Props {
function DrawPointsControl(props: Props): JSX.Element {
const { canvasInstance, isDrawing } = props;
const dynamcPopoverPros = isDrawing
? {
overlayStyle: {
display: 'none',
},
}
: {};
const dynamicIconProps = isDrawing
? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
}
: {};
const dynamcPopoverPros = isDrawing ? {
overlayStyle: {
display: 'none',
},
} : {};
const dynamicIconProps = isDrawing ? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
} : {};
return (
<Popover

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

@ -4,7 +4,7 @@
import React from 'react';
import Popover from 'antd/lib/popover';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { PolygonIcon } from 'icons';
@ -20,22 +20,18 @@ interface Props {
function DrawPolygonControl(props: Props): JSX.Element {
const { canvasInstance, isDrawing } = props;
const dynamcPopoverPros = isDrawing
? {
overlayStyle: {
display: 'none',
},
}
: {};
const dynamicIconProps = isDrawing
? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
}
: {};
const dynamcPopoverPros = isDrawing ? {
overlayStyle: {
display: 'none',
},
} : {};
const dynamicIconProps = isDrawing ? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
} : {};
return (
<Popover

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

@ -4,7 +4,7 @@
import React from 'react';
import Popover from 'antd/lib/popover';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { PolylineIcon } from 'icons';
@ -20,22 +20,18 @@ interface Props {
function DrawPolylineControl(props: Props): JSX.Element {
const { canvasInstance, isDrawing } = props;
const dynamcPopoverPros = isDrawing
? {
overlayStyle: {
display: 'none',
},
}
: {};
const dynamicIconProps = isDrawing
? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
}
: {};
const dynamcPopoverPros = isDrawing ? {
overlayStyle: {
display: 'none',
},
} : {};
const dynamicIconProps = isDrawing ? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
} : {};
return (
<Popover

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

@ -4,7 +4,7 @@
import React from 'react';
import Popover from 'antd/lib/popover';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { RectangleIcon } from 'icons';
@ -20,22 +20,18 @@ interface Props {
function DrawRectangleControl(props: Props): JSX.Element {
const { canvasInstance, isDrawing } = props;
const dynamcPopoverPros = isDrawing
? {
overlayStyle: {
display: 'none',
},
}
: {};
const dynamicIconProps = isDrawing
? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
}
: {};
const dynamcPopoverPros = isDrawing ? {
overlayStyle: {
display: 'none',
},
} : {};
const dynamicIconProps = isDrawing ? {
className: 'cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.draw({ enabled: false });
},
} : {};
return (
<Popover

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { FitIcon } from 'icons';

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

@ -4,7 +4,7 @@
import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { GroupIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
@ -22,22 +22,20 @@ function GroupControl(props: Props): JSX.Element {
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);
},
};
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`;

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

@ -4,7 +4,7 @@
import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { MergeIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
@ -21,22 +21,20 @@ function MergeControl(props: Props): JSX.Element {
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}>

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { MoveIcon } from 'icons';
@ -23,9 +23,9 @@ function MoveControl(props: Props): JSX.Element {
<Icon
component={MoveIcon}
className={
activeControl === ActiveControl.DRAG_CANVAS
? 'cvat-move-control cvat-active-canvas-control'
: 'cvat-move-control'
activeControl === ActiveControl.DRAG_CANVAS ?
'cvat-move-control cvat-active-canvas-control' :
'cvat-move-control'
}
onClick={(): void => {
if (activeControl === ActiveControl.DRAG_CANVAS) {

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ZoomIcon } from 'icons';
@ -23,9 +23,9 @@ function ResizeControl(props: Props): JSX.Element {
<Icon
component={ZoomIcon}
className={
activeControl === ActiveControl.ZOOM_CANVAS
? 'cvat-resize-control cvat-active-canvas-control'
: 'cvat-resize-control'
activeControl === ActiveControl.ZOOM_CANVAS ?
'cvat-resize-control cvat-active-canvas-control' :
'cvat-resize-control'
}
onClick={(): void => {
if (activeControl === ActiveControl.ZOOM_CANVAS) {

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover';
@ -23,7 +23,7 @@ function RotateControl(props: Props): JSX.Element {
<Popover
overlayClassName='cvat-rotate-canvas-controls'
placement='right'
content={
content={(
<>
<Tooltip
title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`}
@ -48,7 +48,7 @@ function RotateControl(props: Props): JSX.Element {
/>
</Tooltip>
</>
}
)}
trigger='hover'
>
<Icon className='cvat-rotate-canvas-control' component={RotateIcon} />

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

@ -4,7 +4,7 @@
import React from 'react';
import Popover from 'antd/lib/popover';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { Canvas } from 'cvat-canvas-wrapper';
import { TagIcon } from 'icons';
@ -19,13 +19,11 @@ interface Props {
function SetupTagControl(props: Props): JSX.Element {
const { isDrawing } = props;
const dynamcPopoverPros = isDrawing
? {
overlayStyle: {
display: 'none',
},
}
: {};
const dynamcPopoverPros = isDrawing ? {
overlayStyle: {
display: 'none',
},
} : {};
return (
<Popover

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

@ -4,7 +4,7 @@
import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { SplitIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper';
@ -21,22 +21,20 @@ function SplitControl(props: Props): JSX.Element {
const { switchSplitShortcut, activeControl, canvasInstance, splitTrack } = props;
const dynamicIconProps =
activeControl === ActiveControl.SPLIT
? {
className: 'cvat-split-track-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.split({ enabled: false });
splitTrack(false);
},
}
: {
className: 'cvat-split-track-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.split({ enabled: true });
splitTrack(true);
},
};
activeControl === ActiveControl.SPLIT ? {
className: 'cvat-split-track-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.split({ enabled: false });
splitTrack(false);
},
} : {
className: 'cvat-split-track-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.split({ enabled: true });
splitTrack(true);
},
};
return (
<Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right' mouseLeaveDelay={0}>

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

@ -4,7 +4,7 @@
import React, { MutableRefObject } from 'react';
import { connect } from 'react-redux';
import Icon from 'antd/lib/icon';
import Icon, { LoadingOutlined } from '@ant-design/icons';
import Popover from 'antd/lib/popover';
import Select from 'antd/lib/select';
import Button from 'antd/lib/button';
@ -771,7 +771,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
footer={[]}
>
<Text>Waiting for a server response..</Text>
<Icon style={{ marginLeft: '10px' }} type='loading' />
<LoadingOutlined style={{ marginLeft: '10px' }} />
{trackingProgress !== null && (
<Progress percent={+(trackingProgress * 100).toFixed(0)} status='active' />
)}

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

@ -3,7 +3,8 @@
// SPDX-License-Identifier: MIT
import React, { useState } from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import { CloseOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import Popover from 'antd/lib/popover';
import Text from 'antd/lib/typography/Text';
@ -114,7 +115,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
changeVisible(false);
}}
>
<Icon type='close' />
<CloseOutlined />
</Button>
</Tooltip>
</Col>

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

@ -5,7 +5,10 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { CombinedState } from 'reducers/interfaces';
import Icon, { IconProps } from 'antd/lib/icon';
import {
LeftOutlined, RightOutlined, EyeInvisibleOutlined, EyeOutlined,
} from '@ant-design/icons';
import { IconBaseProps } from '@ant-design/icons/lib/components/Icon';
import Tooltip from 'antd/lib/tooltip';
import Alert from 'antd/lib/alert';
import { Row, Col } from 'antd/lib/grid';
@ -24,7 +27,7 @@ export default function LabelsListComponent(): JSX.Element {
const combinedIssues = activeReview ? issues.concat(activeReview.issues) : issues;
const frames = combinedIssues.map((issue: any): number => issue.frame).sort((a: number, b: number) => +a - +b);
const nearestLeft = frames.filter((_frame: number): boolean => _frame < frame).reverse()[0];
const dinamicLeftProps: IconProps = Number.isInteger(nearestLeft) ?
const dinamicLeftProps: IconBaseProps = Number.isInteger(nearestLeft) ?
{
onClick: () => dispatch(changeFrameAsync(nearestLeft)),
} :
@ -36,7 +39,7 @@ export default function LabelsListComponent(): JSX.Element {
};
const nearestRight = frames.filter((_frame: number): boolean => _frame > frame)[0];
const dinamicRightProps: IconProps = Number.isInteger(nearestRight) ?
const dinamicRightProps: IconBaseProps = Number.isInteger(nearestRight) ?
{
onClick: () => dispatch(changeFrameAsync(nearestRight)),
} :
@ -47,33 +50,29 @@ export default function LabelsListComponent(): JSX.Element {
},
};
const dinamicShowHideProps: IconProps = issuesHidden ?
{
onClick: () => dispatch(reviewActions.switchIssuesHiddenFlag(false)),
type: 'eye-invisible',
} :
{
onClick: () => dispatch(reviewActions.switchIssuesHiddenFlag(true)),
type: 'eye',
};
return (
<div style={{ height: tabContentHeight }}>
<div className='cvat-objects-sidebar-issues-list-header'>
<Row type='flex' justify='start' align='middle'>
<Col>
<Tooltip title='Find the previous frame with issues'>
<Icon type='left' {...dinamicLeftProps} />
<LeftOutlined {...dinamicLeftProps} />
</Tooltip>
</Col>
<Col offset={1}>
<Tooltip title='Find the next frame with issues'>
<Icon type='right' {...dinamicRightProps} />
<RightOutlined {...dinamicRightProps} />
</Tooltip>
</Col>
<Col offset={3}>
<Tooltip title='Show/hide all the issues'>
<Icon {...dinamicShowHideProps} />
{ issuesHidden ? (
<EyeInvisibleOutlined
onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(false))}
/>
) : (
<EyeOutlined onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(true))} />
)}
</Tooltip>
</Col>
</Row>

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

@ -4,9 +4,11 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Button from 'antd/lib/button';
import Text from 'antd/lib/typography/Text';
import {
LockOutlined, UnlockOutlined, EyeInvisibleOutlined, EyeOutlined,
} from '@ant-design/icons';
interface Props {
labelName: string;
@ -62,16 +64,16 @@ function LabelItemComponent(props: Props): JSX.Element {
</Col>
<Col span={3}>
{statesLocked ? (
<Icon {...classes.lock.enabled} type='lock' onClick={unlockStates} />
<LockOutlined {...classes.lock.enabled} onClick={unlockStates} />
) : (
<Icon {...classes.lock.disabled} type='unlock' onClick={lockStates} />
<UnlockOutlined {...classes.lock.disabled} onClick={lockStates} />
)}
</Col>
<Col span={3}>
{statesHidden ? (
<Icon {...classes.hidden.enabled} type='eye-invisible' onClick={showStates} />
<EyeInvisibleOutlined {...classes.hidden.enabled} onClick={showStates} />
) : (
<Icon {...classes.hidden.disabled} type='eye' onClick={hideStates} />
<EyeOutlined {...classes.hidden.disabled} onClick={hideStates} />
)}
</Col>
</Row>

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

@ -4,7 +4,7 @@
import React, { useState } from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
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';
@ -141,7 +141,7 @@ function ItemTopComponent(props: Props): JSX.Element {
activateTracking,
})}
>
<Icon type='more' />
<MoreOutlined />
</Dropdown>
</Col>
</Row>

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

@ -4,7 +4,7 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ObjectType, ShapeType } from 'reducers/interfaces';

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

@ -3,12 +3,13 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
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, BlockOutlined, GatewayOutlined, RetweetOutlined, DeleteOutlined,
} from '@ant-design/icons';
import {
BackgroundIcon, ForegroundIcon, ResetPerspectiveIcon, ColorizeIcon,
} from 'icons';
@ -53,7 +54,7 @@ function CreateURLItem(props: ItemProps): JSX.Element {
const { serverID, createURL } = toolProps;
return (
<Menu.Item {...rest}>
<Button disabled={serverID === undefined} type='link' icon='link' onClick={createURL}>
<Button disabled={serverID === undefined} type='link' icon={<LinkOutlined />} onClick={createURL}>
Create object URL
</Button>
</Menu.Item>
@ -66,7 +67,7 @@ function MakeCopyItem(props: ItemProps): JSX.Element {
return (
<Menu.Item {...rest}>
<Tooltip title={`${copyShortcut} and ${pasteShortcut}`} mouseLeaveDelay={0}>
<Button type='link' icon='copy' onClick={copy}>
<Button type='link' icon={<CopyOutlined />} onClick={copy}>
Make a copy
</Button>
</Tooltip>
@ -80,7 +81,7 @@ function PropagateItem(props: ItemProps): JSX.Element {
return (
<Menu.Item {...rest}>
<Tooltip title={`${propagateShortcut}`} mouseLeaveDelay={0}>
<Button type='link' icon='block' onClick={propagate}>
<Button type='link' icon={<BlockOutlined />} onClick={propagate}>
Propagate
</Button>
</Tooltip>
@ -94,8 +95,7 @@ function TrackingItem(props: ItemProps): JSX.Element {
return (
<Menu.Item {...rest}>
<Tooltip title='Run tracking with the active tracker' mouseLeaveDelay={0}>
<Button type='link' onClick={activateTracking}>
<Icon type='gateway' />
<Button type='link' icon={<GatewayOutlined />} onClick={activateTracking}>
Track
</Button>
</Tooltip>
@ -108,7 +108,7 @@ function SwitchOrientationItem(props: ItemProps): JSX.Element {
const { switchOrientation } = toolProps;
return (
<Menu.Item {...rest}>
<Button type='link' icon='retweet' onClick={switchOrientation}>
<Button type='link' icon={<RetweetOutlined />} onClick={switchOrientation}>
Switch orientation
</Button>
</Menu.Item>
@ -196,7 +196,7 @@ function RemoveItem(props: ItemProps): JSX.Element {
<Tooltip title={`${removeShortcut}`} mouseLeaveDelay={0}>
<Button
type='link'
icon='delete'
icon={<DeleteOutlined />}
onClick={(): void => {
if (locked) {
Modal.confirm({

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

@ -4,13 +4,17 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import {
LockOutlined, UnlockOutlined, EyeInvisibleOutlined,
EyeOutlined, CaretDownOutlined, CaretUpFilled,
} from '@ant-design/icons';
import Tooltip from 'antd/lib/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';
interface Props {
readonly: boolean;
statesHidden: boolean;
@ -36,9 +40,9 @@ function LockAllSwitcher(props: Props): JSX.Element {
<Col span={2}>
<Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`} mouseLeaveDelay={0}>
{statesLocked ? (
<Icon type='lock' onClick={unlockAllStates} theme='filled' />
<LockOutlined type='lock' onClick={unlockAllStates} />
) : (
<Icon type='unlock' onClick={lockAllStates} />
<UnlockOutlined type='unlock' onClick={lockAllStates} />
)}
</Tooltip>
</Col>
@ -53,9 +57,9 @@ function HideAllSwitcher(props: Props): JSX.Element {
<Col span={2}>
<Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`} mouseLeaveDelay={0}>
{statesHidden ? (
<Icon type='eye-invisible' onClick={showAllStates} />
<EyeInvisibleOutlined onClick={showAllStates} />
) : (
<Icon type='eye' onClick={hideAllStates} />
<EyeOutlined onClick={hideAllStates} />
)}
</Tooltip>
</Col>
@ -68,9 +72,9 @@ function CollapseAllSwitcher(props: Props): JSX.Element {
<Col span={2}>
<Tooltip title='Expand/collapse all' mouseLeaveDelay={0}>
{statesCollapsed ? (
<Icon type='caret-down' onClick={expandAllStates} />
<CaretDownOutlined onClick={expandAllStates} />
) : (
<Icon type='caret-up' onClick={collapseAllStates} />
<CaretUpFilled onClick={collapseAllStates} />
)}
</Tooltip>
</Col>

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

@ -6,8 +6,8 @@ import './styles.scss';
import React, { Dispatch, useEffect } from 'react';
import { AnyAction } from 'redux';
import { connect } from 'react-redux';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text';
import Icon from 'antd/lib/icon';
import Tabs from 'antd/lib/tabs';
import Layout from 'antd/lib/layout';
@ -118,7 +118,7 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
ant-layout-sider-zero-width-trigger-left`}
onClick={collapseSidebar}
>
{sidebarCollapsed ? <Icon type='menu-fold' title='Show' /> : <Icon type='menu-unfold' title='Hide' />}
{sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
</span>
<Tabs type='card' defaultActiveKey='objects' className='cvat-objects-sidebar-tabs'>

10
cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx
Unescape Escape View File

@ -8,11 +8,11 @@ import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import { Action } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import { Row, Col } from 'antd/lib/grid';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import Layout, { SiderProps } from 'antd/lib/layout';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox';
import Button from 'antd/lib/button/button';
import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox';
import Tag from 'antd/lib/tag';
import {
@ -208,9 +208,9 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
>
{sidebarCollapsed ? (
<Icon type='menu-fold' title='Show' />
<MenuFoldOutlined title='Show' />
) : (
<Icon type='menu-unfold' title='Hide' />
<MenuUnfoldOutlined title='Hide' />
)}
</span>
<Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-label-select'>
@ -244,7 +244,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
<Text strong>Frame tags:&nbsp;</Text>
{frameTags.map((tag: any) => (
<Tag
className={'cvat-tag-annotation-sidebar-frame-tag-label'}
className='cvat-tag-annotation-sidebar-frame-tag-label'
color={tag.label.color}
onClose={() => {
onRemoveState(tag);

2
cvat-ui/src/components/annotation-page/top-bar/left-group.tsx
Unescape Escape View File

@ -4,7 +4,7 @@
import React from 'react';
import { Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Modal from 'antd/lib/modal';
import Button from 'antd/lib/button';
import Timeline from 'antd/lib/timeline';

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

@ -5,7 +5,7 @@
import React from 'react';
import { Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons'
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover';

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

@ -5,7 +5,7 @@
import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import { LinkOutlined } from '@ant-design/icons';
import Slider, { SliderValue } from 'antd/lib/slider';
import Tooltip from 'antd/lib/tooltip';
import InputNumber from 'antd/lib/input-number';
@ -68,7 +68,7 @@ function PlayerNavigation(props: Props): JSX.Element {
</Col>
<Col offset={1}>
<Tooltip title='Create frame URL' mouseLeaveDelay={0}>
<Icon className='cvat-player-frame-url-icon' type='link' onClick={onURLIconClick} />
<LinkOutlined className='cvat-player-frame-url-icon' onClick={onURLIconClick} />
</Tooltip>
</Col>
</Row>

2
cvat-ui/src/components/annotation-page/top-bar/right-group.tsx
Unescape Escape View File

@ -4,7 +4,7 @@
import React from 'react';
import { Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Select from 'antd/lib/select';
import Button from 'antd/lib/button';

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

@ -4,11 +4,11 @@
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 Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
interface Props {
@ -78,7 +78,7 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
<Text strong style={{ marginRight: 5 }}>
{title}
</Text>
<Icon className='cvat-info-circle-icon' type='question-circle' />
<QuestionCircleOutlined className='cvat-info-circle-icon' />
</Tooltip>
);

10
cvat-ui/src/components/change-password-modal/change-password-form.tsx
Unescape Escape View File

@ -3,9 +3,9 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import { LockOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import Input from 'antd/lib/input';
import patterns from 'utils/validation-patterns';
@ -86,7 +86,7 @@ class ChangePasswordFormComponent extends React.PureComponent<ChangePasswordForm
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Current password'
/>,
)}
@ -112,7 +112,7 @@ class ChangePasswordFormComponent extends React.PureComponent<ChangePasswordForm
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='New password'
/>,
)}
@ -138,7 +138,7 @@ class ChangePasswordFormComponent extends React.PureComponent<ChangePasswordForm
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Confirm new password'
/>,
)}

2
cvat-ui/src/components/create-project-page/create-project-content.tsx
Unescape Escape View File

@ -9,7 +9,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router';
import { Col, Row } from 'antd/lib/grid';
import Text from 'antd/lib/typography/Text';
import Form, { FormComponentProps, WrappedFormUtils } from 'antd/lib/form/Form';
import Form, { FormComponentProps, WrappedFormUtils } from '@ant-design/compatible/lib/form/Form';
import Button from 'antd/lib/button';
import Input from 'antd/lib/input';
import notification from 'antd/lib/notification';

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

@ -4,11 +4,11 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
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, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Text from 'antd/lib/typography/Text';
import patterns from 'utils/validation-patterns';
@ -153,7 +153,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
validator: isIntegerRange.bind(null, 5, 100),
},
],
})(<Input size='large' type='number' suffix={<Icon type='percentage' />} />)}
})(<Input size='large' type='number' suffix={<PercentageOutlined />} />)}
</Tooltip>
</Form.Item>
);
@ -377,7 +377,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
return (
<Form.Item label={<span>Chunk size</span>}>
<Tooltip
title={
title={(
<>
Defines a number of frames to be packed in a chunk when send from client to server. Server
defines automatically if empty.
@ -392,7 +392,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
<br />
More: 1 - 4
</>
}
)}
mouseLeaveDelay={0}
>
{form.getFieldDecorator('dataChunkSize', {

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

@ -4,7 +4,7 @@
import React from 'react';
import Input from 'antd/lib/input';
import Form, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
export interface BaseConfiguration {
name: string;

10
cvat-ui/src/components/feedback/feedback.tsx
Unescape Escape View File

@ -5,9 +5,11 @@
import './styles.scss';
import React from 'react';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import Popover from 'antd/lib/popover';
import Text from 'antd/lib/typography/Text';
import {
StarOutlined, LikeOutlined, CloseCircleOutlined, MessageOutlined,
} from '@ant-design/icons';
import {
FacebookShareButton,
LinkedinShareButton,
@ -34,7 +36,7 @@ function renderContent(): JSX.Element {
return (
<>
<Icon type='star' />
<StarOutlined />
<Text style={{ marginLeft: '10px' }}>
Star us on
<a target='_blank' rel='noopener noreferrer' href={GITHUB_URL}>
@ -43,7 +45,7 @@ function renderContent(): JSX.Element {
</a>
</Text>
<br />
<Icon type='like' />
<LikeOutlined />
<Text style={{ marginLeft: '10px' }}>
Leave a
<a target='_blank' rel='noopener noreferrer' href={GITTER_PUBLIC_URL}>
@ -114,7 +116,7 @@ export default function Feedback(): JSX.Element {
setVisible(!visible);
}}
>
{visible ? <Icon type='close-circle' theme='filled' /> : <Icon type='message' theme='twoTone' />}
{visible ? <CloseCircleOutlined /> : <MessageOutlined />}
</Button>
</Popover>
</>

4
cvat-ui/src/components/file-manager/file-manager.tsx
Unescape Escape View File

@ -5,13 +5,13 @@
import './styles.scss';
import React from 'react';
import Tabs from 'antd/lib/tabs';
import Icon from 'antd/lib/icon';
import Input from 'antd/lib/input';
import Text from 'antd/lib/typography/Text';
import Paragraph from 'antd/lib/typography/Paragraph';
import Upload, { RcFile } from 'antd/lib/upload';
import Empty from 'antd/lib/empty';
import Tree, { AntTreeNode, TreeNodeNormal } from 'antd/lib/tree/Tree';
import { InboxOutlined } from '@ant-design/icons';
import consts from 'consts';
@ -106,7 +106,7 @@ export default class FileManager extends React.PureComponent<Props, State> {
}}
>
<p className='ant-upload-drag-icon'>
<Icon type='inbox' />
<InboxOutlined />
</p>
<p className='ant-upload-text'>Click or drag files to this area</p>
<p className='ant-upload-hint'>Support for a bulk images or a single video</p>

23
cvat-ui/src/components/header/header.tsx
Unescape Escape View File

@ -7,8 +7,12 @@ import React from 'react';
import { connect } from 'react-redux';
import { useHistory } from 'react-router';
import { Row, Col } from 'antd/lib/grid';
import Icon, {
ContactsOutlined, SettingOutlined, InfoCircleOutlined, EditOutlined,
LoadingOutlined, LogoutOutlined, GithubOutlined,
QuestionCircleOutlined, CaretDownOutlined,
} from '@ant-design/icons';
import Layout from 'antd/lib/layout';
import Icon from 'antd/lib/icon';
import Button from 'antd/lib/button';
import Menu from 'antd/lib/menu';
import Dropdown from 'antd/lib/dropdown';
@ -208,28 +212,28 @@ function HeaderContainer(props: Props): JSX.Element {
window.open(`${tool.server.host}/admin`, '_blank');
}}
>
<Icon type='control' />
<ContactsOutlined />
Admin page
</Menu.Item>
)}
<Menu.Item title={`Press ${switchSettingsShortcut} to switch`} onClick={() => switchSettingsDialog(true)}>
<Icon type='setting' />
<SettingOutlined />
Settings
</Menu.Item>
<Menu.Item onClick={showAboutModal}>
<Icon type='info-circle' />
<InfoCircleOutlined />
About
</Menu.Item>
{renderChangePasswordItem && (
<Menu.Item onClick={(): void => switchChangePasswordDialog(true)} disabled={changePasswordFetching}>
{changePasswordFetching ? <Icon type='loading' /> : <Icon type='edit' />}
{changePasswordFetching ? <LoadingOutlined /> : <EditOutlined />}
Change password
</Menu.Item>
)}
<Menu.Item onClick={onLogout} disabled={logoutFetching}>
{logoutFetching ? <Icon type='loading' /> : <Icon type='logout' />}
{logoutFetching ? <LoadingOutlined /> : <LogoutOutlined />}
Logout
</Menu.Item>
</Menu>
@ -239,7 +243,6 @@ function HeaderContainer(props: Props): JSX.Element {
<Layout.Header className='cvat-header'>
<div className='cvat-left-header'>
<Icon className='cvat-logo-icon' component={CVATLogo} />
<Button
className='cvat-header-button'
type='link'
@ -305,7 +308,7 @@ function HeaderContainer(props: Props): JSX.Element {
window.open(GITHUB_URL, '_blank');
}}
>
<Icon type='github' />
<GithubOutlined />
<Text className='cvat-text-color'>GitHub</Text>
</Button>
<Button
@ -319,7 +322,7 @@ function HeaderContainer(props: Props): JSX.Element {
window.open(`${tool.server.host}/documentation/user_guide.html`, '_blank');
}}
>
<Icon type='question-circle' />
<QuestionCircleOutlined />
Help
</Button>
<Dropdown overlay={menu} className='cvat-header-menu-dropdown'>
@ -328,7 +331,7 @@ function HeaderContainer(props: Props): JSX.Element {
<Text strong>
{user.username.length > 14 ? `${user.username.slice(0, 10)} ...` : user.username}
</Text>
<Icon className='cvat-header-menu-icon' type='caret-down' />
<CaretDownOutlined className='cvat-header-menu-icon' />
</span>
</Dropdown>
</div>

2
cvat-ui/src/components/header/settings-modal/player-settings.tsx
Unescape Escape View File

@ -11,7 +11,7 @@ import Slider from 'antd/lib/slider';
import Select from 'antd/lib/select';
import Popover from 'antd/lib/popover';
import InputNumber from 'antd/lib/input-number';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Text from 'antd/lib/typography/Text';
import { CompactPicker } from 'react-color';

18
cvat-ui/src/components/header/settings-modal/settings-modal.tsx
Unescape Escape View File

@ -5,9 +5,9 @@
import './styles.scss';
import React from 'react';
import Tabs from 'antd/lib/tabs';
import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
import Modal from 'antd/lib/modal/Modal';
import { PlayCircleOutlined, LaptopOutlined } from '@ant-design/icons';
import WorkspaceSettingsContainer from 'containers/header/settings-modal/workspace-settings';
import PlayerSettingsContainer from 'containers/header/settings-modal/player-settings';
@ -28,32 +28,32 @@ const SettingsModal = (props: SettingsModalProps): JSX.Element => {
onCancel={onClose}
width={800}
className='cvat-settings-modal'
footer={
footer={(
<Button type='primary' onClick={onClose}>
Close
</Button>
}
)}
>
<div className='cvat-settings-tabs'>
<Tabs type='card' tabBarStyle={{ marginBottom: '0px', marginLeft: '-1px' }}>
<Tabs.TabPane
tab={
tab={(
<span>
<Icon type='play-circle' />
<PlayCircleOutlined />
<Text>Player</Text>
</span>
}
)}
key='player'
>
<PlayerSettingsContainer />
</Tabs.TabPane>
<Tabs.TabPane
tab={
tab={(
<span>
<Icon type='laptop' />
<LaptopOutlined />
<Text>Workspace</Text>
</span>
}
)}
key='workspace'
>
<WorkspaceSettingsContainer />

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import { EditOutlined, CloseOutlined } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text';
@ -18,7 +18,9 @@ interface ConstructorViewerItemProps {
}
export default function ConstructorViewerItem(props: ConstructorViewerItemProps): JSX.Element {
const { color, label, onUpdate, onDelete } = props;
const {
color, label, onUpdate, onDelete,
} = props;
return (
<div style={{ background: color || consts.NEW_LABEL_COLOR }} className='cvat-constructor-viewer-item'>
@ -30,7 +32,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
onClick={(): void => onUpdate(label)}
onKeyPress={(): boolean => false}
>
<Icon theme='filled' type='edit' />
<EditOutlined />
</span>
</Tooltip>
{label.id < 0 && (
@ -41,7 +43,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
onClick={(): void => onDelete(label)}
onKeyPress={(): boolean => false}
>
<Icon type='close' />
<CloseOutlined />
</span>
</Tooltip>
)}

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Icon from 'antd/lib/icon';
import { PlusCircleOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import ConstructorViewerItem from './constructor-viewer-item';
@ -21,7 +21,7 @@ export default function ConstructorViewer(props: ConstructorViewerProps): JSX.El
const list = [
<Button key='create' type='ghost' onClick={onCreate} className='cvat-constructor-viewer-new-item'>
Add label
<Icon type='plus-circle' />
<PlusCircleOutlined />
</Button>,
];
for (const label of props.labels) {

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

@ -4,13 +4,13 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
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, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Text from 'antd/lib/typography/Text';
import Badge from 'antd/lib/badge';
import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker';
@ -326,7 +326,7 @@ class LabelForm extends React.PureComponent<Props, {}> {
this.removeAttribute(key);
}}
>
<Icon type='close-circle' />
<CloseCircleOutlined />
</Button>
</Tooltip>
</Form.Item>
@ -411,7 +411,7 @@ class LabelForm extends React.PureComponent<Props, {}> {
<Form.Item>
<Button type='ghost' onClick={this.addAttribute} className='cvat-new-attribute-button'>
Add an attribute
<Icon type='plus' />
<PlusOutlined />
</Button>
</Form.Item>
</Col>

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

@ -5,12 +5,12 @@
import './styles.scss';
import React from 'react';
import Tabs from 'antd/lib/tabs';
import Icon from 'antd/lib/icon';
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 RawViewer from './raw-viewer';
import ConstructorViewer from './constructor-viewer';
@ -185,61 +185,61 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditortProps
public render(): JSX.Element {
const { labels } = this.props;
const { savedLabels, unsavedLabels, constructorMode, labelForUpdate } = this.state;
const {
savedLabels, unsavedLabels, constructorMode, labelForUpdate,
} = this.state;
return (
<Tabs
defaultActiveKey='2'
type='card'
tabBarStyle={{ marginBottom: '0px' }}
tabBarExtraContent={
<>
<Tooltip title='Copied to clipboard!' trigger='click' mouseLeaveDelay={0}>
<Button
type='link'
icon='copy'
onClick={(): void => {
copy(
JSON.stringify(
savedLabels.concat(unsavedLabels).map((label): any => ({
...label,
tabBarExtraContent={(
<Tooltip title='Copied to clipboard!' trigger='click' mouseLeaveDelay={0}>
<Button
type='link'
icon={<CopyOutlined />}
onClick={(): void => {
copy(
JSON.stringify(
savedLabels.concat(unsavedLabels).map((label): any => ({
...label,
id: undefined,
attributes: label.attributes.map((attribute): any => ({
...attribute,
id: undefined,
attributes: label.attributes.map((attribute): any => ({
...attribute,
id: undefined,
})),
})),
null,
4,
),
);
}}
>
Copy
</Button>
</Tooltip>
</>
}
})),
null,
4,
),
);
}}
>
Copy
</Button>
</Tooltip>
)}
>
<Tabs.TabPane
tab={
tab={(
<span>
<Icon type='edit' />
<EditOutlined />
<Text>Raw</Text>
</span>
}
)}
key='1'
>
<RawViewer labels={[...savedLabels, ...unsavedLabels]} onSubmit={this.handleRawSubmit} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
tab={(
<span>
<Icon type='build' />
<BuildOutlined />
<Text>Constructor</Text>
</span>
}
)}
key='2'
>
{constructorMode === ConstructorMode.SHOW && (

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

@ -7,7 +7,7 @@ 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, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import { Label, Attribute, validateParsedLabel, idGenerator } from './common';

8
cvat-ui/src/components/login-page/login-form.tsx
Unescape Escape View File

@ -3,10 +3,10 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import Input from 'antd/lib/input';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
export interface LoginData {
username: string;
@ -46,7 +46,7 @@ class LoginFormComponent extends React.PureComponent<LoginFormProps> {
})(
<Input
autoComplete='username'
prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<UserOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Username'
/>,
)}
@ -70,7 +70,7 @@ class LoginFormComponent extends React.PureComponent<LoginFormProps> {
})(
<Input
autoComplete='current-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Password'
type='password'
/>,

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

@ -5,7 +5,7 @@
import './styles.scss';
import React, { useState } from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import { CloseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import Select, { OptionProps } from 'antd/lib/select';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
@ -27,7 +27,9 @@ interface Props {
}
function DetectorRunner(props: Props): JSX.Element {
const { task, models, withCleanup, runInference } = props;
const {
task, models, withCleanup, runInference,
} = props;
const [modelID, setModelID] = useState<string | null>(null);
const [mapping, setMapping] = useState<StringObject>({});
@ -157,9 +159,8 @@ function DetectorRunner(props: Props): JSX.Element {
</Col>
<Col offset={1}>
<Tooltip title='Remove the mapped values' mouseLeaveDelay={0}>
<Icon
<CloseCircleOutlined
className='cvat-danger-circle-icon'
type='close-circle'
onClick={(): void => {
const newmapping = { ...mapping };
delete newmapping[modelLabel];
@ -189,7 +190,7 @@ function DetectorRunner(props: Props): JSX.Element {
title='Specify a label mapping between model labels and task labels'
mouseLeaveDelay={0}
>
<Icon className='cvat-info-circle-icon' type='question-circle' />
<QuestionCircleOutlined className='cvat-info-circle-icon' />
</Tooltip>
</Col>
</Row>

2
cvat-ui/src/components/models-page/empty-list.tsx
Unescape Escape View File

@ -5,7 +5,7 @@
import React from 'react';
import Text from 'antd/lib/typography/Text';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import consts from 'consts';
import { EmptyTasksIcon as EmptyModelsIcon } from 'icons';

3
cvat-ui/src/components/project-page/project-page.tsx
Unescape Escape View File

@ -18,6 +18,7 @@ import { cancelInferenceAsync } from 'actions/models-actions';
import TaskItem from 'components/tasks-page/task-item';
import DetailsComponent from './details';
import ProjectTopBar from './top-bar';
import { PlusOutlined } from '@ant-design/icons';
interface ParamType {
id: string;
@ -78,7 +79,7 @@ export default function ProjectPageComponent(): JSX.Element {
<Button
size='large'
type='primary'
icon='plus'
icon={<PlusOutlined />}
id='cvat-create-task-button'
onClick={() => history.push(`/tasks/create?projectId=${id}`)}
>

4
cvat-ui/src/components/project-page/top-bar.tsx
Unescape Escape View File

@ -5,9 +5,9 @@
import React from 'react';
import { useHistory } from 'react-router';
import { Row, Col } from 'antd/lib/grid';
import Icon, { LeftOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import Dropdown from 'antd/lib/dropdown';
import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
import { Project } from 'reducers/interfaces';
@ -27,7 +27,7 @@ export default function ProjectTopBar(props: DetailsComponentProps): JSX.Element
<Row className='cvat-task-top-bar' type='flex' justify='space-between' align='middle'>
<Col>
<Button onClick={() => history.push('/projects')} type='link' size='large'>
<Icon type='left' />
<LeftOutlined />
Back to projects
</Button>
</Col>

2
cvat-ui/src/components/projects-page/empty-list.tsx
Unescape Escape View File

@ -6,7 +6,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import Text from 'antd/lib/typography/Text';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { EmptyTasksIcon } from 'icons';

3
cvat-ui/src/components/projects-page/project-item.tsx
Unescape Escape View File

@ -15,6 +15,7 @@ import Button from 'antd/lib/button';
import { CombinedState, Project } from 'reducers/interfaces';
import ProjectActionsMenuComponent from './actions-menu';
import { MoreOutlined } from '@ant-design/icons';
interface Props {
projectInstance: Project;
@ -88,7 +89,7 @@ export default function ProjectItemComponent(props: Props): JSX.Element {
</div>
<div>
<Dropdown overlay={<ProjectActionsMenuComponent projectInstance={projectInstance} />}>
<Button type='link' size='large' icon='more' />
<Button type='link' size='large' icon={<MoreOutlined />} />
</Dropdown>
</div>
</div>

3
cvat-ui/src/components/projects-page/top-bar.tsx
Unescape Escape View File

@ -7,6 +7,7 @@ import { useHistory } from 'react-router';
import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button';
import Text from 'antd/lib/typography/Text';
import { PlusOutlined } from '@ant-design/icons';
import SearchField from './search-field';
@ -26,7 +27,7 @@ export default function TopBarComponent(): JSX.Element {
className='cvat-create-project-button'
type='primary'
onClick={(): void => history.push('/projects/create')}
icon='plus'
icon={<PlusOutlined />}
>
Create new project
</Button>

16
cvat-ui/src/components/register-page/register-form.tsx
Unescape Escape View File

@ -3,9 +3,9 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import { UserAddOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import Input from 'antd/lib/input';
import Checkbox from 'antd/lib/checkbox';
@ -135,7 +135,7 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
],
})(
<Input
prefix={<Icon type='user-add' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='First name'
/>,
)}
@ -158,7 +158,7 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
],
})(
<Input
prefix={<Icon type='user-add' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Last name'
/>,
)}
@ -183,7 +183,7 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
],
})(
<Input
prefix={<Icon type='user-add' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Username'
/>,
)}
@ -210,7 +210,7 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
})(
<Input
autoComplete='email'
prefix={<Icon type='mail' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<MailOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Email address'
/>,
)}
@ -236,7 +236,7 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Password'
/>,
)}
@ -262,7 +262,7 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Confirm password'
/>,
)}

9
cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-form.tsx
Unescape Escape View File

@ -4,13 +4,14 @@
import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import Form, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import { LockOutlined } from '@ant-design/icons';
import Input from 'antd/lib/input';
import patterns from 'utils/validation-patterns';
export interface ResetPasswordConfirmData {
newPassword1: string;
newPassword2: string;
@ -96,7 +97,7 @@ class ResetPasswordConfirmFormComponent extends React.PureComponent<ResetPasswor
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='New password'
/>,
)}
@ -122,7 +123,7 @@ class ResetPasswordConfirmFormComponent extends React.PureComponent<ResetPasswor
})(
<Input.Password
autoComplete='new-password'
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Confirm new password'
/>,
)}

6
cvat-ui/src/components/reset-password-page/reset-password-form.tsx
Unescape Escape View File

@ -3,9 +3,9 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import { MailOutlined } from '@ant-design/icons';
import Input from 'antd/lib/input';
export interface ResetPasswordData {
@ -48,7 +48,7 @@ class ResetPasswordFormComponent extends React.PureComponent<ResetPasswordFormPr
})(
<Input
autoComplete='email'
prefix={<Icon type='mail' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
prefix={<MailOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder='Email address'
/>,
)}

11
cvat-ui/src/components/task-page/details.tsx
Unescape Escape View File

@ -5,7 +5,7 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Tag from 'antd/lib/tag';
import Icon from 'antd/lib/icon';
import { CheckCircleOutlined, LoadingOutlined, WarningOutlined } from '@ant-design/icons';
import Modal from 'antd/lib/modal';
import notification from 'antd/lib/notification';
import Text from 'antd/lib/typography/Text';
@ -20,6 +20,7 @@ import UserSelector, { User } from './user-selector';
import BugTrackerEditor from './bug-tracker-editor';
import LabelsEditorComponent from '../labels-editor/labels-editor';
const core = getCore();
interface Props {
@ -235,19 +236,19 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
</a>
{repositoryStatus === 'sync' && (
<Tag color='blue'>
<Icon type='check-circle' />
<CheckCircleOutlined />
Synchronized
</Tag>
)}
{repositoryStatus === 'merged' && (
<Tag color='green'>
<Icon type='check-circle' />
<CheckCircleOutlined />
Merged
</Tag>
)}
{repositoryStatus === 'syncing' && (
<Tag color='purple'>
<Icon type='loading' />
<LoadingOutlined />
Syncing
</Tag>
)}
@ -282,7 +283,7 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
});
}}
>
<Icon type='warning' />
<WarningOutlined />
Synchronize
</Tag>
)}

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

@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { withRouter } from 'react-router-dom';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
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';
@ -17,6 +17,7 @@ import copy from 'copy-to-clipboard';
import getCore from 'cvat-core-wrapper';
import UserSelector, { User } from './user-selector';
const core = getCore();
const baseURL = core.config.backendAPI.slice(0, -7);
@ -55,7 +56,7 @@ function ReviewSummaryComponent({ jobInstance }: { jobInstance: any }): JSX.Elem
return (
<>
<p>Loading.. </p>
<Icon type='loading' />
<LoadingOutlined />
</>
);
}
@ -146,7 +147,7 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
<Text strong className={progressColor}>
{status}
<Tooltip title={<ReviewSummaryComponent jobInstance={jobInstance} />}>
<Icon type='question-circle' />
<QuestionCircleOutlined />
</Tooltip>
</Text>
);
@ -250,7 +251,7 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
copy(serialized);
}}
>
<Icon type='copy' theme='twoTone' />
<CopyOutlined />
Copy
</Button>
</Tooltip>

6
cvat-ui/src/components/task-page/top-bar.tsx
Unescape Escape View File

@ -5,9 +5,9 @@
import React from 'react';
import { useHistory } from 'react-router';
import { Row, Col } from 'antd/lib/grid';
import Icon, { LeftOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import Dropdown from 'antd/lib/dropdown';
import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
import ActionsMenuContainer from 'containers/actions-menu/actions-menu';
@ -31,12 +31,12 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
type='link'
size='large'
>
<Icon type='left' />
<LeftOutlined />
Back to project
</Button>
) : (
<Button onClick={() => history.push('/tasks')} type='link' size='large'>
<Icon type='left' />
<LeftOutlined />
Back to tasks
</Button>
)}

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

@ -4,10 +4,10 @@
import React from 'react';
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 Icon from 'antd/lib/icon';
import Modal from 'antd/lib/modal';
import { ActiveInference } from 'reducers/interfaces';
@ -42,8 +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}>
<Icon
type='close'
<CloseOutlined
onClick={() => {
Modal.confirm({
title: 'You are going to cancel automatic annotation?',

2
cvat-ui/src/components/tasks-page/empty-list.tsx
Unescape Escape View File

@ -6,7 +6,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import Text from 'antd/lib/typography/Text';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import { EmptyTasksIcon } from 'icons';

2
cvat-ui/src/components/tasks-page/task-item.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import { withRouter } from 'react-router-dom';
import Text from 'antd/lib/typography/Text';
import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import Icon from '@ant-design/icons';
import Dropdown from 'antd/lib/dropdown';
import Progress from 'antd/lib/progress';
import moment from 'moment';

3
cvat-ui/src/components/tasks-page/top-bar.tsx
Unescape Escape View File

@ -5,6 +5,7 @@
import React from 'react';
import { useHistory } from 'react-router';
import { Row, Col } from 'antd/lib/grid';
import { PlusOutlined } from '@ant-design/icons';
import Button from 'antd/lib/button';
import Input from 'antd/lib/input';
import Text from 'antd/lib/typography/Text';
@ -32,7 +33,7 @@ export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element
id='cvat-create-task-button'
type='primary'
onClick={(): void => history.push('/tasks/create')}
icon='plus'
icon={<PlusOutlined />}
>
Create new task
</Button>

Write Preview
Loading…
Cancel
Save