Added tag popover template

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx

@@ -5,20 +5,14 @@
 import React from 'react';
 
 import {
-    Icon,
     Layout,
-    Tooltip,
 } from 'antd';
 
 import {
     ActiveControl,
-    Rotation
+    Rotation,
 } from 'reducers/interfaces';
 
-import {
-    TagIcon,
-} from 'icons';
-
 import {
     Canvas,
 } from 'cvat-canvas';
@@ -32,6 +26,7 @@ import DrawRectangleControl from './draw-rectangle-control';
 import DrawPolygonControl from './draw-polygon-control';
 import DrawPolylineControl from './draw-polyline-control';
 import DrawPointsControl from './draw-points-control';
+import SetupTagControl from './setup-tag-control';
 import MergeControl from './merge-control';
 import GroupControl from './group-control';
 import SplitControl from './split-control';
@@ -91,9 +86,10 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
                 isDrawing={activeControl === ActiveControl.DRAW_POINTS}
             />
 
-            <Tooltip title='Setup a tag' placement='right'>
+            <SetupTagControl
-                <Icon component={TagIcon} style={{ pointerEvents: 'none', opacity: 0.5 }} />
+                canvasInstance={canvasInstance}
-            </Tooltip>
+                isDrawing={false}
+            />
 
             <hr />
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx

@@ -0,0 +1,48 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import {
+    Popover,
+    Icon,
+} from 'antd';
+
+import { Canvas } from 'cvat-canvas';
+import { TagIcon } from 'icons';
+
+import SetupTagPopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
+
+interface Props {
+    canvasInstance: Canvas;
+    isDrawing: boolean;
+}
+
+function SetupTagControl(props: Props): JSX.Element {
+    const {
+        isDrawing,
+    } = props;
+
+    const dynamcPopoverPros = isDrawing ? {
+        overlayStyle: {
+            display: 'none',
+        },
+    } : {};
+
+    return (
+        <Popover
+            {...dynamcPopoverPros}
+            placement='right'
+            overlayClassName='cvat-draw-shape-popover'
+            content={(
+                <SetupTagPopoverContainer />
+            )}
+        >
+            <Icon
+                component={TagIcon}
+            />
+        </Popover>
+    );
+}
+
+export default React.memo(SetupTagControl);

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx

@@ -0,0 +1,73 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+
+import {
+    Row,
+    Col,
+    Select,
+    Button,
+} from 'antd';
+
+import Text from 'antd/lib/typography/Text';
+
+interface Props {
+    labels: any[];
+    selectedLabeID: number;
+    onChangeLabel(value: string): void;
+    onSetup(): void;
+}
+
+function setupTagPopover(props: Props): JSX.Element {
+    const {
+        labels,
+        selectedLabeID,
+        onChangeLabel,
+        onSetup,
+    } = props;
+
+    return (
+        <div className='cvat-draw-shape-popover-content'>
+            <Row type='flex' justify='start'>
+                <Col>
+                    <Text className='cvat-text-color' strong>Setup tag</Text>
+                </Col>
+            </Row>
+            <Row type='flex' justify='start'>
+                <Col>
+                    <Text className='cvat-text-color'>Label</Text>
+                </Col>
+            </Row>
+            <Row type='flex' justify='center'>
+                <Col span={24}>
+                    <Select
+                        value={`${selectedLabeID}`}
+                        onChange={onChangeLabel}
+                    >
+                        {
+                            labels.map((label: any) => (
+                                <Select.Option
+                                    key={label.id}
+                                    value={`${label.id}`}
+                                >
+                                    {label.name}
+                                </Select.Option>
+                            ))
+                        }
+                    </Select>
+                </Col>
+            </Row>
+            <Row type='flex' justify='space-around'>
+                <Col span={24}>
+                    <Button onClick={onSetup}>
+                        Tag
+                    </Button>
+                </Col>
+            </Row>
+        </div>
+    );
+}
+
+export default React.memo(setupTagPopover);

cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx

@@ -0,0 +1,101 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+    CombinedState,
+} from 'reducers/interfaces';
+
+import { Canvas } from 'cvat-canvas';
+import SetupTagPopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
+
+interface DispatchToProps {
+    onTagSetup(): void;
+}
+
+interface StateToProps {
+    canvasInstance: Canvas;
+    labels: any[];
+}
+
+function mapDispatchToProps(dispatch: any): DispatchToProps {
+    return {
+        onTagSetup(): void {
+            dispatch();
+        },
+    };
+}
+
+function mapStateToProps(state: CombinedState): StateToProps {
+    const {
+        annotation: {
+            canvas: {
+                instance: canvasInstance,
+            },
+            job: {
+                labels,
+            },
+        },
+    } = state;
+
+    return {
+        canvasInstance,
+        labels,
+    };
+}
+
+type Props = StateToProps;
+
+interface State {
+    selectedLabelID: number;
+}
+
+class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+
+        const defaultLabelID = props.labels[0].id;
+        this.state = {
+            selectedLabelID: defaultLabelID,
+        };
+    }
+
+    private onChangeLabel = (value: string): void => {
+        this.setState({
+            selectedLabelID: +value,
+        });
+    };
+
+    private onSetup(): void {
+        const { canvasInstance } = this.props;
+
+        canvasInstance.cancel();
+    }
+
+    public render(): JSX.Element {
+        const {
+            selectedLabelID,
+        } = this.state;
+
+        const {
+            labels,
+        } = this.props;
+
+        return (
+            <SetupTagPopoverComponent
+                labels={labels}
+                selectedLabeID={selectedLabelID}
+                onChangeLabel={this.onChangeLabel}
+                onSetup={this.onSetup}
+            />
+        );
+    }
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DrawShapePopoverContainer);

cvat-ui/src/reducers/interfaces.ts

@@ -245,6 +245,7 @@ export enum ActiveControl {
     DRAW_POLYGON = 'draw_polygon',
     DRAW_POLYLINE = 'draw_polyline',
     DRAW_POINTS = 'draw_points',
+    SETUP_TAG = 'setup_tag',
     MERGE = 'merge',
     GROUP = 'group',
     SPLIT = 'split',