Merge pull request #2419 from openvinotoolkit/bs/new_css_classes

Additional css classes for testing

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

@@ -68,7 +68,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
     const {
         annotation: { appearanceCollapsed },
         settings: {
-            shapes: { colorBy, opacity, selectedOpacity, outlined, outlineColor, showBitmap, showProjections },
+            shapes: {
+                colorBy, opacity, selectedOpacity, outlined, outlineColor, showBitmap, showProjections,
+            },
         },
     } = state;
 
@@ -153,16 +155,33 @@ function AppearanceBlock(props: Props): JSX.Element {
             <Collapse.Panel header={<Text strong>Appearance</Text>} key='appearance'>
                 <div className='cvat-objects-appearance-content'>
                     <Text type='secondary'>Color by</Text>
-                    <Radio.Group value={colorBy} onChange={changeShapesColorBy}>
+                    <Radio.Group
+                        className='cvat-appearance-color-by-radio-group'
+                        value={colorBy}
+                        onChange={changeShapesColorBy}
+                    >
                         <Radio.Button value={ColorBy.LABEL}>{ColorBy.LABEL}</Radio.Button>
                         <Radio.Button value={ColorBy.INSTANCE}>{ColorBy.INSTANCE}</Radio.Button>
                         <Radio.Button value={ColorBy.GROUP}>{ColorBy.GROUP}</Radio.Button>
                     </Radio.Group>
                     <Text type='secondary'>Opacity</Text>
-                    <Slider onChange={changeShapesOpacity} value={opacity} min={0} max={100} />
+                    <Slider
+                        className='cvat-appearance-opacity-slider'
+                        onChange={changeShapesOpacity}
+                        value={opacity}
+                        min={0}
+                        max={100}
+                    />
                     <Text type='secondary'>Selected opacity</Text>
-                    <Slider onChange={changeSelectedShapesOpacity} value={selectedOpacity} min={0} max={100} />
+                    <Slider
+                        className='cvat-appearance-selected-opacity-slider'
+                        onChange={changeSelectedShapesOpacity}
+                        value={selectedOpacity}
+                        min={0}
+                        max={100}
+                    />
                     <Checkbox
+                        className='cvat-appearance-outlinded-borders-checkbox'
                         onChange={(event: CheckboxChangeEvent) => {
                             changeShapesOutlinedBorders(event.target.checked, outlineColor);
                         }}
@@ -175,15 +194,23 @@ function AppearanceBlock(props: Props): JSX.Element {
                             placement='top'
                             resetVisible={false}
                         >
-                            <Button type='link' shape='circle'>
+                            <Button className='cvat-appearance-outlined-borders-button' type='link' shape='circle'>
                                 <ColorizeIcon />
                             </Button>
                         </ColorPicker>
                     </Checkbox>
-                    <Checkbox onChange={changeShowBitmap} checked={showBitmap}>
+                    <Checkbox
+                        className='cvat-appearance-bitmap-checkbox'
+                        onChange={changeShowBitmap}
+                        checked={showBitmap}
+                    >
                         Show bitmap
                     </Checkbox>
-                    <Checkbox onChange={changeShowProjections} checked={showProjections}>
+                    <Checkbox
+                        className='cvat-appearance-cuboid-projections-checkbox'
+                        onChange={changeShowProjections}
+                        checked={showProjections}
+                    >
                         Show projections
                     </Checkbox>
                 </div>

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

@@ -22,23 +22,24 @@ interface Props {
     onChange?: (value: string) => void;
     onVisibleChange?: (visible: boolean) => void;
     placement?:
-        | 'left'
-        | 'top'
-        | 'right'
-        | 'bottom'
-        | 'topLeft'
-        | 'topRight'
-        | 'bottomLeft'
-        | 'bottomRight'
-        | 'leftTop'
-        | 'leftBottom'
-        | 'rightTop'
-        | 'rightBottom'
-        | undefined;
+    | 'left'
+    | 'top'
+    | 'right'
+    | 'bottom'
+    | 'topLeft'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomRight'
+    | 'leftTop'
+    | 'leftBottom'
+    | 'rightTop'
+    | 'rightBottom';
 }
 
 function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
-    const { children, value, visible, resetVisible, onChange, onVisibleChange, placement } = props;
+    const {
+        children, value, visible, resetVisible, onChange, onVisibleChange, placement,
+    } = props;
 
     const [colorState, setColorState] = useState(value);
     const [pickerVisible, setPickerVisible] = useState(false);
@@ -55,7 +56,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
 
     return (
         <Popover
-            content={
+            content={(
                 <>
                     <SketchPicker
                         color={colorState}
@@ -99,8 +100,8 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                         </Col>
                     </Row>
                 </>
-            }
-            title={
+            )}
+            title={(
                 <Row type='flex' justify='space-between' align='middle'>
                     <Col span={12}>
                         <Text strong>Select color</Text>
@@ -118,7 +119,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                         </Tooltip>
                     </Col>
                 </Row>
-            }
+            )}
             placement={placement || 'left'}
             overlayClassName='cvat-label-color-picker'
             trigger='click'

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

@@ -33,6 +33,17 @@ function LabelItemComponent(props: Props): JSX.Element {
         unlockStates,
     } = props;
 
+    const classes = {
+        lock: {
+            enabled: { className: 'cvat-label-item-button-lock cvat-label-item-button-lock-enabled' },
+            disabled: { className: 'cvat-label-item-button-lock' },
+        },
+        hidden: {
+            enabled: { className: 'cvat-label-item-button-hidden cvat-label-item-button-hidden-enabled' },
+            disabled: { className: 'cvat-label-item-button-hidden' },
+        },
+    };
+
     return (
         <Row
             type='flex'
@@ -51,16 +62,16 @@ function LabelItemComponent(props: Props): JSX.Element {
             </Col>
             <Col span={3}>
                 {statesLocked ? (
-                    <Icon type='lock' onClick={unlockStates} />
+                    <Icon {...classes.lock.enabled} type='lock' onClick={unlockStates} />
                 ) : (
-                    <Icon type='unlock' onClick={lockStates} />
+                    <Icon {...classes.lock.disabled} type='unlock' onClick={lockStates} />
                 )}
             </Col>
             <Col span={3}>
                 {statesHidden ? (
-                    <Icon type='eye-invisible' onClick={showStates} />
+                    <Icon {...classes.hidden.enabled} type='eye-invisible' onClick={showStates} />
                 ) : (
-                    <Icon type='eye' onClick={hideStates} />
+                    <Icon {...classes.hidden.disabled} type='eye' onClick={hideStates} />
                 )}
             </Col>
         </Row>