From 55b20e197d74bae12786a849dc315fb2f71a2cec Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Mon, 1 Mar 2021 16:15:26 +0300 Subject: [PATCH] Added simple extra popover to keep other controls out of display (#2880) * Added simple extra popover to keep other controls out of display * Removed extra change * Fixed part of tests * Added extra comments * Updated version & changelog --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 9 +- cvat-ui/package.json | 3 +- .../annotation-page/annotation-page.tsx | 2 +- .../control-visibility-observer.tsx | 114 ++++++++++++++++++ .../controls-side-bar/controls-side-bar.tsx | 82 ++++++++----- .../controls-side-bar/cursor-control.tsx | 2 +- .../controls-side-bar/draw-cuboid-control.tsx | 2 +- .../controls-side-bar/draw-points-control.tsx | 2 +- .../draw-polygon-control.tsx | 2 +- .../draw-polyline-control.tsx | 2 +- .../draw-rectangle-control.tsx | 2 +- .../controls-side-bar/fit-control.tsx | 2 +- .../controls-side-bar/group-control.tsx | 2 +- .../controls-side-bar/merge-control.tsx | 2 +- .../controls-side-bar/move-control.tsx | 2 +- .../controls-side-bar/resize-control.tsx | 2 +- .../controls-side-bar/rotate-control.tsx | 2 +- .../controls-side-bar/setup-tag-control.tsx | 2 +- .../controls-side-bar/split-control.tsx | 2 +- .../standard-workspace/styles.scss | 11 +- 21 files changed, 200 insertions(+), 50 deletions(-) create mode 100644 cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/control-visibility-observer.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 28020188943a..609f41fe85bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Persistent queue added to logstash () - Improved maintanance of popups visibility () - Image visualizations settings on canvas for faster access () +- Better scale management of left panel when screen is too small () ### Deprecated diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index ce87ebabe05a..0cd1ddc4cb36 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.15.0", + "version": "1.15.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1335,6 +1335,11 @@ "redux": "^4.0.0" } }, + "@types/resize-observer-browser": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz", + "integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==" + }, "@typescript-eslint/eslint-plugin": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.5.0.tgz", @@ -15392,7 +15397,7 @@ "cvat-data": { "version": "file:../cvat-data", "requires": { - "async-mutex": "^0.2.6", + "async-mutex": "^0.3.0", "jszip": "3.5.0" }, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 49d93b64f86d..5d8bf3b4b3ee 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.15.0", + "version": "1.15.1", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { @@ -59,6 +59,7 @@ "@types/react-router-dom": "^5.1.7", "@types/react-share": "^3.0.3", "@types/redux-logger": "^3.0.8", + "@types/resize-observer-browser": "^0.1.5", "antd": "^4.12.2", "copy-to-clipboard": "^3.3.1", "cvat-canvas": "file:../cvat-canvas", diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/cvat-ui/src/components/annotation-page/annotation-page.tsx index feb6f7b6d72f..484998597582 100644 --- a/cvat-ui/src/components/annotation-page/annotation-page.tsx +++ b/cvat-ui/src/components/annotation-page/annotation-page.tsx @@ -39,7 +39,7 @@ export default function AnnotationPageComponent(props: Props): JSX.Element { saveLogs(); const root = window.document.getElementById('root'); if (root) { - root.style.minHeight = '768px'; + root.style.minHeight = '600px'; } return () => { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/control-visibility-observer.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/control-visibility-observer.tsx new file mode 100644 index 000000000000..c900c3066664 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/control-visibility-observer.tsx @@ -0,0 +1,114 @@ +// Copyright (C) 2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { SmallDashOutlined } from '@ant-design/icons'; +import Popover from 'antd/lib/popover'; +import React, { useEffect, useRef, useState } from 'react'; +import ReactDOM from 'react-dom'; + +const extraControlsContentClassName = 'cvat-extra-controls-control-content'; + +let onUpdateChildren: Function | null = null; +export function ExtraControlsControl(): JSX.Element { + const [hasChildren, setHasChildren] = useState(false); + const [initialized, setInitialized] = useState(false); + + useEffect(() => { + if (!initialized) { + setInitialized(true); + } + + window.document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })); + }, []); + + onUpdateChildren = () => { + const contentElement = window.document.getElementsByClassName(extraControlsContentClassName)[0]; + if (contentElement) { + setHasChildren(contentElement.children.length > 0); + } + }; + + return ( + } + > + + + ); +} + +export default function ControlVisibilityObserver

( + ControlComponent: React.FunctionComponent

, +): React.FunctionComponent

{ + let visibilityHeightThreshold = 0; // minimum value of height when element can be pushed to main panel + + return (props: P): JSX.Element | null => { + const ref = useRef(null); + const [visible, setVisible] = useState(true); + + useEffect(() => { + if (ref && ref.current) { + const wrapper = ref.current; + const parentElement = ref.current.parentElement as HTMLElement; + + const reservedHeight = 45; // for itself + const observer = new ResizeObserver(() => { + // when parent size was changed, check again can we put the control + // into the side panel or not + const availableHeight = parentElement.offsetHeight; + setVisible(availableHeight - reservedHeight >= visibilityHeightThreshold); + }); + + if (ref && ref.current) { + const availableHeight = parentElement.offsetHeight; + // when first mount, remember bottom coordinate which equal to minimum parent width + // to put the control into side panel + visibilityHeightThreshold = wrapper.offsetTop + wrapper.offsetHeight; + // start observing parent size + observer.observe(ref.current.parentElement as HTMLElement); + // then put it to extra controls if parent height is not enought + setVisible(availableHeight - reservedHeight >= visibilityHeightThreshold); + } + + return () => { + observer.disconnect(); + }; + } + + return () => {}; + }, []); + + useEffect(() => { + // when visibility changed, we notify extra content element because now its children changed + if (onUpdateChildren) { + onUpdateChildren(); + } + }, [visible]); + + if (!visible) { + const extraControlsContent = window.document.getElementsByClassName(extraControlsContentClassName)[0]; + if (extraControlsContent) { + return ReactDOM.createPortal(, extraControlsContent); + } + + return null; + } + + // first mount always to side panel + return ( +

+ +
+ ); + }; +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx index 2c03ef043ea0..2ac25ef204dd 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx @@ -9,22 +9,23 @@ import Layout from 'antd/lib/layout'; import { ActiveControl, Rotation } from 'reducers/interfaces'; import { Canvas } from 'cvat-canvas-wrapper'; -import RotateControl from './rotate-control'; -import CursorControl from './cursor-control'; -import MoveControl from './move-control'; -import FitControl from './fit-control'; -import ResizeControl from './resize-control'; +import ControlVisibilityObserver, { ExtraControlsControl } from './control-visibility-observer'; +import RotateControl, { Props as RotateControlProps } from './rotate-control'; +import CursorControl, { Props as CursorControlProps } from './cursor-control'; +import MoveControl, { Props as MoveControlProps } from './move-control'; +import FitControl, { Props as FitControlProps } from './fit-control'; +import ResizeControl, { Props as ResizeControlProps } from './resize-control'; import ToolsControl from './tools-control'; import OpenCVControl from './opencv-control'; -import DrawRectangleControl from './draw-rectangle-control'; -import DrawPolygonControl from './draw-polygon-control'; -import DrawPolylineControl from './draw-polyline-control'; -import DrawPointsControl from './draw-points-control'; -import DrawCuboidControl from './draw-cuboid-control'; -import SetupTagControl from './setup-tag-control'; -import MergeControl from './merge-control'; -import GroupControl from './group-control'; -import SplitControl from './split-control'; +import DrawRectangleControl, { Props as DrawRectangleControlProps } from './draw-rectangle-control'; +import DrawPolygonControl, { Props as DrawPolygonControlProps } from './draw-polygon-control'; +import DrawPolylineControl, { Props as DrawPolylineControlProps } from './draw-polyline-control'; +import DrawPointsControl, { Props as DrawPointsControlProps } from './draw-points-control'; +import DrawCuboidControl, { Props as DrawCuboidControlProps } from './draw-cuboid-control'; +import SetupTagControl, { Props as SetupTagControlProps } from './setup-tag-control'; +import MergeControl, { Props as MergeControlProps } from './merge-control'; +import GroupControl, { Props as GroupControlProps } from './group-control'; +import SplitControl, { Props as SplitControlProps } from './split-control'; interface Props { canvasInstance: Canvas; @@ -42,6 +43,25 @@ interface Props { redrawShape(): void; } +// We use the observer to see if these controls are in the viewport +// They automatically put to extra if not +const ObservedCursorControl = ControlVisibilityObserver(CursorControl); +const ObservedMoveControl = ControlVisibilityObserver(MoveControl); +const ObservedRotateControl = ControlVisibilityObserver(RotateControl); +const ObservedFitControl = ControlVisibilityObserver(FitControl); +const ObservedResizeControl = ControlVisibilityObserver(ResizeControl); +const ObservedToolsControl = ControlVisibilityObserver(ToolsControl); +const ObservedOpenCVControl = ControlVisibilityObserver(OpenCVControl); +const ObservedDrawRectangleControl = ControlVisibilityObserver(DrawRectangleControl); +const ObservedDrawPolygonControl = ControlVisibilityObserver(DrawPolygonControl); +const ObservedDrawPolylineControl = ControlVisibilityObserver(DrawPolylineControl); +const ObservedDrawPointsControl = ControlVisibilityObserver(DrawPointsControl); +const ObservedDrawCuboidControl = ControlVisibilityObserver(DrawCuboidControl); +const ObservedSetupTagControl = ControlVisibilityObserver(SetupTagControl); +const ObservedMergeControl = ControlVisibilityObserver(MergeControl); +const ObservedGroupControl = ControlVisibilityObserver(GroupControl); +const ObservedSplitControl = ControlVisibilityObserver(SplitControl); + export default function ControlsSideBarComponent(props: Props): JSX.Element { const { canvasInstance, @@ -170,13 +190,13 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { return ( - - - + - - + +
- - - + + - - - - - +
- - - + +
); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx index dd26d376f254..826e7990875e 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx @@ -10,7 +10,7 @@ import { ActiveControl } from 'reducers/interfaces'; import { Canvas } from 'cvat-canvas-wrapper'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; cursorShortkey: string; activeControl: ActiveControl; diff --git 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 index 0a86df2ebe90..50e28fecae54 100644 --- 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 @@ -14,7 +14,7 @@ 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 { +export interface Props { canvasInstance: Canvas; isDrawing: boolean; } diff --git 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 index 462e78c9d695..6a513be11d90 100644 --- 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 @@ -13,7 +13,7 @@ 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 { +export interface Props { canvasInstance: Canvas; isDrawing: boolean; } diff --git 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 index f07a324d7cf5..61da0d3d1061 100644 --- 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 @@ -13,7 +13,7 @@ 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 { +export interface Props { canvasInstance: Canvas; isDrawing: boolean; } diff --git 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 index a1d3c157b3de..766c15c425ca 100644 --- 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 @@ -13,7 +13,7 @@ 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 { +export interface Props { canvasInstance: Canvas; isDrawing: boolean; } diff --git 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 index 0d0462818f5b..a94dabea55c9 100644 --- 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 @@ -13,7 +13,7 @@ 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 { +export interface Props { canvasInstance: Canvas; isDrawing: boolean; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx index baa544ff412b..9921d86d6b99 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx @@ -9,7 +9,7 @@ import { FitIcon } from 'icons'; import { Canvas } from 'cvat-canvas-wrapper'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx index 8b93c7577e5f..e26158437bf7 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx @@ -10,7 +10,7 @@ import { Canvas } from 'cvat-canvas-wrapper'; import { ActiveControl } from 'reducers/interfaces'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; activeControl: ActiveControl; switchGroupShortcut: string; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx index 2d29fb21196c..e1c96c3baf82 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx @@ -10,7 +10,7 @@ import { Canvas } from 'cvat-canvas-wrapper'; import { ActiveControl } from 'reducers/interfaces'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; activeControl: ActiveControl; switchMergeShortcut: string; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx index 760a59ddb22b..ffbaeb3585fa 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx @@ -10,7 +10,7 @@ import { ActiveControl } from 'reducers/interfaces'; import { Canvas } from 'cvat-canvas-wrapper'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; activeControl: ActiveControl; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx index ac7806cb070a..ec461b1d7e4d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx @@ -10,7 +10,7 @@ import { ActiveControl } from 'reducers/interfaces'; import { Canvas } from 'cvat-canvas-wrapper'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; activeControl: ActiveControl; } diff --git 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 index 9fa1e2f9796b..5c5a33cb457f 100644 --- 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 @@ -11,7 +11,7 @@ import { Rotation } from 'reducers/interfaces'; import CVATTooltip from 'components/common/cvat-tooltip'; import withVisibilityHandling from './handle-popover-visibility'; -interface Props { +export interface Props { clockwiseShortcut: string; anticlockwiseShortcut: string; rotateFrame(rotation: Rotation): void; diff --git 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 index 5b57b98c4514..d8b4a2998f86 100644 --- 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 @@ -12,7 +12,7 @@ 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 { +export interface Props { canvasInstance: Canvas; isDrawing: boolean; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx index 61d6bfcee717..c68774596986 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx @@ -10,7 +10,7 @@ import { Canvas } from 'cvat-canvas-wrapper'; import { ActiveControl } from 'reducers/interfaces'; import CVATTooltip from 'components/common/cvat-tooltip'; -interface Props { +export interface Props { canvasInstance: Canvas; activeControl: ActiveControl; switchSplitShortcut: string; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss index 5c34151403f7..80f275d7e85b 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -36,8 +36,7 @@ .cvat-canvas-controls-sidebar { background-color: $background-color-2; border-right: 1px solid $border-color-1; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden; } .cvat-cursor-control, @@ -56,6 +55,7 @@ .cvat-split-track-control, .cvat-issue-control, .cvat-tools-control, +.cvat-extra-controls-control, .cvat-opencv-control { border-radius: 3.3px; transform: scale(0.65); @@ -75,6 +75,13 @@ } } +.cvat-extra-controls-control { + > svg { + width: 40px; + height: 40px; + } +} + .cvat-active-canvas-control { background: $header-color; transform: scale(0.75);