Merge branch 'develop' into dk/batch-of-fixes

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4,
+        "value-keyword-case": null,
+        "selector-combinator-space-after": null,
+        "no-descending-specificity": null,
+        "at-rule-no-unknown": [true, {
+            "ignoreAtRules": ["extend"]
+        }],
+        "selector-type-no-unknown": [true, {
+            "ignoreTypes": ["first-child"]
+        }]
+    }
+
+}

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Better validation of labels and attributes in raw viewer (<https://github.com/opencv/cvat/pull/1727>)
 - ClamAV antivirus integration (<https://github.com/opencv/cvat/pull/1712>)
 - Added canvas background color selector (<https://github.com/opencv/cvat/pull/1705>)
+- SCSS files linting with Stylelint tool (<https://github.com/opencv/cvat/pull/1766>)
 - Supported import and export or single boxes in MOT format (https://github.com/opencv/cvat/pull/1764)
 - [Datumaro] Added `stats` command, which shows some dataset statistics like image mean and std (https://github.com/opencv/cvat/pull/1734)
 - Add option to upload annotations upon task creation on CLI

CONTRIBUTING.md

@@ -74,6 +74,7 @@ for development
     - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
     - [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
     - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+    - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
     - [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
     - [licenser](https://marketplace.visualstudio.com/items?itemName=ymotongpoo.licenser)
     - [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

cvat-canvas/src/scss/canvas.scss

@@ -42,7 +42,7 @@ polyline.cvat_shape_drawing_opacity {
     fill: white;
     cursor: default;
     font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
-    text-shadow: 0px 0px 4px black;
+    text-shadow: 0 0 4px black;
     user-select: none;
     pointer-events: none;
 }
@@ -54,47 +54,55 @@ polyline.cvat_shape_drawing_opacity {
 .cvat_canvas_shape_grouping {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     fill: darkmagenta;
 }
 
 polyline.cvat_canvas_shape_grouping {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     stroke: darkmagenta;
 }
 
 .cvat_canvas_shape_merging {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     fill: blue;
 }
 
 polyline.cvat_canvas_shape_merging {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     stroke: blue;
 }
 
 polyline.cvat_canvas_shape_splitting {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     stroke: dodgerblue;
 }
 
 .cvat_canvas_shape_splitting {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     fill: dodgerblue;
 }
 
 .cvat_canvas_shape_drawing {
     @extend .cvat_shape_drawing_opacity;
+
     fill: white;
     stroke: black;
 }
 
 .cvat_canvas_zoom_selection {
     @extend .cvat_shape_action_dasharray;
+
     stroke: #096dd9;
     fill-opacity: 0;
 }
@@ -103,7 +111,8 @@ polyline.cvat_canvas_shape_splitting {
     stroke-dasharray: 5;
 }
 
-.cvat_canvas_shape .svg_select_points, .cvat_canvas_shape .cvat_canvas_cuboid_projections {
+.cvat_canvas_shape .svg_select_points,
+.cvat_canvas_shape .cvat_canvas_cuboid_projections {
     stroke-dasharray: none;
 }
 
@@ -130,20 +139,24 @@ polyline.cvat_canvas_shape_splitting {
     pointer-events: none;
 }
 
-.svg_select_points_lb:hover, .svg_select_points_rt:hover {
+.svg_select_points_lb:hover,
+.svg_select_points_rt:hover {
     cursor: nesw-resize;
 }
 
-.svg_select_points_lt:hover, .svg_select_points_rb:hover {
+.svg_select_points_lt:hover,
+.svg_select_points_rb:hover {
     cursor: nwse-resize;
 }
 
-.svg_select_points_l:hover, .svg_select_points_r:hover,
+.svg_select_points_l:hover,
+.svg_select_points_r:hover,
 .svg_select_points_ew:hover {
     cursor: ew-resize;
 }
 
-.svg_select_points_t:hover, .svg_select_points_b:hover {
+.svg_select_points_t:hover,
+.svg_select_points_b:hover {
     cursor: ns-resize;
 }
 
@@ -202,7 +215,6 @@ polyline.cvat_canvas_shape_splitting {
     pointer-events: none;
     width: 100%;
     height: 100%;
-    pointer-events: none;
 }
 
 #cvat_canvas_background {
@@ -211,7 +223,7 @@ polyline.cvat_canvas_shape_splitting {
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
 }
 
 #cvat_canvas_bitmap {
@@ -221,7 +233,7 @@ polyline.cvat_canvas_shape_splitting {
     background: black;
     width: 100%;
     height: 100%;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
 }
 
 #cvat_canvas_grid {
@@ -230,7 +242,6 @@ polyline.cvat_canvas_shape_splitting {
     pointer-events: none;
     width: 100%;
     height: 100%;
-    pointer-events: none;
 }
 
 #cvat_canvas_grid_pattern {
@@ -248,7 +259,18 @@ polyline.cvat_canvas_shape_splitting {
 }
 
 @keyframes loadingAnimation {
-    0%   {stroke-dashoffset: 1; stroke: #09c;}
-    50%  {stroke-dashoffset: 100; stroke: #f44;}
-    100% {stroke-dashoffset: 300; stroke: #09c;}
+    0% {
+        stroke-dashoffset: 1;
+        stroke: #09c;
+    }
+
+    50% {
+        stroke-dashoffset: 100;
+        stroke: #f44;
+    }
+
+    100% {
+        stroke-dashoffset: 300;
+        stroke: #09c;
+    }
 }

cvat-core/src/enums.js

@@ -224,10 +224,11 @@
         * @readonly
     */
     const colors = [
-        '#FF355E', '#E936A7', '#FD5B78', '#FF007C', '#FF00CC', '#66FF66',
-        '#50BFE6', '#CCFF00', '#FFFF66', '#FF9966', '#FF6037', '#FFCC33',
-        '#AAF0D1', '#FF3855', '#FFF700', '#A7F432', '#FF5470', '#FAFA37',
-        '#FF7A00', '#FF9933', '#AFE313', '#00CC99', '#FF5050', '#733380',
+        '#33ddff', '#fa3253', '#34d1b7', '#ff007c', '#ff6037', '#ddff33',
+        '#24b353', '#b83df5', '#66ff66', '#32b7fa', '#ffcc33', '#83e070',
+        '#fafa37', '#5986b3', '#8c78f0', '#ff6a4d', '#f078f0', '#2a7dd1',
+        '#b25050', '#cc3366', '#cc9933', '#aaf0d1', '#ff00cc', '#3df53d',
+        '#fa32b7', '#fa7dbb', '#ff355e', '#f59331', '#3d3df5', '#733380',
     ];
 
     module.exports = {

cvat-ui/src/base.scss

@@ -2,26 +2,26 @@
 //
 // SPDX-License-Identifier: MIT
 
-$header-color: #D8D8D8;
+$header-color: #d8d8d8;
 $text-color: #303030;
-$hover-menu-color: rgba(24,144,255,0.05);
-$completed-progress-color: #61C200;
-$inprogress-progress-color: #1890FF;
-$pending-progress-color: #C1C1C1;
+$hover-menu-color: rgba(24, 144, 255, 0.05);
+$completed-progress-color: #61c200;
+$inprogress-progress-color: #1890ff;
+$pending-progress-color: #c1c1c1;
 $border-color-1: #c3c3c3;
 $border-color-2: #d9d9d9;
 $border-color-3: #242424;
 $border-color-hover: #40a9ff;
 $background-color-1: white;
-$background-color-2: #F1F1F1;
+$background-color-2: #f1f1f1;
 $transparent-color: rgba(0, 0, 0, 0);
 $player-slider-color: #979797;
 $player-buttons-color: #242424;
-$danger-icon-color: #FF4136;
-$info-icon-color: #0074D9;
-$objects-bar-tabs-color: #BEBEBE;
-$objects-bar-icons-color: #242424; // #6E6E6E
-$active-object-item-background-color: #D8ECFF;
-$slider-color: #1890FF;
+$danger-icon-color: #ff4136;
+$info-icon-color: #0074d9;
+$objects-bar-tabs-color: #bebebe;
+$objects-bar-icons-color: #242424; // #6e6e6e
+$active-object-item-background-color: #d8ecff;
+$slider-color: #1890ff;
 
-$monospaced-fonts-stack: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+$monospaced-fonts-stack: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;

cvat-ui/src/components/actions-menu/styles.scss

@@ -5,14 +5,14 @@
 @import '../../base.scss';
 
 .ant-menu.cvat-actions-menu {
-    box-shadow: 0 0 17px rgba(0,0,0,0.2);
+    box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
 
     > li:hover {
         background-color: $hover-menu-color;
     }
 
     .ant-menu-submenu-title {
-        margin: 0px;
+        margin: 0;
         width: 13em;
     }
 }
@@ -30,10 +30,10 @@
 }
 
 .ant-menu-item.cvat-menu-load-submenu-item {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
 
-   > span > .ant-upload {
+    > span > .ant-upload {
         width: 100%;
         height: 100%;
 

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

@@ -36,7 +36,7 @@
     align-items: center;
     justify-content: space-between;
     font-size: 18px;
-    margin: 10px 0px;
+    margin: 10px 0;
 }
 
 .attribute-annotations-sidebar-not-found-wrapper {
@@ -45,7 +45,7 @@
 }
 
 .attribute-annotation-sidebar-attr-list-wrapper {
-    margin: 10px 0px 10px 10px;
+    margin: 10px 0 10px 10px;
 }
 
 .attribute-annotation-sidebar-attr-elem-wrapper {