UI Enhancements (#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
cvat-ai · Dec 19, 2019 · f57586a · f57586a
1 parent 2164167
commit f57586a
Show file tree

Hide file tree

Showing 12 changed files with 225 additions and 105 deletions.
diff --git a/cvat-ui/src/base.scss b/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;
-}
diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/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 />

diff --git a/cvat-ui/src/components/annotation-page/styles.scss b/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 {

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
@@ -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>

diff --git a/cvat-ui/src/components/cvat-app.tsx b/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' />
  );
  }
 }
diff --git a/cvat-ui/src/components/model-runner-modal/model-runner-modal.tsx b/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>
  )

diff --git a/cvat-ui/src/components/models-page/models-page.tsx b/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' />
  );
  }
 

diff --git a/cvat-ui/src/components/task-page/task-page.tsx b/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'
+ />
  );
  }
 

diff --git a/cvat-ui/src/components/tasks-page/tasks-page.tsx b/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' />
  );
  }