Added css classes depending on popover state (#2624)

* Added css classes depending on popover state * Updated version * Visibility handling for rotation * Minor fixes
5 years ago · c89cca7038
parent ddd1c08963
commit c89cca7038
12 changed files with 91 additions and 42 deletions
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx
+++ b/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>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
+++ b/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>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
+++ b/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>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
+++ b/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>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
+++ b/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>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
@ -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);
+                    }
+                }}
+            />
+        );
+    };
+}
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
@ -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
-            overlayClassName='cvat-rotate-canvas-controls'
+        <CustomPopover
            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>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx
+++ b/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 ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};

    return (
-        <Popover
-            {...dynamcPopoverPros}
-            placement='right'
-            overlayClassName='cvat-draw-shape-popover'
-            content={<SetupTagPopoverContainer />}
-        >
+        <CustomPopover {...dynamcPopoverPros} placement='right' content={<SetupTagPopoverContainer />}>
            <Icon className='cvat-setup-tag-control' component={TagIcon} />
-        </Popover>
+        </CustomPopover>
    );
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
@ -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>
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
+++ b/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
-                    {...dynamcPopoverPros}
-                    placement='right'
-                    overlayClassName='cvat-tools-control-popover'
-                    content={this.renderPopoverContent()}
-                >
+                <CustomPopover {...dynamcPopoverPros} placement='right' content={this.renderPopoverContent()}>
                    <Icon {...dynamicIconProps} component={AIToolsIcon} />
-                </Popover>
+                </CustomPopover>
            </>
        );
    }
--- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
+++ b/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;
--- a/tests/cypress/support/commands.js
+++ b/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}$`;
-    const regex = new RegExp(pattern, 'g');
-    cy.contains(regex)
-        .parents('.cvat-draw-shape-popover-content')
-        .within(() => {
-            cy.get('.ant-select-selection-item').click();
-        });
+    cy.get(
+        objectType === 'tag' ? '.cvat-setup-tag-popover-visible' : `.cvat-draw-${objectType}-popover-visible`,
+    ).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();
        });