Some JS code was simplified by using css, a reported issue was fixed in this way (#3289)

* Some JS code was simplified by using css

* Updated version & changelog

* Fixed shortcut

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Incorrect attribute import in tracks (<https://github.com/openvinotoolkit/cvat/pull/3229>)
 - Issue "is not a constructor" when create object, save, undo, save, redo save (<https://github.com/openvinotoolkit/cvat/pull/3292>)
 - Fix CLI create an infinite loop if git repository responds with failure (<https://github.com/openvinotoolkit/cvat/pull/3267>)
+- Bug with sidebar & fullscreen (<https://github.com/openvinotoolkit/cvat/pull/3289>)
 
 ### Security
 

cvat-ui/package-lock.json

 {
   "name": "cvat-ui",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

 {
   "name": "cvat-ui",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/annotation-actions.ts

@@ -146,7 +146,6 @@ export enum AnnotationActionTypes {
     GROUP_ANNOTATIONS_FAILED = 'GROUP_ANNOTATIONS_FAILED',
     SPLIT_ANNOTATIONS_SUCCESS = 'SPLIT_ANNOTATIONS_SUCCESS',
     SPLIT_ANNOTATIONS_FAILED = 'SPLIT_ANNOTATIONS_FAILED',
-    UPDATE_TAB_CONTENT_HEIGHT = 'UPDATE_TAB_CONTENT_HEIGHT',
     COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR',
     COLLAPSE_APPEARANCE = 'COLLAPSE_APPEARANCE',
     COLLAPSE_OBJECT_ITEMS = 'COLLAPSE_OBJECT_ITEMS',
@@ -576,15 +575,6 @@ export function activateObject(activatedStateID: number | null, activatedAttribu
     };
 }
 
-export function updateTabContentHeight(tabContentHeight: number): AnyAction {
-    return {
-        type: AnnotationActionTypes.UPDATE_TAB_CONTENT_HEIGHT,
-        payload: {
-            tabContentHeight,
-        },
-    };
-}
-
 export function collapseSidebar(): AnyAction {
     return {
         type: AnnotationActionTypes.COLLAPSE_SIDEBAR,

cvat-ui/src/components/annotation-page/appearance-block.tsx

@@ -15,10 +15,7 @@ import Button from 'antd/lib/button';
 import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker';
 import { ColorizeIcon } from 'icons';
 import { ColorBy, CombinedState, DimensionType } from 'reducers/interfaces';
-import {
-    collapseAppearance as collapseAppearanceAction,
-    updateTabContentHeight as updateTabContentHeightAction,
-} from 'actions/annotation-actions';
+import { collapseAppearance as collapseAppearanceAction } from 'actions/annotation-actions';
 import {
     changeShapesColorBy as changeShapesColorByAction,
     changeShapesOpacity as changeShapesOpacityAction,
@@ -50,21 +47,6 @@ interface DispatchToProps {
     changeShowProjections(event: CheckboxChangeEvent): void;
 }
 
-export function computeHeight(): number {
-    const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
-    const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
-    const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-nav'));
-
-    if (sidebar && appearance && tabs) {
-        const maxHeight = sidebar ? sidebar.clientHeight : 0;
-        const appearanceHeight = appearance ? appearance.clientHeight : 0;
-        const tabsHeight = tabs ? tabs.clientHeight : 0;
-        return maxHeight - appearanceHeight - tabsHeight;
-    }
-
-    return 0;
-}
-
 function mapStateToProps(state: CombinedState): StateToProps {
     const {
         annotation: {
@@ -95,19 +77,6 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>): DispatchToProps {
     return {
         collapseAppearance(): void {
             dispatch(collapseAppearanceAction());
-            const [collapser] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
-
-            if (collapser) {
-                const listener = (event: Event): void => {
-                    if ((event as TransitionEvent).propertyName === 'height') {
-                        const height = computeHeight();
-                        dispatch(updateTabContentHeightAction(height));
-                        collapser.removeEventListener('transitionend', listener);
-                    }
-                };
-
-                collapser.addEventListener('transitionend', listener);
-            }
         },
         changeShapesColorBy(event: RadioChangeEvent): void {
             dispatch(changeShapesColorByAction(event.target.value));

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -10,6 +10,7 @@ import Layout, { SiderProps } from 'antd/lib/layout';
 import Text from 'antd/lib/typography/Text';
 
 import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import { LogType } from 'cvat-logger';
 import {
     activateObject as activateObjectAction,
@@ -20,6 +21,7 @@ import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import { ThunkDispatch } from 'utils/redux';
 import AppearanceBlock from 'components/annotation-page/appearance-block';
 import ObjectButtonsContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-buttons';
+import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image';
 import { CombinedState, ObjectType } from 'reducers/interfaces';
 import AttributeEditor from './attribute-editor';
 import AttributeSwitcher from './attribute-switcher';
@@ -34,7 +36,7 @@ interface StateToProps {
     jobInstance: any;
     keyMap: KeyMap;
     normalizedKeyMap: Record<string, string>;
-    canvasInstance: Canvas;
+    canvasInstance: Canvas | Canvas3d;
     canvasIsReady: boolean;
     curZLayer: number;
 }
@@ -134,6 +136,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
             (collapser as HTMLElement).addEventListener('transitionend', listener as any);
         }
 
+        adjustContextImagePosition(!sidebarCollapsed);
         setSidebarCollapsed(!sidebarCollapsed);
     };
 

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx

@@ -255,7 +255,7 @@ function AttributeEditor(props: Props): JSX.Element {
     const { inputType, values, id: attrID } = attribute;
 
     return (
-        <div>
+        <div className='attribute-annotations-sidebar-attribute-editor'>
             {renderList({ values, inputType, onChange })}
             <hr />
             {renderInputElement({

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

@@ -8,9 +8,14 @@
     height: 100%;
 }
 
-.attribute-annotation-sidebar {
+.attribute-annotation-sidebar:not(.ant-layout-sider-collapsed) {
     background: $background-color-2;
     padding: 5px;
+
+    > .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .cvat-attribute-annotation-sidebar-object-switcher,
@@ -43,6 +48,11 @@
 .attribute-annotations-sidebar-not-found-wrapper {
     margin-top: 20px;
     text-align: center;
+    flex-grow: 10;
+}
+
+.attribute-annotations-sidebar-attribute-editor {
+    flex-grow: 10;
 }
 
 .attribute-annotation-sidebar-attr-list-wrapper {

cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx

@@ -13,6 +13,19 @@ import { CombinedState } from 'reducers/interfaces';
 import { hideShowContextImage, getContextImage } from 'actions/annotation-actions';
 import CVATTooltip from 'components/common/cvat-tooltip';
 
+export function adjustContextImagePosition(sidebarCollapsed: boolean): void {
+    const element = window.document.getElementsByClassName('cvat-context-image-wrapper')[0] as
+        | HTMLDivElement
+        | undefined;
+    if (element) {
+        if (sidebarCollapsed) {
+            element.style.right = '40px';
+        } else {
+            element.style.right = '';
+        }
+    }
+}
+
 export default function ContextImage(): JSX.Element | null {
     const dispatch = useDispatch();
     const { number: frame, hasRelatedContext } = useSelector((state: CombinedState) => state.annotation.player.frame);

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx

@@ -17,7 +17,6 @@ import { CombinedState } from 'reducers/interfaces';
 
 export default function LabelsListComponent(): JSX.Element {
     const dispatch = useDispatch();
-    const tabContentHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight);
     const frame = useSelector((state: CombinedState): number => state.annotation.player.frame.number);
     const frameIssues = useSelector((state: CombinedState): any[] => state.review.frameIssues);
     const issues = useSelector((state: CombinedState): any[] => state.review.issues);
@@ -50,7 +49,7 @@ export default function LabelsListComponent(): JSX.Element {
         };
 
     return (
-        <div style={{ height: tabContentHeight }}>
+        <>
             <div className='cvat-objects-sidebar-issues-list-header'>
                 <Row justify='start' align='middle'>
                     <Col>
@@ -122,6 +121,6 @@ export default function LabelsListComponent(): JSX.Element {
                     ),
                 )}
             </div>
-        </div>
+        </>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx

@@ -14,7 +14,6 @@ import GlobalHotKeys from 'utils/mousetrap-react';
 function LabelsListComponent(): JSX.Element {
     const dispatch = useDispatch();
     const labels = useSelector((state: CombinedState) => state.annotation.job.labels);
-    const listHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight);
     const activatedStateID = useSelector((state: CombinedState) => state.annotation.annotations.activatedStateID);
     const states = useSelector((state: CombinedState) => state.annotation.annotations.states);
     const keyMap = useSelector((state: CombinedState) => state.shortcuts.keyMap);
@@ -87,7 +86,7 @@ function LabelsListComponent(): JSX.Element {
     };
 
     return (
-        <div style={{ height: listHeight }} className='cvat-objects-sidebar-labels-list'>
+        <div className='cvat-objects-sidebar-labels-list'>
             <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} />
             {labelIDs.map(
                 (labelID: number): JSX.Element => (

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

-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -10,7 +10,6 @@ import ObjectListHeader from './objects-list-header';
 
 interface Props {
     readonly: boolean;
-    listHeight: number;
     statesHidden: boolean;
     statesLocked: boolean;
     statesCollapsedAll: boolean;
@@ -31,7 +30,6 @@ interface Props {
 function ObjectListComponent(props: Props): JSX.Element {
     const {
         readonly,
-        listHeight,
         statesHidden,
         statesLocked,
         statesCollapsedAll,
@@ -50,7 +48,7 @@ function ObjectListComponent(props: Props): JSX.Element {
     } = props;
 
     return (
-        <div style={{ height: listHeight }}>
+        <>
             <ObjectListHeader
                 readonly={readonly}
                 statesHidden={statesHidden}
@@ -80,7 +78,7 @@ function ObjectListComponent(props: Props): JSX.Element {
                     ),
                 )}
             </div>
-        </div>
+        </>
     );
 }
 

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

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React, { Dispatch, useEffect, TransitionEvent } from 'react';
+import React, { Dispatch, TransitionEvent } from 'react';
 import { AnyAction } from 'redux';
 import { connect } from 'react-redux';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
@@ -12,13 +12,12 @@ import Tabs from 'antd/lib/tabs';
 import Layout from 'antd/lib/layout';
 
 import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import { CombinedState } from 'reducers/interfaces';
 import LabelsList from 'components/annotation-page/standard-workspace/objects-side-bar/labels-list';
-import {
-    collapseSidebar as collapseSidebarAction,
-    updateTabContentHeight as updateTabContentHeightAction,
-} from 'actions/annotation-actions';
-import AppearanceBlock, { computeHeight } from 'components/annotation-page/appearance-block';
+import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image';
+import { collapseSidebar as collapseSidebarAction } from 'actions/annotation-actions';
+import AppearanceBlock from 'components/annotation-page/appearance-block';
 import IssuesListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/issues-list';
 
 interface OwnProps {
@@ -27,12 +26,11 @@ interface OwnProps {
 
 interface StateToProps {
     sidebarCollapsed: boolean;
-    canvasInstance: Canvas;
+    canvasInstance: Canvas | Canvas3d;
 }
 
 interface DispatchToProps {
     collapseSidebar(): void;
-    updateTabContentHeight(): void;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
@@ -54,33 +52,14 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>): DispatchToProps {
         collapseSidebar(): void {
             dispatch(collapseSidebarAction());
         },
-        updateTabContentHeight(): void {
-            const height = computeHeight();
-            dispatch(updateTabContentHeightAction(height));
-        },
     };
 }
 
 function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.Element {
     const {
-        sidebarCollapsed, canvasInstance, collapseSidebar, updateTabContentHeight, objectsList,
+        sidebarCollapsed, canvasInstance, collapseSidebar, objectsList,
     } = props;
 
-    useEffect(() => {
-        const alignTabHeight = (): void => {
-            if (!sidebarCollapsed) {
-                updateTabContentHeight();
-            }
-        };
-
-        window.addEventListener('resize', alignTabHeight);
-        alignTabHeight();
-
-        return () => {
-            window.removeEventListener('resize', alignTabHeight);
-        };
-    }, []);
-
     const collapse = (): void => {
         const [collapser] = window.document.getElementsByClassName('cvat-objects-sidebar');
         const listener = (event: TransitionEvent): void => {
@@ -95,6 +74,7 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
             (collapser as HTMLElement).addEventListener('transitionend', listener as any);
         }
 
+        adjustContextImagePosition(!sidebarCollapsed);
         collapseSidebar();
     };
 

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

@@ -6,8 +6,6 @@
 
 .cvat-objects-appearance-collapse.ant-collapse {
     width: 100%;
-    bottom: 0;
-    position: absolute;
     border-radius: 0;
 
     > .ant-collapse-item {

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

@@ -73,6 +73,23 @@
     overflow-y: auto;
     overflow-x: hidden;
 
+    > .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+
+        > .cvat-objects-sidebar-tabs {
+            flex-grow: 10;
+
+            > div {
+                display: flex;
+
+                div[role='tabpanel'] {
+                    height: 100%;
+                }
+            }
+        }
+    }
+
     &.ant-layout-sider-collapsed {
         overflow: initial;
     }

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

@@ -8,7 +8,7 @@
     height: 100%;
 }
 
-.cvat-tag-annotation-sidebar {
+.cvat-tag-annotation-sidebar:not(.ant-layout-sider-collapsed) {
     background: $background-color-2;
     padding: 5px;
 

cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx

@@ -21,7 +21,9 @@ import {
     rememberObject,
 } from 'actions/annotation-actions';
 import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import { CombinedState, ObjectType } from 'reducers/interfaces';
+import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image';
 import LabelSelector from 'components/label-selector/label-selector';
 import getCore from 'cvat-core-wrapper';
 import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
@@ -33,7 +35,7 @@ interface StateToProps {
     states: any[];
     labels: any[];
     jobInstance: any;
-    canvasInstance: Canvas;
+    canvasInstance: Canvas | Canvas3d;
     frameNumber: number;
     keyMap: KeyMap;
     normalizedKeyMap: Record<string, string>;
@@ -203,7 +205,10 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                 className={`cvat-objects-sidebar-sider
                     ant-layout-sider-zero-width-trigger
                     ant-layout-sider-zero-width-trigger-left`}
-                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                onClick={() => {
+                    adjustContextImagePosition(!sidebarCollapsed);
+                    setSidebarCollapsed(!sidebarCollapsed);
+                }}
             >
                 {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
             </span>
@@ -222,7 +227,10 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                     className={`cvat-objects-sidebar-sider
                         ant-layout-sider-zero-width-trigger
                         ant-layout-sider-zero-width-trigger-left`}
-                    onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                    onClick={() => {
+                        adjustContextImagePosition(!sidebarCollapsed);
+                        setSidebarCollapsed(!sidebarCollapsed);
+                    }}
                 >
                     {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
                 </span>

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -17,6 +17,7 @@ import {
     propagateObject as propagateObjectAction,
 } from 'actions/annotation-actions';
 import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import {
     CombinedState, StatesOrdering, ObjectType, ColorBy,
 } from 'reducers/interfaces';
@@ -28,7 +29,6 @@ interface OwnProps {
 interface StateToProps {
     jobInstance: any;
     frameNumber: any;
-    listHeight: number;
     statesHidden: boolean;
     statesLocked: boolean;
     statesCollapsedAll: boolean;
@@ -42,7 +42,7 @@ interface StateToProps {
     maxZLayer: number;
     keyMap: KeyMap;
     normalizedKeyMap: Record<string, string>;
-    canvasInstance: Canvas;
+    canvasInstance: Canvas | Canvas3d;
 }
 
 interface DispatchToProps {
@@ -71,7 +71,6 @@ function mapStateToProps(state: CombinedState): StateToProps {
                 frame: { number: frameNumber },
             },
             canvas: { instance: canvasInstance },
-            tabContentHeight: listHeight,
             colors,
         },
         settings: {
@@ -94,7 +93,6 @@ function mapStateToProps(state: CombinedState): StateToProps {
     });
 
     return {
-        listHeight,
         statesHidden,
         statesLocked,
         statesCollapsedAll: collapsedAll,
@@ -263,7 +261,6 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             colors,
             colorBy,
             readonly,
-            listHeight,
             statesCollapsedAll,
             updateAnnotations,
             changeGroupColor,
@@ -441,7 +438,6 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             <>
                 <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} />
                 <ObjectsListComponent
-                    listHeight={listHeight}
                     statesHidden={statesHidden}
                     statesLocked={statesLocked}
                     statesCollapsedAll={statesCollapsedAll}

cvat-ui/src/reducers/annotation-reducer.ts

@@ -109,7 +109,6 @@ const defaultState: AnnotationState = {
     filtersPanelVisible: false,
     requestReviewDialogVisible: false,
     submitReviewDialogVisible: false,
-    tabContentHeight: 0,
     predictor: {
         enabled: false,
         error: null,
@@ -405,13 +404,6 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                 appearanceCollapsed: !state.appearanceCollapsed,
             };
         }
-        case AnnotationActionTypes.UPDATE_TAB_CONTENT_HEIGHT: {
-            const { tabContentHeight } = action.payload;
-            return {
-                ...state,
-                tabContentHeight,
-            };
-        }
         case AnnotationActionTypes.COLLAPSE_OBJECT_ITEMS: {
             const { states, collapsed } = action.payload;
 

cvat-ui/src/reducers/interfaces.ts

@@ -489,7 +489,6 @@ export interface AnnotationState {
     submitReviewDialogVisible: boolean;
     sidebarCollapsed: boolean;
     appearanceCollapsed: boolean;
-    tabContentHeight: number;
     workspace: Workspace;
     predictor: PredictorState;
     aiToolsRef: MutableRefObject<any>;

cvat-ui/src/reducers/shortcuts-reducer.ts

@@ -9,7 +9,7 @@ import { KeyMap, KeyMapItem } from 'utils/mousetrap-react';
 import { ShortcutsState } from './interfaces';
 
 function formatShortcuts(shortcuts: KeyMapItem): string {
-    const list: string[] = shortcuts.sequences as string[];
+    const list: string[] = shortcuts.displayedSequences || (shortcuts.sequences as string[]);
     return `[${list
         .map((shortcut: string): string => {
             let keys = shortcut.split('+');
@@ -270,7 +270,8 @@ const defaultKeyMap = ({
     FOCUS_INPUT_FRAME: {
         name: 'Focus input frame',
         description: 'Focus on the element to change the current frame',
-        sequences: ['~'],
+        sequences: ['`'],
+        displayedSequences: ['~'],
         action: 'keydown',
     },
     SWITCH_AUTOMATIC_BORDERING: {

cvat-ui/src/utils/mousetrap-react.tsx

@@ -9,6 +9,7 @@ export interface KeyMapItem {
     name: string;
     description: string;
     sequences: string[];
+    displayedSequences?: string[];
     action: 'keydown' | 'keyup' | 'keypress';
 }