Added css classes depending on popover state (#2624)

* Added css classes depending on popover state

* Updated version

* Visibility handling for rotation

* Minor fixes

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

@@ -12,6 +12,7 @@ import { ShapeType } from 'reducers/interfaces';
 import { CubeIcon } from 'icons';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -20,6 +21,7 @@ interface Props {
 
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-cuboid');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -41,14 +43,14 @@ function DrawPolygonControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.CUBOID} />}
         >
             <Icon {...dynamicIconProps} component={CubeIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -11,6 +11,7 @@ import { PointIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawPointsControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-points');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawPointsControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POINTS} />}
         >
             <Icon {...dynamicIconProps} component={PointIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -11,6 +11,7 @@ import { PolygonIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-polygon');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawPolygonControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POLYGON} />}
         >
             <Icon {...dynamicIconProps} component={PolygonIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -11,6 +11,7 @@ import { PolylineIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawPolylineControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-polyline');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawPolylineControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POLYLINE} />}
         >
             <Icon {...dynamicIconProps} component={PolylineIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -11,6 +11,7 @@ import { RectangleIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawRectangleControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-rectangle');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawRectangleControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.RECTANGLE} />}
         >
             <Icon {...dynamicIconProps} component={RectangleIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -0,0 +1,41 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React, { useState } from 'react';
+import Popover, { PopoverProps } from 'antd/lib/popover';
+
+export default function withVisibilityHandling(WrappedComponent: typeof Popover, popoverType: string) {
+    return (props: PopoverProps): JSX.Element => {
+        const [initialized, setInitialized] = useState<boolean>(false);
+        const [visible, setVisible] = useState<boolean>(false);
+        let { overlayClassName } = props;
+        if (typeof overlayClassName !== 'string') overlayClassName = '';
+
+        overlayClassName += ` cvat-${popoverType}-popover`;
+        if (visible) {
+            overlayClassName += ` cvat-${popoverType}-popover-visible`;
+        }
+
+        const callback = (event: Event): void => {
+            if ((event as AnimationEvent).animationName === 'antZoomBigIn') {
+                setVisible(true);
+            }
+        };
+
+        return (
+            <WrappedComponent
+                {...props}
+                overlayClassName={overlayClassName.trim()}
+                onVisibleChange={(_visible: boolean) => {
+                    if (!_visible) setVisible(false);
+                    if (!initialized) {
+                        const self = window.document.getElementsByClassName(`cvat-${popoverType}-popover`)[0];
+                        self?.addEventListener('animationend', callback);
+                        setInitialized(true);
+                    }
+                }}
+            />
+        );
+    };
+}

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

@@ -10,6 +10,8 @@ import Popover from 'antd/lib/popover';
 import { RotateIcon } from 'icons';
 import { Rotation } from 'reducers/interfaces';
 
+import withVisibilityHandling from './handle-popover-visibility';
+
 interface Props {
     clockwiseShortcut: string;
     anticlockwiseShortcut: string;
@@ -18,10 +20,10 @@ interface Props {
 
 function RotateControl(props: Props): JSX.Element {
     const { anticlockwiseShortcut, clockwiseShortcut, rotateFrame } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'rotate-canvas');
 
     return (
-        <Popover
+        <CustomPopover
-            overlayClassName='cvat-rotate-canvas-controls'
             placement='right'
             content={(
                 <>
@@ -52,7 +54,7 @@ function RotateControl(props: Props): JSX.Element {
             trigger='hover'
         >
             <Icon className='cvat-rotate-canvas-control' component={RotateIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -10,6 +10,7 @@ import { Canvas } from 'cvat-canvas-wrapper';
 import { TagIcon } from 'icons';
 
 import SetupTagPopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -18,22 +19,20 @@ interface Props {
 
 function SetupTagControl(props: Props): JSX.Element {
     const { isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'setup-tag');
 
-    const dynamcPopoverPros = isDrawing ? {
+    const dynamcPopoverPros = isDrawing ?
-        overlayStyle: {
+        {
-            display: 'none',
+            overlayStyle: {
-        },
+                display: 'none',
-    } : {};
+            },
+        } :
+        {};
 
     return (
-        <Popover
+        <CustomPopover {...dynamcPopoverPros} placement='right' content={<SetupTagPopoverContainer />}>
-            {...dynamcPopoverPros}
-            placement='right'
-            overlayClassName='cvat-draw-shape-popover'
-            content={<SetupTagPopoverContainer />}
-        >
             <Icon className='cvat-setup-tag-control' component={TagIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

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

@@ -23,7 +23,7 @@ function SetupTagPopover(props: Props): JSX.Element {
     } = props;
 
     return (
-        <div className='cvat-draw-shape-popover-content'>
+        <div className='cvat-setup-tag-popover-content'>
             <Row justify='start'>
                 <Col>
                     <Text className='cvat-text-color' strong>

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

@@ -32,6 +32,7 @@ import {
 import { InteractionResult } from 'cvat-canvas/src/typescript/canvas';
 import DetectorRunner from 'components/model-runner-modal/detector-runner';
 import LabelSelector from 'components/label-selector/label-selector';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface StateToProps {
     canvasInstance: Canvas;
@@ -746,6 +747,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
         const { fetching, trackingProgress } = this.state;
 
         if (![...interactors, ...detectors, ...trackers].length) return null;
+        const CustomPopover = withVisibilityHandling(Popover, 'tools-control');
 
         const dynamcPopoverPros = isActivated ?
             {
@@ -781,14 +783,9 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         <Progress percent={+(trackingProgress * 100).toFixed(0)} status='active' />
                     )}
                 </Modal>
-                <Popover
+                <CustomPopover {...dynamcPopoverPros} placement='right' content={this.renderPopoverContent()}>
-                    {...dynamcPopoverPros}
-                    placement='right'
-                    overlayClassName='cvat-tools-control-popover'
-                    content={this.renderPopoverContent()}
-                >
                     <Icon {...dynamicIconProps} component={AIToolsIcon} />
-                </Popover>
+                </CustomPopover>
             </>
         );
     }

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -85,13 +85,14 @@
     }
 }
 
-.cvat-rotate-canvas-controls {
+.cvat-rotate-canvas-popover {
     .ant-popover-inner-content {
         padding: 0;
     }
 }
 
 .cvat-draw-shape-popover,
+.cvat-setup-tag-popover,
 .cvat-tools-control-popover {
     .ant-popover-inner-content {
         padding: 0;
@@ -115,6 +116,7 @@
     background: $background-color-2;
 }
 
+.cvat-setup-tag-popover-content,
 .cvat-draw-shape-popover-content {
     padding: 10px;
     border-radius: 5px;

tests/cypress/support/commands.js

@@ -151,13 +151,11 @@ Cypress.Commands.add('createRectangle', (createRectangleParams) => {
 });
 
 Cypress.Commands.add('switchLabel', (labelName, objectType) => {
-    const pattern = `^(Draw new|Setup) ${objectType}$`;
+    cy.get(
-    const regex = new RegExp(pattern, 'g');
+        objectType === 'tag' ? '.cvat-setup-tag-popover-visible' : `.cvat-draw-${objectType}-popover-visible`,
-    cy.contains(regex)
+    ).within(() => {
-        .parents('.cvat-draw-shape-popover-content')
+        cy.get('.ant-select-selection-item').click();
-        .within(() => {
+    });
-            cy.get('.ant-select-selection-item').click();
-        });
     cy.get('.ant-select-dropdown')
         .not('.ant-select-dropdown-hidden')
         .within(() => {
@@ -488,7 +486,7 @@ Cypress.Commands.add('createTag', (labelName) => {
     cy.get('.cvat-setup-tag-control').click();
     cy.switchLabel(labelName, 'tag');
     cy.contains('Setup tag')
-        .parents('.cvat-draw-shape-popover-content')
+        .parents('.cvat-setup-tag-popover-content')
         .within(() => {
             cy.get('button').click();
         });