Titles for object list header

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

@@ -10,6 +10,7 @@ import Text from 'antd/lib/typography/Text';
 
 import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input';
 import { StatesOrdering } from 'reducers/interfaces';
+import { Tooltip } from 'antd';
 
 interface StatesOrderingSelectorComponentProps {
     statesOrdering: StatesOrdering;
@@ -56,6 +57,8 @@ interface Props {
     statesLocked: boolean;
     statesCollapsed: boolean;
     statesOrdering: StatesOrdering;
+    switchLockAllShortcut: string;
+    switchHiddenAllShortcut: string;
     changeStatesOrdering(value: StatesOrdering): void;
     lockAllStates(): void;
     unlockAllStates(): void;
@@ -71,6 +74,8 @@ function ObjectListHeader(props: Props): JSX.Element {
         statesLocked,
         statesCollapsed,
         statesOrdering,
+        switchLockAllShortcut,
+        switchHiddenAllShortcut,
         changeStatesOrdering,
         lockAllStates,
         unlockAllStates,
@@ -89,19 +94,25 @@ function ObjectListHeader(props: Props): JSX.Element {
             </Row>
             <Row type='flex' justify='space-between' align='middle'>
                 <Col span={2}>
-                    { statesLocked
+                    <Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`}>
-                        ? <Icon type='lock' onClick={unlockAllStates} />
+                        { statesLocked
-                        : <Icon type='unlock' onClick={lockAllStates} />}
+                            ? <Icon type='lock' onClick={unlockAllStates} />
+                            : <Icon type='unlock' onClick={lockAllStates} />}
+                    </Tooltip>
                 </Col>
                 <Col span={2}>
-                    { statesHidden
+                    <Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`}>
-                        ? <Icon type='eye-invisible' onClick={showAllStates} />
+                        { statesHidden
-                        : <Icon type='eye' onClick={hideAllStates} />}
+                            ? <Icon type='eye-invisible' onClick={showAllStates} />
+                            : <Icon type='eye' onClick={hideAllStates} />}
+                    </Tooltip>
                 </Col>
                 <Col span={2}>
-                    { statesCollapsed
+                    <Tooltip title='Expand/collapse all'>
-                        ? <Icon type='caret-down' onClick={expandAllStates} />
+                        { statesCollapsed
-                        : <Icon type='caret-up' onClick={collapseAllStates} />}
+                            ? <Icon type='caret-down' onClick={expandAllStates} />
+                            : <Icon type='caret-up' onClick={collapseAllStates} />}
+                    </Tooltip>
                 </Col>
                 <StatesOrderingSelector
                     statesOrdering={statesOrdering}

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

@@ -8,7 +8,6 @@ import { StatesOrdering } from 'reducers/interfaces';
 import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
 import ObjectListHeader from './objects-list-header';
 
-
 interface Props {
     listHeight: number;
     statesHidden: boolean;
@@ -16,6 +15,8 @@ interface Props {
     statesCollapsed: boolean;
     statesOrdering: StatesOrdering;
     sortedStatesID: number[];
+    switchLockAllShortcut: string;
+    switchHiddenAllShortcut: string;
     changeStatesOrdering(value: StatesOrdering): void;
     lockAllStates(): void;
     unlockAllStates(): void;
@@ -33,6 +34,8 @@ function ObjectListComponent(props: Props): JSX.Element {
         statesCollapsed,
         statesOrdering,
         sortedStatesID,
+        switchLockAllShortcut,
+        switchHiddenAllShortcut,
         changeStatesOrdering,
         lockAllStates,
         unlockAllStates,
@@ -49,6 +52,8 @@ function ObjectListComponent(props: Props): JSX.Element {
                 statesLocked={statesLocked}
                 statesCollapsed={statesCollapsed}
                 statesOrdering={statesOrdering}
+                switchLockAllShortcut={switchLockAllShortcut}
+                switchHiddenAllShortcut={switchHiddenAllShortcut}
                 changeStatesOrdering={changeStatesOrdering}
                 lockAllStates={lockAllStates}
                 unlockAllStates={unlockAllStates}

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

@@ -6,6 +6,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
 
+import { formatShortcuts } from 'utils/shortcuts';
 import ObjectsListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-list';
 import {
     updateAnnotationsAsync,
@@ -15,7 +16,6 @@ import {
     copyShape as copyShapeAction,
     propagateObject as propagateObjectAction,
 } from 'actions/annotation-actions';
-
 import { CombinedState, StatesOrdering, ObjectType } from 'reducers/interfaces';
 
 interface StateToProps {
@@ -410,6 +410,8 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                     {...this.props}
                     statesOrdering={statesOrdering}
                     sortedStatesID={sortedStatesID}
+                    switchHiddenAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_HIDDEN)}
+                    switchLockAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_LOCK)}
                     changeStatesOrdering={this.onChangeStatesOrdering}
                     lockAllStates={this.onLockAllStates}
                     unlockAllStates={this.onUnlockAllStates}