UI Enhancements (cvat-ai#985)

* Single import of basic styles
* A little bit redesigned header
* Specified min resolution 1280x768
* Getting a job instance
* Improved handling when task doesn't exist

Author: bsekachev

cvat-ui/src/base.scss

@@ -15,27 +15,3 @@ $danger-icon-color: #FF4136;
 $info-icon-color: #0074D9;
 
 $monospaced-fonts-stack: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
-
-hr {
-    border: none;
-    border-top: 1px solid $border-color-1;
-    height: 1px;
-}
-
-.cvat-text-color {
-    color: $text-color;
-}
-
-.cvat-title {
-    font-weight: 400;
-    font-size: 21px;
-    color: $text-color;
-    padding-top: 5px;
-}
-
-#root {
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    display: grid;
-}

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

@@ -3,12 +3,45 @@ import React from 'react';
 
 import {
     Layout,
+    Spin,
+    Result,
 } from 'antd';
 
 import AnnotationTopBarComponent from './top-bar/top-bar';
 import StandardWorkspaceComponent from './standard-workspace/standard-workspace';
 
-export default function AnnotationPageComponent(): JSX.Element {
+interface Props {
+    jobInstance: any | null | undefined;
+    fetching: boolean;
+    getJob(): void;
+}
+
+export default function AnnotationPageComponent(props: Props): JSX.Element {
+    const {
+        jobInstance,
+        fetching,
+        getJob,
+    } = props;
+
+    if (jobInstance === null) {
+        if (!fetching) {
+            getJob();
+        }
+
+        return <Spin size='large' className='cvat-spinner' />;
+    }
+
+    if (typeof (jobInstance) === 'undefined') {
+        return (
+            <Result
+                className='cvat-not-found'
+                status='404'
+                title='Sorry, but this job was not found'
+                subTitle='Please, be sure information you tried to get exist and you have access'
+            />
+        );
+    }
+
     return (
         <Layout className='cvat-annotation-page'>
             <AnnotationTopBarComponent />

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

@@ -14,46 +14,48 @@
 .cvat-annotation-header-left-group {
     height: 100%;
 
-    > div {
-        padding: 0px;
-        width: 54px;
-        height: 54px;
-        float: left;
-        text-align: center;
+    > div:first-child {
+        filter: invert(0.9);
+        background: $background-color-1;
+        border-radius: 0px;
+        width: 70px;
+    }
+}
 
-        > span {
-            font-size: 10px;
-        }
+.cvat-annotation-header-button {
+    padding: 0px;
+    width: 54px;
+    height: 54px;
+    float: left;
+    text-align: center;
+    user-select: none;
 
-        > i {
-            transform: scale(0.8);
-            padding: 3px;
-        }
+    > span {
+        font-size: 10px;
+    }
 
-        &:hover > i {
-            transform: scale(0.9);
-        }
+    > i {
+        transform: scale(0.8);
+        padding: 3px;
+    }
 
-        &:active > i {
-            transform: scale(0.8);
-        }
+    &:hover > i {
+        transform: scale(0.9);
+    }
 
-        > * {
-            display: block;
-            line-height: 0px;
-        }
+    &:active > i {
+        transform: scale(0.8);
     }
 
-    > div:first-child {
-        filter: invert(0.9);
-        background: $background-color-1;
-        border-radius: 0px;
-        width: 70px;
+    > * {
+        display: block;
+        line-height: 0px;
     }
 }
 
 .cvat-annotation-header-player-group > div {
     height: 54px;
+    line-height: 0px;
 }
 
 .cvat-annotation-header-player-buttons {
@@ -96,14 +98,16 @@
 }
 
 .cvat-annotation-header-filename-wrapper {
-    max-width: 180px;
+    max-width: 300px;
     overflow: hidden;
     text-overflow: ellipsis;
+    user-select: none;
 }
 
 .cvat-annotation-header-frame-selector {
     width: 5em;
-    margin-right: 0.5em;
+    padding-right: 5px;
+    margin-left: 5px;
 }
 
 .cvat-annotation-header-right-group {

cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx

@@ -34,25 +34,25 @@ export default function AnnotationPageComponent(): JSX.Element {
         <Layout.Header className='cvat-annotation-page-header'>
             <Row type='flex' justify='space-between'>
                 <Col className='cvat-annotation-header-left-group'>
-                    <div>
+                    <div className='cvat-annotation-header-button'>
                         <Icon component={MainMenuIcon} />
                         <span>Menu</span>
                     </div>
-                    <div>
+                    <div className='cvat-annotation-header-button'>
                         <Icon component={SaveIcon} />
                         <span>Save</span>
                     </div>
-                    <div>
+                    <div className='cvat-annotation-header-button'>
                         <Icon component={UndoIcon} />
                         <span>Undo</span>
                     </div>
-                    <div>
+                    <div className='cvat-annotation-header-button'>
                         <Icon component={RedoIcon} />
                         <span>Redo</span>
                     </div>
                 </Col>
                 <Col className='cvat-annotation-header-player-group'>
-                    <Row type='flex'>
+                    <Row type='flex' align='middle'>
                         <Col className='cvat-annotation-header-player-buttons'>
                             <Icon component={PlaycontrolFirstIcon} />
                             <Icon component={PlaycontrolBackJumpIcon} />
@@ -68,26 +68,25 @@ export default function AnnotationPageComponent(): JSX.Element {
                                     <Slider className='cvat-annotation-header-player-slider' tipFormatter={null} />
                                 </Col>
                             </Row>
-                            <Row type='flex' justify='space-between'>
+                            <Row type='flex' justify='space-around'>
                                 <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>
+                        <Col>
+                            <Input className='cvat-annotation-header-frame-selector' type='number' />
+                        </Col>
                     </Row>
                 </Col>
                 <Col className='cvat-annotation-header-right-group'>
-                    <div>
+                    <div className='cvat-annotation-header-button'>
                         <Icon component={FullscreenIcon} />
                         <span>Fullscreen</span>
                     </div>
-                    <div>
+                    <div className='cvat-annotation-header-button'>
                         <Icon component={InfoIcon} />
                         <span>Info</span>
                     </div>

cvat-ui/src/components/cvat-app.tsx

@@ -1,5 +1,5 @@
 import 'antd/dist/antd.less';
-import '../base.scss';
+import '../styles.scss';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import {
@@ -262,7 +262,7 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
                                     <Route exact path='/tasks' component={TasksPageContainer} />
                                     <Route exact path='/tasks/create' component={CreateTaskPageContainer} />
                                     <Route exact path='/tasks/:id' component={TaskPageContainer} />
-                                    <Route exact path='/tasks/:id/jobs/:id' component={AnnotationPageContainer} />
+                                    <Route exact path='/tasks/:tid/jobs/:jid' component={AnnotationPageContainer} />
                                     { withModels
                                         && <Route exact path='/models' component={ModelsPageContainer} /> }
                                     { installedAutoAnnotation
@@ -289,7 +289,7 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
         }
 
         return (
-            <Spin size='large' style={{ margin: '25% 50%' }} />
+            <Spin size='large' className='cvat-spinner' />
         );
     }
 }

cvat-ui/src/components/model-runner-modal/model-runner-modal.tsx

@@ -407,7 +407,7 @@ export default class ModelRunnerModalComponent extends React.PureComponent<Props
                     visible
                 >
                     {!modelsInitialized
-                        && <Spin size='large' style={{ margin: '25% 50%' }} />}
+                        && <Spin size='large' className='cvat-spinner' />}
                     {modelsInitialized && this.renderContent()}
                 </Modal>
             )

cvat-ui/src/components/models-page/models-page.tsx

@@ -42,7 +42,7 @@ export default function ModelsPageComponent(props: Props): JSX.Element {
             props.getModels();
         }
         return (
-            <Spin size='large' style={{ margin: '25% 45%' }} />
+            <Spin size='large' className='cvat-spinner' />
         );
     }
 

cvat-ui/src/components/task-page/task-page.tsx

@@ -7,7 +7,7 @@ import {
     Col,
     Row,
     Spin,
-    notification,
+    Result,
 } from 'antd';
 
 import TopBarComponent from './top-bar';
@@ -17,11 +17,11 @@ import ModelRunnerModalContainer from '../../containers/model-runner-dialog/mode
 import { Task } from '../../reducers/interfaces';
 
 interface TaskPageComponentProps {
-    task: Task | null;
+    task: Task | null | undefined;
     fetching: boolean;
     deleteActivity: boolean | null;
     installedGit: boolean;
-    onFetchTask: (tid: number) => void;
+    getTask: () => void;
 }
 
 type Props = TaskPageComponentProps & RouteComponentProps<{id: string}>;
@@ -38,41 +38,33 @@ class TaskPageComponent extends React.PureComponent<Props> {
         if (deleteActivity) {
             history.replace('/tasks');
         }
-
-        if (this.attempts === 2) {
-            notification.warning({
-                message: 'Something wrong with the task. It cannot be fetched from the server',
-            });
-        }
     }
 
     public render(): JSX.Element {
         const {
-            match,
             task,
             fetching,
-            onFetchTask,
+            getTask,
         } = this.props;
-        const { id } = match.params;
-        const fetchTask = !task;
 
-        if (fetchTask) {
+        if (task === null) {
             if (!fetching) {
-                if (!this.attempts) {
-                    this.attempts++;
-                    onFetchTask(+id);
-                } else {
-                    this.attempts++;
-                }
+                getTask();
             }
+
             return (
-                <Spin size='large' style={{ margin: '25% 50%' }} />
+                <Spin size='large' className='cvat-spinner' />
             );
         }
 
         if (typeof (task) === 'undefined') {
             return (
-                <div> </div>
+                <Result
+                    className='cvat-not-found'
+                    status='404'
+                    title='Sorry, but this task was not found'
+                    subTitle='Please, be sure information you tried to get exist and you have access'
+                />
             );
         }
 

cvat-ui/src/components/tasks-page/tasks-page.tsx

@@ -207,7 +207,7 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
 
         if (tasksFetching) {
             return (
-                <Spin size='large' style={{ margin: '25% 45%' }} />
+                <Spin size='large' className='cvat-spinner' />
             );
         }