mirror of
https://github.com/openvinotoolkit/cvat.git
synced 2022-03-09 18:58:10 +03:00
React, Antd, Redux: Left sidebar and top for annotation page (#963)
* Rebased from develop * Improved getting icons method * Added more icons * Left menu * Initial commit * Setup SVGO, added some buttons to top * Top bar progress * Top bar for annotation page * Updated styles
This commit is contained in:
Boris Sekachev
committed by
Nikita Manovich
Nikita Manovich
parent
a716355cdc
commit
84d0a77999
1
cvat-ui/dist/assets/cvat-logo.svg
vendored
1
cvat-ui/dist/assets/cvat-logo.svg
vendored
@@ -1 +0,0 @@
|
||||
<svg width="98" height="27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M101 0v29l-52.544.001C44.326 35.511 35.598 40 25.5 40 11.417 40 0 31.27 0 20.5S11.417 1 25.5 1c4.542 0 8.807.908 12.5 2.5V0h63z" id="a"/></defs><g transform="translate(-2 -1)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M48.142 1c4.736 0 6.879 3.234 6.879 5.904v2.068h-4.737V6.904c0-.79-.789-2.144-2.142-2.144-1.654 0-2.368 1.354-2.368 2.144v15.192c0 .79.714 2.144 2.368 2.144 1.353 0 2.142-1.354 2.142-2.144v-2.068h4.737v2.068c0 2.67-2.143 5.904-6.88 5.904C42.956 28 41 24.766 41 22.134V6.904C41 4.234 42.955 1 48.142 1zM19-6c9.389 0 17 7.611 17 17s-7.611 17-17 17S2 20.389 2 11 9.611-6 19-6zm42.256 7.338l3.345 19.48h.075l3.42-19.48h5l-6.052 26.324h-5L56.22 1.338h5.037zm20.706 0l5.413 26.324h-4.699l-.94-6.13h-4.548l-.902 6.13h-4.435l5.413-26.324h4.698zm18.038 0v3.723h-4.849v22.6h-4.699v-22.6h-4.81V1.338H100zM19 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm60.557 4.295h-.113l-1.466 9.439h3.007l-1.428-9.439z" fill="#000" fill-rule="nonzero" mask="url(#b)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
1
cvat-ui/dist/assets/icon-redo.svg
vendored
1
cvat-ui/dist/assets/icon-redo.svg
vendored
@@ -1 +0,0 @@
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h34v24H0z"/></defs><g transform="translate(3 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M28.262 9.331C20.935.18 8.932-.428 1.308 7.643V2.968H0v6.537c0 .45.293.817.654.817h5.232V8.688H2.35c7.125-7.322 18.2-6.683 24.987 1.8 7.14 8.92 7.14 23.437 0 32.357L28.262 44c7.65-9.557 7.65-25.111 0-34.669z" fill="#000" mask="url(#b)" transform="matrix(-1 0 0 1 34 0)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 557 B |
1
cvat-ui/dist/assets/icon-undo.svg
vendored
1
cvat-ui/dist/assets/icon-undo.svg
vendored
@@ -1 +0,0 @@
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h34v24H0z"/></defs><g transform="translate(3 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M28.262 9.331C20.935.18 8.932-.428 1.308 7.643V2.968H0v6.537c0 .45.293.817.654.817h5.232V8.688H2.35c7.125-7.322 18.2-6.683 24.987 1.8 7.14 8.92 7.14 23.437 0 32.357L28.262 44c7.65-9.557 7.65-25.111 0-34.669z" fill="#000" mask="url(#b)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 523 B |
1
cvat-ui/index.d.ts
vendored
Normal file
1
cvat-ui/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
declare module '*.svg';
|
||||
205
cvat-ui/package-lock.json
generated
205
cvat-ui/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
|
Before Width: | Height: | Size: 591 B After Width: | Height: | Size: 591 B |
|
Before Width: | Height: | Size: 350 B After Width: | Height: | Size: 350 B |
1
cvat-ui/src/assets/cvat-logo.svg
Normal file
1
cvat-ui/src/assets/cvat-logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="98" height="27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M101 0v29l-52.544.001C44.326 35.511 35.598 40 25.5 40 11.417 40 0 31.27 0 20.5S11.417 1 25.5 1c4.542 0 8.807.908 12.5 2.5V0h63z" id="logoA"/></defs><g transform="translate(-2 -1)" fill="none" fill-rule="evenodd"><mask id="logoB" fill="#fff"><use xlink:href="#logoA"/></mask><path d="M48.142 1c4.736 0 6.879 3.234 6.879 5.904v2.068h-4.737V6.904c0-.79-.789-2.144-2.142-2.144-1.654 0-2.368 1.354-2.368 2.144v15.192c0 .79.714 2.144 2.368 2.144 1.353 0 2.142-1.354 2.142-2.144v-2.068h4.737v2.068c0 2.67-2.143 5.904-6.88 5.904C42.956 28 41 24.766 41 22.134V6.904C41 4.234 42.955 1 48.142 1zM19-6c9.389 0 17 7.611 17 17s-7.611 17-17 17S2 20.389 2 11 9.611-6 19-6zm42.256 7.338l3.345 19.48h.075l3.42-19.48h5l-6.052 26.324h-5L56.22 1.338h5.037zm20.706 0l5.413 26.324h-4.699l-.94-6.13h-4.548l-.902 6.13h-4.435l5.413-26.324h4.698zm18.038 0v3.723h-4.849v22.6h-4.699v-22.6h-4.81V1.338H100zM19 4a7 7 0 100 14 7 7 0 000-14zm60.557 4.295h-.113l-1.466 9.439h3.007l-1.428-9.439z" fill="#000" fill-rule="nonzero" mask="url(#logoB)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 235 B After Width: | Height: | Size: 235 B |
|
Before Width: | Height: | Size: 609 B After Width: | Height: | Size: 609 B |
|
Before Width: | Height: | Size: 222 B After Width: | Height: | Size: 222 B |
|
Before Width: | Height: | Size: 281 B After Width: | Height: | Size: 281 B |
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 458 B |
|
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 296 B |
|
Before Width: | Height: | Size: 535 B After Width: | Height: | Size: 535 B |
@@ -1 +1 @@
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M5 30h30v-3.333H5V30zm0-8.333h30v-3.334H5v3.334zM5 10v3.333h30V10H5z" fill="#000" fill-rule="evenodd"/></svg>
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M5 30h30v-3.333H5V30zm0-8.333h30v-3.334H5v3.334zM5 10v3.333h30V10H5z" fill="#000" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 181 B After Width: | Height: | Size: 182 B |
|
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 403 B |
|
Before Width: | Height: | Size: 171 B After Width: | Height: | Size: 171 B |
|
Before Width: | Height: | Size: 891 B After Width: | Height: | Size: 891 B |
|
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 357 B |
|
Before Width: | Height: | Size: 880 B After Width: | Height: | Size: 880 B |
|
Before Width: | Height: | Size: 402 B After Width: | Height: | Size: 402 B |
|
Before Width: | Height: | Size: 521 B After Width: | Height: | Size: 521 B |
|
Before Width: | Height: | Size: 165 B After Width: | Height: | Size: 165 B |
|
Before Width: | Height: | Size: 523 B After Width: | Height: | Size: 523 B |
|
Before Width: | Height: | Size: 166 B After Width: | Height: | Size: 166 B |
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 331 B |
|
Before Width: | Height: | Size: 134 B After Width: | Height: | Size: 134 B |
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 333 B |
|
Before Width: | Height: | Size: 423 B After Width: | Height: | Size: 423 B |
|
Before Width: | Height: | Size: 216 B After Width: | Height: | Size: 216 B |
|
Before Width: | Height: | Size: 209 B After Width: | Height: | Size: 209 B |
|
Before Width: | Height: | Size: 480 B After Width: | Height: | Size: 480 B |
|
Before Width: | Height: | Size: 157 B After Width: | Height: | Size: 157 B |
1
cvat-ui/src/assets/redo-icon.svg
Normal file
1
cvat-ui/src/assets/redo-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="redoA" d="M0 0h34v24H0z"/></defs><g transform="translate(3 8)" fill="none" fill-rule="evenodd"><mask id="redoB" fill="#fff"><use xlink:href="#redoA"/></mask><path d="M28.262 9.331C20.935.18 8.932-.428 1.308 7.643V2.968H0v6.537c0 .45.293.817.654.817h5.232V8.688H2.35c7.125-7.322 18.2-6.683 24.987 1.8 7.14 8.92 7.14 23.437 0 32.357L28.262 44c7.65-9.557 7.65-25.111 0-34.669z" fill="#000" mask="url(#redoB)" transform="matrix(-1 0 0 1 34 0)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 573 B |
|
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 549 B |
|
Before Width: | Height: | Size: 756 B After Width: | Height: | Size: 756 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 195 B |
|
Before Width: | Height: | Size: 435 B After Width: | Height: | Size: 435 B |
|
Before Width: | Height: | Size: 180 B After Width: | Height: | Size: 180 B |
|
Before Width: | Height: | Size: 659 B After Width: | Height: | Size: 659 B |
1
cvat-ui/src/assets/undo-icon.svg
Normal file
1
cvat-ui/src/assets/undo-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="b" d="M0 0h34v24H0z"/></defs><g transform="translate(3 8)" fill="none" fill-rule="evenodd"><mask id="undoB" fill="#fff"><use xlink:href="#b"/></mask><path d="M28.62 9.331C20.935.18 8.932-.428 1.308 7.643V2.968H0v6.537c0 .45.293.817.654.817h5.232V8.688H2.35c7.125-7.322 18.2-6.683 24.987 1.8 7.14 8.92 7.14 23.437 0 32.357L28.262 44c7.65-9.557 7.65-25.111 0-34.669z" fill="#000" mask="url(#undoB)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 530 B |
|
Before Width: | Height: | Size: 489 B After Width: | Height: | Size: 489 B |
17
cvat-ui/src/components/annotation-page/annotation-page.tsx
Normal file
17
cvat-ui/src/components/annotation-page/annotation-page.tsx
Normal file
@@ -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 (
|
||||
<Layout className='cvat-annotation-page'>
|
||||
<AnnotationTopBarComponent />
|
||||
<StandardWorkspaceComponent />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Layout,
|
||||
} from 'antd';
|
||||
|
||||
export default function CanvasWrapperComponent(): JSX.Element {
|
||||
return (
|
||||
<Layout.Content
|
||||
className='cvat-annotation-page-canvas-container'
|
||||
>
|
||||
main content
|
||||
</Layout.Content>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<Layout.Sider
|
||||
className='cvat-annotation-page-controls-sidebar'
|
||||
theme='light'
|
||||
width={44}
|
||||
>
|
||||
<Tooltip overlay='Cursor' placement='right'>
|
||||
<Icon component={CursorIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Move the image' placement='right'>
|
||||
<Icon component={MoveIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Rotate the image' placement='right'>
|
||||
<Icon component={RotateIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<hr />
|
||||
|
||||
<Tooltip overlay='Fit the image' placement='right'>
|
||||
<Icon component={FitIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Zoom the image' placement='right'>
|
||||
<Icon component={ZoomIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<hr />
|
||||
|
||||
<Tooltip overlay='Draw a rectangle' placement='right'>
|
||||
<Icon component={RectangleIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Draw a polygon' placement='right'>
|
||||
<Icon component={PolygonIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Draw a polyline' placement='right'>
|
||||
<Icon component={PolylineIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Draw points' placement='right'>
|
||||
<Icon component={PointIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Setup a tag' placement='right'>
|
||||
<Icon component={TagIcon} />
|
||||
</Tooltip>
|
||||
<hr />
|
||||
<Tooltip overlay='Merge shapes/tracks' placement='right'>
|
||||
<Icon component={MergeIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Group shapes/tracks' placement='right'>
|
||||
<Icon component={GroupIcon} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip overlay='Split a track' placement='right'>
|
||||
<Icon component={SplitIcon} />
|
||||
</Tooltip>
|
||||
</Layout.Sider>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<Layout.Sider
|
||||
className='cvat-annotation-page-objects-sidebar'
|
||||
theme='light'
|
||||
width={300}
|
||||
collapsedWidth={0}
|
||||
reverseArrow
|
||||
collapsible
|
||||
trigger={null}
|
||||
collapsed={collapsed}
|
||||
>
|
||||
{/* eslint-disable-next-line */}
|
||||
<span
|
||||
className={`cvat-annotation-page-objects-sidebar
|
||||
ant-layout-sider-zero-width-trigger
|
||||
ant-layout-sider-zero-width-trigger-left`}
|
||||
onClick={
|
||||
(): void => this.setState({ collapsed: !collapsed })
|
||||
}
|
||||
>
|
||||
{collapsed && <Icon type='menu-fold' title='Show' />}
|
||||
{!collapsed && <Icon type='menu-unfold' title='Hide' />}
|
||||
</span>
|
||||
|
||||
Right sidebar
|
||||
</Layout.Sider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<Layout>
|
||||
<ControlsSideBarComponent />
|
||||
<CanvasWrapperComponent />
|
||||
<ObjectSideBarComponent />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
104
cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
Normal file
104
cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
Normal file
@@ -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 (
|
||||
<Layout.Header className='cvat-annotation-page-header'>
|
||||
<Row type='flex' justify='space-between'>
|
||||
<Col className='cvat-annotation-header-left-group'>
|
||||
<div>
|
||||
<Icon component={MainMenuIcon} />
|
||||
<span>Menu</span>
|
||||
</div>
|
||||
<div>
|
||||
<Icon component={SaveIcon} />
|
||||
<span>Save</span>
|
||||
</div>
|
||||
<div>
|
||||
<Icon component={UndoIcon} />
|
||||
<span>Undo</span>
|
||||
</div>
|
||||
<div>
|
||||
<Icon component={RedoIcon} />
|
||||
<span>Redo</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className='cvat-annotation-header-player-group'>
|
||||
<Row type='flex'>
|
||||
<Col className='cvat-annotation-header-player-buttons'>
|
||||
<Icon component={PlaycontrolFirstIcon} />
|
||||
<Icon component={PlaycontrolBackJumpIcon} />
|
||||
<Icon component={PlaycontrolPreviousIcon} />
|
||||
<Icon component={PlaycontrolPlayIcon} />
|
||||
<Icon component={PlaycontrolNextIcon} />
|
||||
<Icon component={PlaycontrolForwardJumpIcon} />
|
||||
<Icon component={PlaycontrolLastIcon} />
|
||||
</Col>
|
||||
<Col className='cvat-annotation-header-player-controls'>
|
||||
<Row type='flex'>
|
||||
<Col>
|
||||
<Slider className='cvat-annotation-header-player-slider' tipFormatter={null} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='space-between'>
|
||||
<Col className='cvat-annotation-header-filename-wrapper'>
|
||||
<Tooltip overlay='filename.png'>
|
||||
<Text type='secondary'>filename.png</Text>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Input className='cvat-annotation-header-frame-selector' type='number' size='small' />
|
||||
<Text type='secondary'>of 200</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col className='cvat-annotation-header-right-group'>
|
||||
<div>
|
||||
<Icon component={FullscreenIcon} />
|
||||
<span>Fullscreen</span>
|
||||
</div>
|
||||
<div>
|
||||
<Icon component={InfoIcon} />
|
||||
<span>Info</span>
|
||||
</div>
|
||||
<div>
|
||||
<Select className='cvat-annotation-header-workspace-selector' defaultValue='standard'>
|
||||
<Select.Option key='standard' value='standard'>Standard</Select.Option>
|
||||
<Select.Option key='aam' value='aam'>Attribute annotation</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Layout.Header>
|
||||
);
|
||||
}
|
||||
@@ -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<CVATAppProps> {
|
||||
<Layout.Content>
|
||||
<Switch>
|
||||
<Route exact path='/tasks' component={TasksPageContainer} />
|
||||
<Route path='/tasks/create' component={CreateTaskPageContainer} />
|
||||
<Route exact path='/tasks/create' component={CreateTaskPageContainer} />
|
||||
<Route exact path='/tasks/:id' component={TaskPageContainer} />
|
||||
<Route path='/tasks/:id/jobs/:id' component={AnnotationPageContainer} />
|
||||
<Route exact path='/tasks/:id/jobs/:id' component={AnnotationPageContainer} />
|
||||
{ withModels
|
||||
&& <Route exact path='/models' component={ModelsPageContainer} /> }
|
||||
{ installedAutoAnnotation
|
||||
&& <Route path='/models/create' component={CreateModelPageContainer} /> }
|
||||
&& <Route exact path='/models/create' component={CreateModelPageContainer} /> }
|
||||
<Redirect push to='/tasks' />
|
||||
</Switch>
|
||||
<FeedbackComponent />
|
||||
<ModelRunnerModalContainer />
|
||||
{/* eslint-disable-next-line */}
|
||||
<a id='downloadAnchor' style={{ display: 'none' }} download/>
|
||||
</Layout.Content>
|
||||
|
||||
@@ -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 => <img alt='' src='/assets/cvat-logo.svg' />;
|
||||
const userLogo = (): JSX.Element => <img alt='' src='/assets/icon-account.svg' />;
|
||||
|
||||
function HeaderContainer(props: Props): JSX.Element {
|
||||
const {
|
||||
installedTFSegmentation,
|
||||
@@ -47,10 +49,31 @@ function HeaderContainer(props: Props): JSX.Element {
|
||||
|| installedTFAnnotation
|
||||
|| installedTFSegmentation;
|
||||
|
||||
const menu = (
|
||||
<Menu className='cvat-header-menu' mode='vertical'>
|
||||
<Menu.Item>
|
||||
<Icon type='setting' />
|
||||
Settings
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<Icon type='info-circle' />
|
||||
About
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
onClick={onLogout}
|
||||
disabled={logoutFetching}
|
||||
>
|
||||
{logoutFetching ? <Icon type='loading' /> : <Icon type='logout' />}
|
||||
Logout
|
||||
</Menu.Item>
|
||||
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout.Header className='cvat-header'>
|
||||
<div className='cvat-left-header'>
|
||||
<Icon className='cvat-logo-icon' component={cvatLogo} />
|
||||
<Icon className='cvat-logo-icon' component={CVATLogo} />
|
||||
|
||||
<Button
|
||||
className='cvat-header-button'
|
||||
@@ -121,32 +144,15 @@ function HeaderContainer(props: Props): JSX.Element {
|
||||
<Icon type='question-circle' />
|
||||
Help
|
||||
</Button>
|
||||
<Menu className='cvat-header-menu' subMenuCloseDelay={0.1} mode='horizontal'>
|
||||
<Menu.SubMenu
|
||||
title={
|
||||
(
|
||||
<span>
|
||||
<Icon className='cvat-header-user-icon' component={userLogo} />
|
||||
<span>
|
||||
<Text strong>
|
||||
{username.length > 14 ? `${username.slice(0, 10)} ...` : username}
|
||||
</Text>
|
||||
<Icon className='cvat-header-menu-icon' type='caret-down' />
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
>
|
||||
<Menu.Item
|
||||
onClick={onLogout}
|
||||
disabled={logoutFetching}
|
||||
className='cvat-header-button'
|
||||
>
|
||||
{logoutFetching && <Icon type='loading' />}
|
||||
Logout
|
||||
</Menu.Item>
|
||||
</Menu.SubMenu>
|
||||
</Menu>
|
||||
<Dropdown overlay={menu} className='cvat-header-menu-dropdown'>
|
||||
<span>
|
||||
<Icon className='cvat-header-account-icon' component={AccountIcon} />
|
||||
<Text strong>
|
||||
{username.length > 14 ? `${username.slice(0, 10)} ...` : username}
|
||||
</Text>
|
||||
<Icon className='cvat-header-menu-icon' type='caret-down' />
|
||||
</span>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Layout.Header>
|
||||
);
|
||||
|
||||
@@ -8,14 +8,16 @@ import {
|
||||
Icon,
|
||||
} from 'antd';
|
||||
|
||||
export default function EmptyListComponent(): JSX.Element {
|
||||
const emptyTasksIcon = (): JSX.Element => (<img alt='' src='/assets/empty-tasks-icon.svg' />);
|
||||
import {
|
||||
EmptyTasksIcon as EmptyModelsIcon,
|
||||
} from '../../icons';
|
||||
|
||||
export default function EmptyListComponent(): JSX.Element {
|
||||
return (
|
||||
<div className='cvat-empty-models-list'>
|
||||
<Row type='flex' justify='center' align='middle'>
|
||||
<Col>
|
||||
<Icon className='cvat-empty-models-icon' component={emptyTasksIcon} />
|
||||
<Icon className='cvat-empty-models-icon' component={EmptyModelsIcon} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='center' align='middle'>
|
||||
|
||||
@@ -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
|
||||
&& <EmptyListComponent />
|
||||
}
|
||||
<FeedbackComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 => (<img alt='' src='/assets/icon-sub-menu.svg' />);
|
||||
const {
|
||||
model,
|
||||
owner,
|
||||
@@ -34,7 +34,7 @@ export default function UploadedModelItem(props: Props): JSX.Element {
|
||||
<Col span={4} xxl={3}>
|
||||
<Tag color='purple'>OpenVINO</Tag>
|
||||
</Col>
|
||||
<Col span={6} xxl={7}>
|
||||
<Col span={5} xxl={7}>
|
||||
<Text className='cvat-black-color'>
|
||||
{model.name}
|
||||
</Text>
|
||||
@@ -65,7 +65,7 @@ export default function UploadedModelItem(props: Props): JSX.Element {
|
||||
)}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Col span={3} xxl={2}>
|
||||
<Text className='cvat-black-color'>Actions</Text>
|
||||
<Dropdown overlay={
|
||||
(
|
||||
@@ -81,7 +81,7 @@ export default function UploadedModelItem(props: Props): JSX.Element {
|
||||
</Menu>
|
||||
)}
|
||||
>
|
||||
<Icon className='cvat-task-item-menu-icon' component={subMenuIcon} />
|
||||
<Icon className='cvat-menu-icon' component={MenuIcon} />
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -48,7 +48,7 @@ export default function UploadedModelsListComponent(props: Props): JSX.Element {
|
||||
<Col span={4} xxl={3}>
|
||||
<Text strong>Framework</Text>
|
||||
</Col>
|
||||
<Col span={6} xxl={7}>
|
||||
<Col span={5} xxl={7}>
|
||||
<Text strong>Name</Text>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
@@ -60,7 +60,7 @@ export default function UploadedModelsListComponent(props: Props): JSX.Element {
|
||||
<Col span={5}>
|
||||
<Text strong>Labels</Text>
|
||||
</Col>
|
||||
<Col span={2} />
|
||||
<Col span={3} xxl={2} />
|
||||
</Row>
|
||||
{ items }
|
||||
</Col>
|
||||
|
||||
@@ -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 => (<img alt='' src='/assets/icon-sub-menu.svg' />);
|
||||
|
||||
const { taskInstance } = props;
|
||||
const { id } = taskInstance;
|
||||
|
||||
@@ -37,7 +36,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
|
||||
>
|
||||
<Button size='large' className='cvat-flex cvat-flex-center'>
|
||||
<Text className='cvat-black-color'>Actions</Text>
|
||||
<Icon className='cvat-task-item-menu-icon' component={subMenuIcon} />
|
||||
<Icon className='cvat-menu-icon' component={MenuIcon} />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
|
||||
@@ -8,14 +8,14 @@ import {
|
||||
Icon,
|
||||
} from 'antd';
|
||||
|
||||
export default function EmptyListComponent(): JSX.Element {
|
||||
const emptyTasksIcon = (): JSX.Element => (<img alt='' src='/assets/empty-tasks-icon.svg' />);
|
||||
import { EmptyTasksIcon } from '../../icons';
|
||||
|
||||
export default function EmptyListComponent(): JSX.Element {
|
||||
return (
|
||||
<div className='cvat-empty-task-list'>
|
||||
<Row type='flex' justify='center' align='middle'>
|
||||
<Col>
|
||||
<Icon className='cvat-empty-tasks-icon' component={emptyTasksIcon} />
|
||||
<Icon className='cvat-empty-tasks-icon' component={EmptyTasksIcon} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='center' align='middle'>
|
||||
|
||||
@@ -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<TaskItemProps & RouteCompone
|
||||
}
|
||||
|
||||
private renderNavigation(): JSX.Element {
|
||||
const subMenuIcon = (): JSX.Element => (<img alt='' src='/assets/icon-sub-menu.svg' />);
|
||||
const {
|
||||
taskInstance,
|
||||
history,
|
||||
@@ -173,7 +173,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
|
||||
<Col>
|
||||
<Text className='cvat-black-color'>Actions</Text>
|
||||
<Dropdown overlay={<ActionsMenuContainer taskInstance={taskInstance} />}>
|
||||
<Icon className='cvat-task-item-menu-icon' component={subMenuIcon} />
|
||||
<Icon className='cvat-menu-icon' component={MenuIcon} />
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -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
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<ModelRunnerModalContainer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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<TasksPageProps & RouteCompo
|
||||
/>
|
||||
) : <EmptyListComponent />
|
||||
}
|
||||
<FeedbackComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class AnnotationPageContainer extends React.PureComponent {
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<div>
|
||||
AnnotationPage
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import AnnotationPageComponent from '../../components/annotation-page/annotation-page';
|
||||
|
||||
export default function AnnotationPageContainer() {
|
||||
return (
|
||||
<AnnotationPageComponent/>
|
||||
);
|
||||
}
|
||||
|
||||
64
cvat-ui/src/icons.tsx
Normal file
64
cvat-ui/src/icons.tsx
Normal file
@@ -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 => <SVGCVATLogo />;
|
||||
export const AccountIcon = (): JSX.Element => <SVGAccountIcon />;
|
||||
export const EmptyTasksIcon = (): JSX.Element => <SVGEmptyTasksIcon />;
|
||||
export const MenuIcon = (): JSX.Element => <SVGMenuIcon />;
|
||||
export const CursorIcon = (): JSX.Element => <SVGCursorIcon />;
|
||||
export const MoveIcon = (): JSX.Element => <SVGMoveIcon />;
|
||||
export const RotateIcon = (): JSX.Element => <SVGRotateIcon />;
|
||||
export const FitIcon = (): JSX.Element => <SVGFitIcon />;
|
||||
export const ZoomIcon = (): JSX.Element => <SVGZoomIcon />;
|
||||
export const RectangleIcon = (): JSX.Element => <SVGRectangleIcon />;
|
||||
export const PolygonIcon = (): JSX.Element => <SVGPolygonIcon />;
|
||||
export const PointIcon = (): JSX.Element => <SVGPointIcon />;
|
||||
export const PolylineIcon = (): JSX.Element => <SVGPolylineIcon />;
|
||||
export const TagIcon = (): JSX.Element => <SVGTagIcon />;
|
||||
export const MergeIcon = (): JSX.Element => <SVGMergeIcon />;
|
||||
export const GroupIcon = (): JSX.Element => <SVGGroupIcon />;
|
||||
export const SplitIcon = (): JSX.Element => <SVGSplitIcon />;
|
||||
export const MainMenuIcon = (): JSX.Element => <SVGMainMenuIcon />;
|
||||
export const SaveIcon = (): JSX.Element => <SVGSaveIcon />;
|
||||
export const UndoIcon = (): JSX.Element => <SVGUndoIcon />;
|
||||
export const RedoIcon = (): JSX.Element => <SVGRedoIcon />;
|
||||
export const PlaycontrolFirstIcon = (): JSX.Element => <SVGPlaycontrolFirstIcon />;
|
||||
export const PlaycontrolBackJumpIcon = (): JSX.Element => <SVGPlaycontrolBackJumpIcon />;
|
||||
export const PlaycontrolPreviousIcon = (): JSX.Element => <SVGPlaycontrolPreviousIcon />;
|
||||
export const PlaycontrolPlayIcon = (): JSX.Element => <SVGPlaycontrolPlayIcon />;
|
||||
export const PlaycontrolNextIcon = (): JSX.Element => <SVGPlaycontrolNextIcon />;
|
||||
export const PlaycontrolForwardJumpIcon = (): JSX.Element => <SVGPlaycontrolForwardJumpIcon />;
|
||||
export const PlaycontrolLastIcon = (): JSX.Element => <SVGPlaycontrolLastIcon />;
|
||||
export const InfoIcon = (): JSX.Element => <SVGInfoIcon />;
|
||||
export const FullscreenIcon = (): JSX.Element => <SVGFullscreenIcon />;
|
||||
@@ -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);
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.ant-menu.cvat-header-menu > li.ant-menu-submenu {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
|
||||
.ant-menu.cvat-header-menu > li > div {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": [
|
||||
"./index.d.ts",
|
||||
"src/index.tsx"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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: [
|
||||
|
||||
Reference in New Issue
Block a user