Style Description Page and Finish Shortcuts

zooniverse · Nov 28, 2017 · baf8581 · baf8581
1 parent fdb6547
commit baf8581
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/src/components/KeyboardShortcuts.jsx b/src/components/KeyboardShortcuts.jsx
@@ -2,29 +2,25 @@ import React from 'react';
 
 const KeyboardShortcuts = () => {
   return (
-    <div className="login-button">
+    <div className="keyboard-shortcuts">
       <h2>Keyboard Shortcuts</h2>
       <table>
         <tr>
           <th>When Annotating</th>
         </tr>
         <tr>
-          <th>Command</th>
-          <th>Description</th>
-        </tr>
-        <tr>
-          <td>M</td>
+          <td>Ctrl + M</td>
           <td>Toggle Previous Marks</td>
         </tr>
         <tr>
-          <td>Space</td>
+          <td>Ctrl + N</td>
           <td>Toggle Navigate and Annotate</td>
         </tr>
         <tr>
           <th>When Transcribing</th>
         </tr>
         <tr>
-          <td>Shift + Enter</td>
+          <td>Ctrl + Enter</td>
           <td>Submit Classifications</td>
         </tr>
         <tr>

diff --git a/src/containers/ClassifierContainer.jsx b/src/containers/ClassifierContainer.jsx
@@ -18,6 +18,7 @@ import { toggleFavorite } from '../ducks/subject';
 import { toggleDialog } from '../ducks/dialog';
 import { VARIANT_TYPES, toggleOverride } from '../ducks/splits';
 import { saveClassificationInProgress } from '../ducks/classifications';
+import { Utility, KEY_CODES } from '../lib/Utility';
 
 import SubjectViewer from './SubjectViewer';
 
@@ -54,6 +55,7 @@ class ClassifierContainer extends React.Component {
     this.toggleAdminOverride = this.toggleAdminOverride.bind(this);
     this.toggleFieldGuide = this.toggleFieldGuide.bind(this);
     this.saveCurrentClassification = this.saveCurrentClassification.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
 
     this.state = {
       popup: null,
@@ -64,6 +66,7 @@ class ClassifierContainer extends React.Component {
   //----------------------------------------------------------------
   componentDidMount() {
     this.props.dispatch(fetchGuide());
+    document.addEventListener('keyup', this.handleKeyUp);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -86,6 +89,7 @@ class ClassifierContainer extends React.Component {
 
   componentWillUnmount() {
     Split.clear();
+    document.removeEventListener('keyup', this.handleKeyUp);
     this.context.googleLogger && this.context.googleLogger.forget(['subjectID']);
   }
 
@@ -283,6 +287,19 @@ class ClassifierContainer extends React.Component {
     this.setState({ popup: null });
   }
 
+  handleKeyUp(e) {
+    if (Utility.getKeyCode(e) === KEY_CODES.N && e.ctrlKey) {
+      if (this.props.viewerState === SUBJECTVIEWER_STATE.NAVIGATING && !this.props.selectedAnnotation) {
+        this.props.dispatch(setViewerState(SUBJECTVIEWER_STATE.ANNOTATING));
+      } else {
+        this.props.dispatch(setViewerState(SUBJECTVIEWER_STATE.NAVIGATING));
+      }
+    }
+    if (Utility.getKeyCode(e) === KEY_CODES.M && e.ctrlKey) {
+      this.togglePreviousMarks();
+    }
+  }
+
   //----------------------------------------------------------------
 
   useAnnotationTool() {

diff --git a/src/styles/components/keyboard-shortcuts.styl b/src/styles/components/keyboard-shortcuts.styl
@@ -0,0 +1,19 @@
+@import "font-groups.styl"
+
+.keyboard-shortcuts
+  font-family: $playfair-display
+  font-size: 0.8em
+
+  h2
+    margin: 0
+
+  table
+    border-collapse: collapse
+    width: 100%
+
+  td
+    padding: 0.25em 0
+
+  th
+    display: inline-block
+    margin: 1em 0 0.5em 0