Merge pull request #65 from bbc/help-box

Help box

Author: jamesdools

package-lock.json

@@ -82,6 +82,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-keyboard-shortcuts": "^1.1.3"
+    "react-keyboard-shortcuts": "^1.1.3",
+    "react-simple-tooltip": "^2.3.3"
   }
 }

package.json

@@ -16,4 +16,5 @@
 .button {
   font-weight: lighter;
   font-size: 0.8em;
+  cursor: pointer;
 }

src/lib/TranscriptEditor/Settings/TimecodeOffset/index.module.css

@@ -1,5 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Tooltip from 'react-simple-tooltip';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQuestionCircle, faMousePointer, faICursor, faUserEdit, faKeyboard, faSave } from '@fortawesome/free-solid-svg-icons';
 
 import {
   Editor,
@@ -423,6 +427,14 @@ class TimedTextEditor extends React.Component {
   }
 
   render() {
+    const helpMessage = <div className={ style.helpMessage }>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faMousePointer } />Double click on a word or timestamp to jump to that point in the video.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faICursor } />Start typing to edit text.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faUserEdit } />You can add and change names of speakers in your transcript.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faKeyboard } />Use keyboard shortcuts for quick control.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faSave } />Save & export to get a copy to your desktop.</span>
+    </div>;
+
     const currentWord = this.getCurrentWord();
     const highlightColour = '#69e3c2';
     const unplayedColor = '#767676';
@@ -457,6 +469,17 @@ class TimedTextEditor extends React.Component {
 
     return (
       <section>
+        <Tooltip
+          className={ style.help }
+          content={ helpMessage }
+          fadeDuration={ 250 }
+          fadeEasing={ 'ease-in' }
+          placement={ 'bottom' }
+          radius={ 5 }>
+          <FontAwesomeIcon className={ style.icon } icon={ faQuestionCircle } />
+          How does this work?
+        </Tooltip>
+
         { this.props.transcriptData !== null ? editor : null }
       </section>
     );

src/lib/TranscriptEditor/TimedTextEditor/index.js

@@ -1,11 +1,13 @@
+@value color-subt-green, color-darkest-grey, color-labs-red from '../colours.module.css';
+
 .DraftEditor-root {
   background: #f9f9f9;
 }
 
 /*
 Giving the editor a oveflow
 https://github.com/facebook/draft-js/issues/528
- */
+*/
 .editor :global(.public-DraftEditor-content) {
   max-height: 75vh;
   overflow: auto;
@@ -21,3 +23,23 @@ https://github.com/facebook/draft-js/issues/528
     margin: 0 auto;
   }
 }
+
+.help {
+  cursor: pointer;
+  float: right;
+  padding-right: 0.5em;
+  padding-left: 11em;
+  margin: 0.5em 0;
+}
+
+.icon {
+  color: color-labs-red;
+  margin-right: 0.5em;
+}
+
+.helpMessage span {
+  display: block;
+  font-size: 0.8em;
+  font-weight: lighter;
+  margin-top: 1em;
+}

src/lib/TranscriptEditor/TimedTextEditor/index.module.css

@@ -1,4 +1,4 @@
-@value color-subt-green, color-darkest-grey from './colours.module.css';
+@value color-subt-green, color-darkest-grey, color-labs-red from './colours.module.css';
 
 /* Desktop size */
 @media (min-width: 768px) {
@@ -47,10 +47,6 @@
     width: 2em;
     height: 2em;
   }
-
-  .cog {
-    font-weight: lighter;
-  }
 }
 
 /* Mobile devices */