diff --git a/cvat-ui/dist/assets/cvat-logo.svg b/cvat-ui/dist/assets/cvat-logo.svg deleted file mode 100644 index 86d62d6c4e76..000000000000 --- a/cvat-ui/dist/assets/cvat-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cvat-ui/dist/assets/icon-redo.svg b/cvat-ui/dist/assets/icon-redo.svg deleted file mode 100644 index 33c771c0cb13..000000000000 --- a/cvat-ui/dist/assets/icon-redo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cvat-ui/dist/assets/icon-undo.svg b/cvat-ui/dist/assets/icon-undo.svg deleted file mode 100644 index 29af3792e968..000000000000 --- a/cvat-ui/dist/assets/icon-undo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cvat-ui/index.d.ts b/cvat-ui/index.d.ts new file mode 100644 index 000000000000..bff94710c915 --- /dev/null +++ b/cvat-ui/index.d.ts @@ -0,0 +1 @@ +declare module '*.svg'; diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index f9712e524f69..83facc507da3 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1013,6 +1013,12 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, + "@types/q": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", + "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==", + "dev": true + }, "@types/react": { "version": "16.9.11", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz", @@ -1539,6 +1545,15 @@ "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true }, + "argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "requires": { + "sprintf-js": "~1.0.2" + } + }, "aria-query": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", @@ -1760,6 +1775,12 @@ "@babel/runtime": "^7.0.0" } }, + "babel-plugin-react-svg": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-3.0.3.tgz", + "integrity": "sha512-Pst1RWjUIiV0Ykv1ODSeceCBsFOP2Y4dusjq7/XkjuzJdvS9CjpkPMUIoO4MLlvp5PiLCeMlsOC7faEUA0gm3Q==", + "dev": true + }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -2321,6 +2342,17 @@ } } }, + "coa": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", + "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==", + "dev": true, + "requires": { + "@types/q": "^1.5.1", + "chalk": "^2.4.1", + "q": "^1.1.2" + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -2708,6 +2740,30 @@ "nth-check": "~1.0.1" } }, + "css-select-base-adapter": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", + "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", + "dev": true + }, + "css-tree": { + "version": "1.0.0-alpha.37", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", + "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==", + "dev": true, + "requires": { + "mdn-data": "2.0.4", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -2720,6 +2776,15 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csso": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz", + "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==", + "dev": true, + "requires": { + "css-tree": "1.0.0-alpha.37" + } + }, "csstype": { "version": "2.6.7", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz", @@ -3580,6 +3645,12 @@ "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==", "dev": true }, + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true + }, "esrecurse": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz", @@ -5573,6 +5644,16 @@ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, + "js-yaml": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", + "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + } + }, "jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", @@ -5730,11 +5811,23 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", + "dev": true + }, "lodash.throttle": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", @@ -5817,6 +5910,12 @@ "safe-buffer": "^5.1.2" } }, + "mdn-data": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", + "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", + "dev": true + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -7048,6 +7147,12 @@ "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", "dev": true }, + "q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", + "dev": true + }, "qs": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", @@ -7730,6 +7835,31 @@ "resize-observer-polyfill": "^1.5.0" } }, + "react-svg-core": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/react-svg-core/-/react-svg-core-3.0.3.tgz", + "integrity": "sha512-Ws3eM3xCAwcaYeqm4Ajcz3zxBYNI6BeTWWhFR0cpOT+pWuVtozgHYK9xUM0S/ilapZgYMQDe49XgOxpvooFq4w==", + "dev": true, + "requires": { + "@babel/core": "^7.4.5", + "@babel/plugin-syntax-jsx": "^7.2.0", + "@babel/preset-react": "^7.0.0", + "babel-plugin-react-svg": "^3.0.3", + "lodash.clonedeep": "^4.5.0", + "lodash.isplainobject": "^4.0.6", + "svgo": "^1.2.2" + } + }, + "react-svg-loader": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/react-svg-loader/-/react-svg-loader-3.0.3.tgz", + "integrity": "sha512-V1KnIUtvWVvc4xCig34n+f+/74ylMMugB2FbuAF/yq+QRi+WLi2hUYp9Ze3VylhA1D7ZgRygBh3Ojj8S3TPhJA==", + "dev": true, + "requires": { + "loader-utils": "^1.2.3", + "react-svg-core": "^3.0.3" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -8142,6 +8272,12 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", + "dev": true + }, "scheduler": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", @@ -8665,6 +8801,12 @@ "extend-shallow": "^3.0.0" } }, + "sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "dev": true + }, "ssri": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", @@ -8674,6 +8816,12 @@ "figgy-pudding": "^3.5.1" } }, + "stable": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", + "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==", + "dev": true + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -8912,6 +9060,57 @@ "has-flag": "^3.0.0" } }, + "svgo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", + "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "coa": "^2.0.2", + "css-select": "^2.0.0", + "css-select-base-adapter": "^0.1.1", + "css-tree": "1.0.0-alpha.37", + "csso": "^4.0.2", + "js-yaml": "^3.13.1", + "mkdirp": "~0.5.1", + "object.values": "^1.1.0", + "sax": "~1.2.4", + "stable": "^0.1.8", + "unquote": "~1.1.1", + "util.promisify": "~1.0.0" + }, + "dependencies": { + "css-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", + "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==", + "dev": true, + "requires": { + "boolbase": "^1.0.0", + "css-what": "^3.2.1", + "domutils": "^1.7.0", + "nth-check": "^1.0.2" + } + }, + "css-what": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", + "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==", + "dev": true + }, + "domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dev": true, + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + } + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", @@ -9262,6 +9461,12 @@ "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", "dev": true }, + "unquote": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz", + "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=", + "dev": true + }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index e0f3c3ec1212..33b41f0801d2 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -25,6 +25,7 @@ "eslint-plugin-react": "^7.17.0", "eslint-plugin-react-hooks": "^1.7.0", "html-webpack-plugin": "^3.2.0", + "react-svg-loader": "^3.0.3", "style-loader": "^1.0.0", "typescript": "^3.7.3", "webpack": "^4.41.2", diff --git a/cvat-ui/dist/assets/icon-account.svg b/cvat-ui/src/assets/account-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-account.svg rename to cvat-ui/src/assets/account-icon.svg diff --git a/cvat-ui/dist/assets/icon-cursor.svg b/cvat-ui/src/assets/cursor-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-cursor.svg rename to cvat-ui/src/assets/cursor-icon.svg diff --git a/cvat-ui/src/assets/cvat-logo.svg b/cvat-ui/src/assets/cvat-logo.svg new file mode 100644 index 000000000000..523c87bc4035 --- /dev/null +++ b/cvat-ui/src/assets/cvat-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cvat-ui/dist/assets/empty-tasks-icon.svg b/cvat-ui/src/assets/empty-tasks-icon.svg similarity index 100% rename from cvat-ui/dist/assets/empty-tasks-icon.svg rename to cvat-ui/src/assets/empty-tasks-icon.svg diff --git a/cvat-ui/dist/assets/icon-exit-fullscreen.svg b/cvat-ui/src/assets/exit-fullscreen-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-exit-fullscreen.svg rename to cvat-ui/src/assets/exit-fullscreen-icon.svg diff --git a/cvat-ui/dist/assets/side-icon-object-expandall.svg b/cvat-ui/src/assets/expand-all-objects-icon.svg similarity index 100% rename from cvat-ui/dist/assets/side-icon-object-expandall.svg rename to cvat-ui/src/assets/expand-all-objects-icon.svg diff --git a/cvat-ui/dist/assets/icon-fit-to-window.svg b/cvat-ui/src/assets/fit-to-window-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-fit-to-window.svg rename to cvat-ui/src/assets/fit-to-window-icon.svg diff --git a/cvat-ui/dist/assets/icon-fullscreen.svg b/cvat-ui/src/assets/fullscreen-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-fullscreen.svg rename to cvat-ui/src/assets/fullscreen-icon.svg diff --git a/cvat-ui/dist/assets/icon-group.svg b/cvat-ui/src/assets/group-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-group.svg rename to cvat-ui/src/assets/group-icon.svg diff --git a/cvat-ui/dist/assets/icon-object-video-hide-frames.svg b/cvat-ui/src/assets/icon-object-video-hide-frames.svg similarity index 100% rename from cvat-ui/dist/assets/icon-object-video-hide-frames.svg rename to cvat-ui/src/assets/icon-object-video-hide-frames.svg diff --git a/cvat-ui/dist/assets/icon-info.svg b/cvat-ui/src/assets/info-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-info.svg rename to cvat-ui/src/assets/info-icon.svg diff --git a/cvat-ui/dist/assets/icon-main-menu.svg b/cvat-ui/src/assets/main-menu-icon.svg similarity index 70% rename from cvat-ui/dist/assets/icon-main-menu.svg rename to cvat-ui/src/assets/main-menu-icon.svg index aa8e2b4049f8..e712d571f742 100644 --- a/cvat-ui/dist/assets/icon-main-menu.svg +++ b/cvat-ui/src/assets/main-menu-icon.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/cvat-ui/dist/assets/icon-sub-menu.svg b/cvat-ui/src/assets/menu-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-sub-menu.svg rename to cvat-ui/src/assets/menu-icon.svg diff --git a/cvat-ui/dist/assets/icon-merge.svg b/cvat-ui/src/assets/merge-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-merge.svg rename to cvat-ui/src/assets/merge-icon.svg diff --git a/cvat-ui/dist/assets/icon-move.svg b/cvat-ui/src/assets/move-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-move.svg rename to cvat-ui/src/assets/move-icon.svg diff --git a/cvat-ui/dist/assets/side-icon-object-filter.svg b/cvat-ui/src/assets/object-filter-icon.svg similarity index 100% rename from cvat-ui/dist/assets/side-icon-object-filter.svg rename to cvat-ui/src/assets/object-filter-icon.svg diff --git a/cvat-ui/dist/assets/side-icon-object-hide.svg b/cvat-ui/src/assets/object-hide-icon.svg similarity index 100% rename from cvat-ui/dist/assets/side-icon-object-hide.svg rename to cvat-ui/src/assets/object-hide-icon.svg diff --git a/cvat-ui/dist/assets/side-icon-object-occlude.svg b/cvat-ui/src/assets/object-occlude-icon.svg similarity index 100% rename from cvat-ui/dist/assets/side-icon-object-occlude.svg rename to cvat-ui/src/assets/object-occlude-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-back-jump.svg b/cvat-ui/src/assets/playcontrol-back-jump-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-back-jump.svg rename to cvat-ui/src/assets/playcontrol-back-jump-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-first.svg b/cvat-ui/src/assets/playcontrol-first-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-first.svg rename to cvat-ui/src/assets/playcontrol-first-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-forward-jump.svg b/cvat-ui/src/assets/playcontrol-forward-jump-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-forward-jump.svg rename to cvat-ui/src/assets/playcontrol-forward-jump-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-last.svg b/cvat-ui/src/assets/playcontrol-last-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-last.svg rename to cvat-ui/src/assets/playcontrol-last-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-next.svg b/cvat-ui/src/assets/playcontrol-next-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-next.svg rename to cvat-ui/src/assets/playcontrol-next-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-play.svg b/cvat-ui/src/assets/playcontrol-play-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-play.svg rename to cvat-ui/src/assets/playcontrol-play-icon.svg diff --git a/cvat-ui/dist/assets/icon-playcontrol-previous.svg b/cvat-ui/src/assets/playcontrol-previous-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-playcontrol-previous.svg rename to cvat-ui/src/assets/playcontrol-previous-icon.svg diff --git a/cvat-ui/dist/assets/icon-plus.svg b/cvat-ui/src/assets/plus-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-plus.svg rename to cvat-ui/src/assets/plus-icon.svg diff --git a/cvat-ui/dist/assets/icon-layer-point.svg b/cvat-ui/src/assets/point-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-layer-point.svg rename to cvat-ui/src/assets/point-icon.svg diff --git a/cvat-ui/dist/assets/icon-layer-polygon.svg b/cvat-ui/src/assets/polygon-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-layer-polygon.svg rename to cvat-ui/src/assets/polygon-icon.svg diff --git a/cvat-ui/dist/assets/icon-layer-line.svg b/cvat-ui/src/assets/polyline-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-layer-line.svg rename to cvat-ui/src/assets/polyline-icon.svg diff --git a/cvat-ui/dist/assets/icon-layer-shape.svg b/cvat-ui/src/assets/rectangle-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-layer-shape.svg rename to cvat-ui/src/assets/rectangle-icon.svg diff --git a/cvat-ui/src/assets/redo-icon.svg b/cvat-ui/src/assets/redo-icon.svg new file mode 100644 index 000000000000..61cf325add93 --- /dev/null +++ b/cvat-ui/src/assets/redo-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cvat-ui/dist/assets/icon-rotate.svg b/cvat-ui/src/assets/rotate-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-rotate.svg rename to cvat-ui/src/assets/rotate-icon.svg diff --git a/cvat-ui/dist/assets/icon-save.svg b/cvat-ui/src/assets/save-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-save.svg rename to cvat-ui/src/assets/save-icon.svg diff --git a/cvat-ui/dist/assets/icon-settings.svg b/cvat-ui/src/assets/settings-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-settings.svg rename to cvat-ui/src/assets/settings-icon.svg diff --git a/cvat-ui/dist/assets/icon-show-sidebar.svg b/cvat-ui/src/assets/show-sidebar-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-show-sidebar.svg rename to cvat-ui/src/assets/show-sidebar-icon.svg diff --git a/cvat-ui/dist/assets/side-icon-object-lock.svg b/cvat-ui/src/assets/side-icon-object-lock.svg similarity index 100% rename from cvat-ui/dist/assets/side-icon-object-lock.svg rename to cvat-ui/src/assets/side-icon-object-lock.svg diff --git a/cvat-ui/dist/assets/icon-split.svg b/cvat-ui/src/assets/split-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-split.svg rename to cvat-ui/src/assets/split-icon.svg diff --git a/cvat-ui/dist/assets/icon-layer-label.svg b/cvat-ui/src/assets/tag-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-layer-label.svg rename to cvat-ui/src/assets/tag-icon.svg diff --git a/cvat-ui/src/assets/undo-icon.svg b/cvat-ui/src/assets/undo-icon.svg new file mode 100644 index 000000000000..d193a31408ca --- /dev/null +++ b/cvat-ui/src/assets/undo-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cvat-ui/dist/assets/icon-zoom-to-selection.svg b/cvat-ui/src/assets/zoom-icon.svg similarity index 100% rename from cvat-ui/dist/assets/icon-zoom-to-selection.svg rename to cvat-ui/src/assets/zoom-icon.svg diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/cvat-ui/src/components/annotation-page/annotation-page.tsx new file mode 100644 index 000000000000..ad2b210a29c2 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-page.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { + Layout, +} from 'antd'; + +import AnnotationTopBarComponent from './top-bar/top-bar'; +import StandardWorkspaceComponent from './standard-workspace/standard-workspace'; + +export default function AnnotationPageComponent(): JSX.Element { + return ( + + + + + ); +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper-component.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper-component.tsx new file mode 100644 index 000000000000..bb8283d65c3f --- /dev/null +++ b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper-component.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { + Layout, +} from 'antd'; + +export default function CanvasWrapperComponent(): JSX.Element { + return ( + + main content + + ); +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar.tsx new file mode 100644 index 000000000000..24e20a393906 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar.tsx @@ -0,0 +1,90 @@ +import React from 'react'; + +import { + Icon, + Layout, + Tooltip, +} from 'antd'; + +import { + CursorIcon, + MoveIcon, + RotateIcon, + FitIcon, + ZoomIcon, + RectangleIcon, + PolygonIcon, + PointIcon, + PolylineIcon, + TagIcon, + MergeIcon, + GroupIcon, + SplitIcon, +} from '../../../icons'; + + +export default function ControlsSideBarComponent(): JSX.Element { + return ( + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + ); +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx new file mode 100644 index 000000000000..78e0b4ae0f7b --- /dev/null +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import { + Icon, + Layout, +} from 'antd'; + +interface State { + collapsed: boolean; +} + +export default class StandardWorkspaceComponent extends React.PureComponent<{}, State> { + public constructor(props: any) { + super(props); + this.state = { + collapsed: true, + }; + } + + public render(): JSX.Element { + const { collapsed } = this.state; + return ( + + {/* eslint-disable-next-line */} + this.setState({ collapsed: !collapsed }) + } + > + {collapsed && } + {!collapsed && } + + + Right sidebar + + ); + } +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx new file mode 100644 index 000000000000..e7ef7d2bfed2 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { + Layout, +} from 'antd'; + +import ControlsSideBarComponent from './controls-side-bar'; +import CanvasWrapperComponent from './canvas-wrapper-component'; +import ObjectSideBarComponent from './objects-side-bar/objects-side-bar'; + +export default function StandardWorkspaceComponent(): JSX.Element { + return ( + + + + + + ); +} diff --git a/cvat-ui/src/components/annotation-page/statistics-modal.tsx b/cvat-ui/src/components/annotation-page/statistics-modal.tsx new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/cvat-ui/src/components/annotation-page/top-bar/menu.tsx b/cvat-ui/src/components/annotation-page/top-bar/menu.tsx new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx new file mode 100644 index 000000000000..c6ca29e67a61 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx @@ -0,0 +1,104 @@ +import React from 'react'; + +import { + Row, + Col, + Icon, + Slider, + Layout, + Input, + Tooltip, + Select, +} from 'antd'; + +import Text from 'antd/lib/typography/Text'; + +import { + MainMenuIcon, + SaveIcon, + UndoIcon, + RedoIcon, + PlaycontrolFirstIcon, + PlaycontrolBackJumpIcon, + PlaycontrolPreviousIcon, + PlaycontrolPlayIcon, + PlaycontrolNextIcon, + PlaycontrolForwardJumpIcon, + PlaycontrolLastIcon, + InfoIcon, + FullscreenIcon, +} from '../../../icons'; + +export default function AnnotationPageComponent(): JSX.Element { + return ( + + + +
+ + Menu +
+
+ + Save +
+
+ + Undo +
+
+ + Redo +
+ + + + + + + + + + + + + + + + + + + + + + filename.png + + + + + of 200 + + + + + + +
+ + Fullscreen +
+
+ + Info +
+
+ +
+ + + + ); +} diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index 4da7a460e734..8ec464a26e0b 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -22,9 +22,7 @@ import AnnotationPageContainer from '../containers/annotation-page/annotation-pa import LoginPageContainer from '../containers/login-page/login-page'; import RegisterPageContainer from '../containers/register-page/register-page'; import HeaderContainer from '../containers/header/header'; -import ModelRunnerModalContainer from '../containers/model-runner-dialog/model-runner-dialog'; -import FeedbackComponent from './feedback'; import { NotificationsState } from '../reducers/interfaces'; type CVATAppProps = { @@ -262,17 +260,15 @@ export default class CVATApplication extends React.PureComponent { - + - + { withModels && } { installedAutoAnnotation - && } + && } - - {/* eslint-disable-next-line */} diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx index 69b76e22d52a..9d9755a1f79a 100644 --- a/cvat-ui/src/components/header/header.tsx +++ b/cvat-ui/src/components/header/header.tsx @@ -8,11 +8,16 @@ import { Icon, Button, Menu, + Dropdown, } from 'antd'; import Text from 'antd/lib/typography/Text'; import getCore from '../../core'; +import { + CVATLogo, + AccountIcon, +} from '../../icons'; const core = getCore(); const serverHost = core.config.backendAPI.slice(0, -7); @@ -29,9 +34,6 @@ interface HeaderContainerProps { type Props = HeaderContainerProps & RouteComponentProps; -const cvatLogo = (): JSX.Element => ; -const userLogo = (): JSX.Element => ; - function HeaderContainer(props: Props): JSX.Element { const { installedTFSegmentation, @@ -47,10 +49,31 @@ function HeaderContainer(props: Props): JSX.Element { || installedTFAnnotation || installedTFSegmentation; + const menu = ( + + + + Settings + + + + About + + + {logoutFetching ? : } + Logout + + + + ); + return (
- + - - - - - - {username.length > 14 ? `${username.slice(0, 10)} ...` : username} - - - - - ) - } - > - - {logoutFetching && } - Logout - - - + + + + + {username.length > 14 ? `${username.slice(0, 10)} ...` : username} + + + +
); diff --git a/cvat-ui/src/components/models-page/empty-list.tsx b/cvat-ui/src/components/models-page/empty-list.tsx index b48417a03d29..0a6fdd4dfd76 100644 --- a/cvat-ui/src/components/models-page/empty-list.tsx +++ b/cvat-ui/src/components/models-page/empty-list.tsx @@ -8,14 +8,16 @@ import { Icon, } from 'antd'; -export default function EmptyListComponent(): JSX.Element { - const emptyTasksIcon = (): JSX.Element => (); +import { + EmptyTasksIcon as EmptyModelsIcon, +} from '../../icons'; +export default function EmptyListComponent(): JSX.Element { return (
- + diff --git a/cvat-ui/src/components/models-page/models-page.tsx b/cvat-ui/src/components/models-page/models-page.tsx index bd26271dc8de..6a1acb616a7a 100644 --- a/cvat-ui/src/components/models-page/models-page.tsx +++ b/cvat-ui/src/components/models-page/models-page.tsx @@ -8,6 +8,7 @@ import TopBarComponent from './top-bar'; import UploadedModelsList from './uploaded-models-list'; import BuiltModelsList from './built-models-list'; import EmptyListComponent from './empty-list'; +import FeedbackComponent from '../feedback'; import { Model } from '../../reducers/interfaces'; interface Props { @@ -64,6 +65,7 @@ export default function ModelsPageComponent(props: Props): JSX.Element { && !installedTFSegmentation && } +
); } diff --git a/cvat-ui/src/components/models-page/uploaded-model-item.tsx b/cvat-ui/src/components/models-page/uploaded-model-item.tsx index 9f93246b4746..06b5cd10225c 100644 --- a/cvat-ui/src/components/models-page/uploaded-model-item.tsx +++ b/cvat-ui/src/components/models-page/uploaded-model-item.tsx @@ -13,6 +13,7 @@ import { import Text from 'antd/lib/typography/Text'; import moment from 'moment'; +import { MenuIcon } from '../../icons'; import { Model } from '../../reducers/interfaces'; interface Props { @@ -22,7 +23,6 @@ interface Props { } export default function UploadedModelItem(props: Props): JSX.Element { - const subMenuIcon = (): JSX.Element => (); const { model, owner, @@ -34,7 +34,7 @@ export default function UploadedModelItem(props: Props): JSX.Element { OpenVINO - + {model.name} @@ -65,7 +65,7 @@ export default function UploadedModelItem(props: Props): JSX.Element { )} - + Actions )} > - + diff --git a/cvat-ui/src/components/models-page/uploaded-models-list.tsx b/cvat-ui/src/components/models-page/uploaded-models-list.tsx index 233359293abc..fbb5a345db4d 100644 --- a/cvat-ui/src/components/models-page/uploaded-models-list.tsx +++ b/cvat-ui/src/components/models-page/uploaded-models-list.tsx @@ -48,7 +48,7 @@ export default function UploadedModelsListComponent(props: Props): JSX.Element { Framework - + Name @@ -60,7 +60,7 @@ export default function UploadedModelsListComponent(props: Props): JSX.Element { Labels - + { items } diff --git a/cvat-ui/src/components/task-page/top-bar.tsx b/cvat-ui/src/components/task-page/top-bar.tsx index 8c368771f764..20de8f1c17c6 100644 --- a/cvat-ui/src/components/task-page/top-bar.tsx +++ b/cvat-ui/src/components/task-page/top-bar.tsx @@ -11,14 +11,13 @@ import { import Text from 'antd/lib/typography/Text'; import ActionsMenuContainer from '../../containers/actions-menu/actions-menu'; +import { MenuIcon } from '../../icons'; interface DetailsComponentProps { taskInstance: any; } export default function DetailsComponent(props: DetailsComponentProps): JSX.Element { - const subMenuIcon = (): JSX.Element => (); - const { taskInstance } = props; const { id } = taskInstance; @@ -37,7 +36,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem > diff --git a/cvat-ui/src/components/tasks-page/empty-list.tsx b/cvat-ui/src/components/tasks-page/empty-list.tsx index bbc89e00fdd0..da2f9cfab522 100644 --- a/cvat-ui/src/components/tasks-page/empty-list.tsx +++ b/cvat-ui/src/components/tasks-page/empty-list.tsx @@ -8,14 +8,14 @@ import { Icon, } from 'antd'; -export default function EmptyListComponent(): JSX.Element { - const emptyTasksIcon = (): JSX.Element => (); +import { EmptyTasksIcon } from '../../icons'; +export default function EmptyListComponent(): JSX.Element { return (
- + diff --git a/cvat-ui/src/components/tasks-page/task-item.tsx b/cvat-ui/src/components/tasks-page/task-item.tsx index dcf2a5c5f572..8e14d6089a38 100644 --- a/cvat-ui/src/components/tasks-page/task-item.tsx +++ b/cvat-ui/src/components/tasks-page/task-item.tsx @@ -16,6 +16,7 @@ import moment from 'moment'; import ActionsMenuContainer from '../../containers/actions-menu/actions-menu'; import { ActiveInference } from '../../reducers/interfaces'; +import { MenuIcon } from '../../icons'; export interface TaskItemProps { taskInstance: any; @@ -148,7 +149,6 @@ class TaskItemComponent extends React.PureComponent (); const { taskInstance, history, @@ -173,7 +173,7 @@ class TaskItemComponent extends React.PureComponent Actions }> - + diff --git a/cvat-ui/src/components/tasks-page/task-list.tsx b/cvat-ui/src/components/tasks-page/task-list.tsx index ce8381096004..5e306e8de936 100644 --- a/cvat-ui/src/components/tasks-page/task-list.tsx +++ b/cvat-ui/src/components/tasks-page/task-list.tsx @@ -6,6 +6,7 @@ import { Pagination, } from 'antd'; +import ModelRunnerModalContainer from '../../containers/model-runner-dialog/model-runner-dialog'; import TaskItem from '../../containers/tasks-page/task-item'; export interface ContentListProps { @@ -45,6 +46,7 @@ export default function TaskListComponent(props: ContentListProps): JSX.Element /> + ); } diff --git a/cvat-ui/src/components/tasks-page/tasks-page.tsx b/cvat-ui/src/components/tasks-page/tasks-page.tsx index 2f640c43021e..278641d1bcde 100644 --- a/cvat-ui/src/components/tasks-page/tasks-page.tsx +++ b/cvat-ui/src/components/tasks-page/tasks-page.tsx @@ -15,6 +15,7 @@ import { } from '../../reducers/interfaces'; import TopBar from './top-bar'; +import FeedbackComponent from '../feedback'; import EmptyListComponent from './empty-list'; import TaskListContainer from '../../containers/tasks-page/tasks-list'; @@ -222,6 +223,7 @@ class TasksPageComponent extends React.PureComponent ) : } +
); } diff --git a/cvat-ui/src/containers/annotation-page/annotation-page.tsx b/cvat-ui/src/containers/annotation-page/annotation-page.tsx index 07f5a7ca9665..541a831884b1 100644 --- a/cvat-ui/src/containers/annotation-page/annotation-page.tsx +++ b/cvat-ui/src/containers/annotation-page/annotation-page.tsx @@ -1,11 +1,9 @@ import React from 'react'; -export default class AnnotationPageContainer extends React.PureComponent { - public render(): JSX.Element { - return ( -
- AnnotationPage -
- ); - } +import AnnotationPageComponent from '../../components/annotation-page/annotation-page'; + +export default function AnnotationPageContainer() { + return ( + + ); } diff --git a/cvat-ui/src/icons.tsx b/cvat-ui/src/icons.tsx new file mode 100644 index 000000000000..642870efc4c5 --- /dev/null +++ b/cvat-ui/src/icons.tsx @@ -0,0 +1,64 @@ +import React from 'react'; + +import SVGCVATLogo from './assets/cvat-logo.svg'; +import SVGAccountIcon from './assets/account-icon.svg'; +import SVGEmptyTasksIcon from './assets/empty-tasks-icon.svg'; +import SVGMenuIcon from './assets/menu-icon.svg'; +import SVGCursorIcon from './assets/cursor-icon.svg'; +import SVGMoveIcon from './assets/move-icon.svg'; +import SVGRotateIcon from './assets/rotate-icon.svg'; +import SVGFitIcon from './assets/fit-to-window-icon.svg'; +import SVGZoomIcon from './assets/zoom-icon.svg'; +import SVGRectangleIcon from './assets/rectangle-icon.svg'; +import SVGPolygonIcon from './assets/polygon-icon.svg'; +import SVGPointIcon from './assets/point-icon.svg'; +import SVGPolylineIcon from './assets/polyline-icon.svg'; +import SVGTagIcon from './assets/tag-icon.svg'; +import SVGMergeIcon from './assets/merge-icon.svg'; +import SVGGroupIcon from './assets/group-icon.svg'; +import SVGSplitIcon from './assets/split-icon.svg'; +import SVGMainMenuIcon from './assets/main-menu-icon.svg'; +import SVGSaveIcon from './assets/save-icon.svg'; +import SVGUndoIcon from './assets/undo-icon.svg'; +import SVGRedoIcon from './assets/redo-icon.svg'; +import SVGPlaycontrolFirstIcon from './assets/playcontrol-first-icon.svg'; +import SVGPlaycontrolBackJumpIcon from './assets/playcontrol-back-jump-icon.svg'; +import SVGPlaycontrolPreviousIcon from './assets/playcontrol-previous-icon.svg'; +import SVGPlaycontrolPlayIcon from './assets/playcontrol-play-icon.svg'; +import SVGPlaycontrolNextIcon from './assets/playcontrol-next-icon.svg'; +import SVGPlaycontrolForwardJumpIcon from './assets/playcontrol-forward-jump-icon.svg'; +import SVGPlaycontrolLastIcon from './assets/playcontrol-last-icon.svg'; +import SVGInfoIcon from './assets/info-icon.svg'; +import SVGFullscreenIcon from './assets/fullscreen-icon.svg'; + + +export const CVATLogo = (): JSX.Element => ; +export const AccountIcon = (): JSX.Element => ; +export const EmptyTasksIcon = (): JSX.Element => ; +export const MenuIcon = (): JSX.Element => ; +export const CursorIcon = (): JSX.Element => ; +export const MoveIcon = (): JSX.Element => ; +export const RotateIcon = (): JSX.Element => ; +export const FitIcon = (): JSX.Element => ; +export const ZoomIcon = (): JSX.Element => ; +export const RectangleIcon = (): JSX.Element => ; +export const PolygonIcon = (): JSX.Element => ; +export const PointIcon = (): JSX.Element => ; +export const PolylineIcon = (): JSX.Element => ; +export const TagIcon = (): JSX.Element => ; +export const MergeIcon = (): JSX.Element => ; +export const GroupIcon = (): JSX.Element => ; +export const SplitIcon = (): JSX.Element => ; +export const MainMenuIcon = (): JSX.Element => ; +export const SaveIcon = (): JSX.Element => ; +export const UndoIcon = (): JSX.Element => ; +export const RedoIcon = (): JSX.Element => ; +export const PlaycontrolFirstIcon = (): JSX.Element => ; +export const PlaycontrolBackJumpIcon = (): JSX.Element => ; +export const PlaycontrolPreviousIcon = (): JSX.Element => ; +export const PlaycontrolPlayIcon = (): JSX.Element => ; +export const PlaycontrolNextIcon = (): JSX.Element => ; +export const PlaycontrolForwardJumpIcon = (): JSX.Element => ; +export const PlaycontrolLastIcon = (): JSX.Element => ; +export const InfoIcon = (): JSX.Element => ; +export const FullscreenIcon = (): JSX.Element => ; diff --git a/cvat-ui/src/stylesheet.css b/cvat-ui/src/stylesheet.css index d553f7bdfa74..5fed0d58e168 100644 --- a/cvat-ui/src/stylesheet.css +++ b/cvat-ui/src/stylesheet.css @@ -1,3 +1,10 @@ +hr { + border: 0; + height: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); +} + .cvat-header.ant-layout-header { display: -webkit-box; display: -ms-flexbox; @@ -62,36 +69,10 @@ font-size: 40px; } -.anticon.cvat-logo-icon { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-right: 20px; -} - -.anticon.cvat-logo-icon > img { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 15.8px; - margin-left: 18px; -} - -.anticon.cvat-back-icon > img { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 15.8px; - margin-left: 18px; - margin-right: 18px; -} - -.anticon.cvat-back-icon:hover > img { - -webkit-filter: invert(0.4); - filter: invert(0.4); +.anticon.cvat-logo-icon > svg { + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); } .ant-btn.cvat-header-button { @@ -101,35 +82,21 @@ } -.ant-menu.cvat-header-menu { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; +.ant-dropdown-trigger.cvat-header-menu-dropdown { + display: -webkit-box; + display: -ms-flexbox; + display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border: 0px; border-left: 1px solid #c3c3c3; - height: 100%; - background: rgba(255,255,255,0); -} - -.ant-menu.cvat-header-menu > li.ant-menu-submenu { - border-bottom: unset; -} - - -.ant-menu.cvat-header-menu > li > div { - margin-top: 0px; + padding: 0px 20px; } -.anticon.cvat-header-user-icon { - display: contents; -} - -.anticon.cvat-header-user-icon > img { - width: 17px; - margin: 16px; +.anticon.cvat-header-account-icon > svg { + -webkit-transform: scale(0.4); + -ms-transform: scale(0.4); + transform: scale(0.4); } .anticon.cvat-header-menu-icon { @@ -137,17 +104,6 @@ margin-right: 0px; } -.anticon.cvat-header-menu-icon > img { - width: 14px; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); -} - -.anticon.cvat-empty-tasks-icon > img { - width: 90px; -} - .cvat-title { font-weight: 400; font-size: 21px; @@ -284,14 +240,17 @@ } .cvat-tasks-list-item > div:nth-child(4) > div:nth-child(2) { - margin-right: 20px; - margin-top: 20px; + margin-right: 5px; + margin-top: 10px; } .cvat-tasks-list-item > div:nth-child(4) > div:nth-child(2) > div { display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .cvat-task-item-menu-icon > img { @@ -340,6 +299,10 @@ margin-right: 15px; } +.cvat-actions-menu > .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow { + width: 0px; +} + .cvat-task-item-preview { max-width: 140px; max-height: 80px; @@ -747,8 +710,10 @@ textarea.ant-input.cvat-raw-labels-viewer { overflow: hidden; } -.anticon.cvat-empty-models-icon > img { - width: 90px; +.cvat-menu-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); } .cvat-create-model-form-wrapper { @@ -816,3 +781,217 @@ textarea.ant-input.cvat-raw-labels-viewer { #cvat-create-model-button { padding: 0 30px; } + +/* Annotation view */ +.cvat-annotation-page.ant-layout { + height: 100% +} + +.ant-layout-header.cvat-annotation-page-header { + background-color: #F1F1F1; + border-bottom: 1px solid #D7D7D7; + height: 54px; + padding: 0px; +} + +.cvat-annotation-header-left-group { + height: 100%; +} + +.cvat-annotation-header-left-group > div { + padding: 0px; + width: 54px; + height: 54px; + float: left; + text-align: center; +} + +.cvat-annotation-header-left-group > div:first-child { + -webkit-filter: invert(0.9); + filter: invert(0.9); + background: white; + border-radius: 0px; + width: 70px; +} + +.cvat-annotation-header-left-group > div > * { + display: block; + line-height: 0px; +} + +.cvat-annotation-header-left-group > div > span { + font-size: 10px; +} + +.cvat-annotation-header-left-group > div > i { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + padding: 3px; +} + +.cvat-annotation-header-left-group > div:hover > i { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} + +.cvat-annotation-header-left-group > div:active > i { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); +} + +.cvat-annotation-header-player-group > div { + height: 54px; +} + +.cvat-annotation-header-player-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + height: 100%; + margin-right: 10px; +} + +.cvat-annotation-header-player-buttons > i { + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); +} + +.cvat-annotation-header-player-buttons > i:hover { + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); +} + +.cvat-annotation-header-player-buttons > i:active { + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); +} + +.cvat-annotation-header-player-controls { + position: relative; + height: 100%; + line-height: 27px; +} + +.cvat-annotation-header-player-controls > div { + position: relative; + height: 50%; +} + +.cvat-annotation-header-player-slider { + width: 350px; +} + +.cvat-annotation-header-player-slider > .ant-slider-rail { + background-color: #979797; +} + +.cvat-annotation-header-filename-wrapper { + max-width: 180px; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +.cvat-annotation-header-frame-selector { + width: 5em; + margin-right: 0.5em; +} + +.cvat-annotation-header-right-group { + height: 100%; +} + +.cvat-annotation-header-right-group > div { + height: 54px; + float: left; + text-align: center; + margin-right: 20px; +} + +.cvat-annotation-header-right-group > div:not(:nth-child(3)) > * { + display: block; + line-height: 0px; +} + +.cvat-annotation-header-right-group > div > span { + font-size: 10px; +} + +.cvat-annotation-header-right-group > div > i { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + padding: 3px; +} + +.cvat-annotation-header-right-group > div:hover > i { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} + +.cvat-annotation-header-right-group > div:active > i { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); +} + +.cvat-annotation-header-workspace-selector { + width: 150px; +} + +.cvat-annotation-page-controls-sidebar { + background-color: #F1F1F1; + border-right: 1px solid #D7D7D7; +} + +.cvat-annotation-page-objects-sidebar { + background-color: #F1F1F1; + border-left: 1px solid #D7D7D7; +} + +.cvat-annotation-page-canvas-container { + background-color: white; +} + +.cvat-annotation-page-objects-sidebar { + top: 0px; + right: 0px; + left: auto; + background: white; +} + +.cvat-annotation-page-controls-sidebar > div > i { + border-radius: 3.3px; + -webkit-transform: scale(0.65); + -ms-transform: scale(0.65); + transform: scale(0.65); + padding: 2px; +} + +.cvat-annotation-page-controls-sidebar > div > i:hover { + background: #D8D8D8; + -webkit-transform: scale(0.75); + -ms-transform: scale(0.75); + transform: scale(0.75); +} + +.cvat-annotation-page-controls-sidebar > div > i:active { + background: #C3C3C3; +} + +.cvat-annotation-page-controls-sidebar > div > i > svg { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); +} diff --git a/cvat-ui/tsconfig.json b/cvat-ui/tsconfig.json index 751f771c43bf..a42613556342 100644 --- a/cvat-ui/tsconfig.json +++ b/cvat-ui/tsconfig.json @@ -20,6 +20,7 @@ "jsx": "preserve" }, "include": [ + "./index.d.ts", "src/index.tsx" ] } diff --git a/cvat-ui/webpack.config.js b/cvat-ui/webpack.config.js index 6f9ae26296b3..0dcde962a173 100644 --- a/cvat-ui/webpack.config.js +++ b/cvat-ui/webpack.config.js @@ -52,6 +52,22 @@ module.exports = { }, { test: /\.(css|sass)$/, use: ['style-loader', 'css-loader'] + }, { + test: /\.svg$/, + exclude: /node_modules/, + use: ['babel-loader', + { + loader: 'react-svg-loader', + query: { + svgo: { + plugins: [ + { pretty: true, }, + { cleanupIDs: false, } + ], + }, + }, + } + ] }], }, plugins: [