Add a bunch more shortcuts, closes elastic#193

public/components/fullscreen_control/fullscreen_control.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { createListener, canFullscreen } from '../../lib/fullscreen.js';
+import { Shortcuts } from 'react-shortcuts';
+
 
 // TODO: this is a class because this has to use ref, and it seemed best to allow
 // multile instances of this component... can we use ref with SFCs?
@@ -28,8 +30,16 @@ export class FullscreenControl extends React.PureComponent {
   render() {
     const { isActive, children, isFullscreen, onFullscreen } = this.props;
     if (!isActive) return null;
+
+    const keyHandler = (action) => {
+      if (action === 'FULLSCREEN') onFullscreen();
+    };
+
     return (
       <span ref={node => this.node = node}>
+        {!isFullscreen &&
+          <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global/>
+        }
         {children({ isFullscreen, onFullscreen })}
       </span>
     );

public/components/workpad/index.js

@@ -1,7 +1,9 @@
 import { connect } from 'react-redux';
 import { get } from 'lodash';
 import { undoHistory, redoHistory } from '../../state/actions/history';
+import { fetchAllRenderables } from '../../state/actions/elements';
 import { getElements, getPageById, getSelectedPage, getWorkpad } from '../../state/selectors/workpad';
+import { getFullscreen, getEditing } from '../../state/selectors/app';
 import { nextPage, previousPage } from '../../state/actions/pages';
 import { Workpad as Component } from './workpad';
 
@@ -10,6 +12,8 @@ const mapStateToProps = (state) => {
     elements: getElements(state),
     style: get(getPageById(state, getSelectedPage(state)), 'style'),
     workpad: getWorkpad(state),
+    isFullscreen: getFullscreen(state),
+    isEditing: getEditing(state),
   };
 };
 
@@ -18,6 +22,7 @@ const mapDispatchToProps = {
   redoHistory,
   nextPage,
   previousPage,
+  fetchAllRenderables,
 };
 
 export const Workpad = connect(mapStateToProps, mapDispatchToProps)(Component);

public/components/workpad/workpad.js

@@ -6,24 +6,24 @@ import { Fullscreen } from '../fullscreen';
 import './workpad.less';
 
 export const Workpad = (props) => {
-  const { elements, style, workpad, undoHistory, redoHistory, nextPage, previousPage } = props;
+  const { elements, style, workpad, fetchAllRenderables, undoHistory, redoHistory, nextPage, previousPage, isFullscreen } = props;
   const { height, width } = workpad;
   const itsTheNewStyle = Object.assign({}, style, { height, width });
 
-  const workpadHandler = (action) => {
+  const keyHandler = (action) => {
+    if (action === 'REFRESH') return fetchAllRenderables();
     if (action === 'UNDO') return undoHistory();
     if (action === 'REDO') return redoHistory();
-  };
-
-  const presentationHandler = isFullscreen => (action) => {
-    if (!isFullscreen) return;
-    if (action === 'PREV') return nextPage();
-    if (action === 'NEXT') return previousPage();
+    if (action === 'PREV') return previousPage();
+    if (action === 'NEXT') return nextPage();
   };
 
   return (
-    <Shortcuts name="WORKPAD" handler={workpadHandler} targetNodeSelector="body" global>
       <div className="canvas__checkered" style={{ height, width }}>
+        {!isFullscreen &&
+          <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global/>
+        }
+
         <Fullscreen>
           {({ isFullscreen, windowSize }) => {
             const scale = Math.min(windowSize.height / height, windowSize.width / width);
@@ -34,34 +34,37 @@ export const Workpad = (props) => {
             };
 
             return (
-              <Shortcuts
-                name="PRESENTATION"
-                handler={presentationHandler(isFullscreen)}
-                targetNodeSelector="body"
-              >
                 <div
                   className={`canvas__workpad ${isFullscreen ? 'fullscreen' : ''}`}
                   style={{ ...itsTheNewStyle, ...fsStyle }}
                 >
+                  { isFullscreen &&
+                    <Shortcuts
+                      name="PRESENTATION"
+                      handler={keyHandler}
+                      targetNodeSelector="body"
+                    />
+                  }
+
                   { elements.map(element => (
                     <ElementWrapper key={element.id} element={element} />
                   ))}
                 </div>
-              </Shortcuts>
             );
           }}
         </Fullscreen>
       </div>
-    </Shortcuts>
   );
 };
 
 Workpad.propTypes = {
   elements: PropTypes.array.isRequired,
+  isFullscreen: PropTypes.bool.isRequired,
   workpad: PropTypes.object.isRequired,
   undoHistory: PropTypes.func.isRequired,
   redoHistory: PropTypes.func.isRequired,
   nextPage: PropTypes.func.isRequired,
   previousPage: PropTypes.func.isRequired,
+  fetchAllRenderables: PropTypes.func.isRequired,
   style: PropTypes.object,
 };

public/components/workpad_header/workpad_header.js

@@ -2,16 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Toggle } from '../toggle';
 import { FullscreenControl } from '../fullscreen_control';
-
+import { Shortcuts } from 'react-shortcuts';
 import './workpad_header.less';
+
 const btnClass = 'canvas__workpad_header--button';
 
 export const WorkpadHeader = ({ workpadName, editing, inFlight, toggleEditing }) => {
+  const keyHandler = (action) => {
+    if (action === 'EDITING') toggleEditing();
+  };
+
   return (
     <div className="canvas__workpad_header">
       <h2>
         { workpadName }
-        <span className={`canvas__workpad_header--editToggle ${btnClass}`}>
+        <span className={`canvas__workpad_header--editToggle ${btnClass} ${inFlight && 'canvas__in_flight'}`}>
+          <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global/>
           <Toggle value={editing} onChange={toggleEditing} />
         </span>
         <FullscreenControl>
@@ -21,11 +27,6 @@ export const WorkpadHeader = ({ workpadName, editing, inFlight, toggleEditing })
             </span>
           )}
         </FullscreenControl>
-        { inFlight && (
-          <span className={btnClass}>
-            <i className="fa fa-spinner fa-pulse" />
-          </span>
-        ) }
       </h2>
     </div>
   );

public/components/workpad_header/workpad_header.less

@@ -16,3 +16,27 @@
 .canvas__workpad_header--settings {
 
 }
+
+.canvas__in_flight {
+  -webkit-animation: inFlight 3s 1s linear infinite;
+  animation: inFlight 3s linear 1s infinite;
+}
+
+
+@-webkit-keyframes inFlight {
+  0%   { color: #0779A1; }
+  20%  { color: #93C83D; }
+  40%  { color: #24BBB1; }
+  60%  { color: #17A8E0; }
+  80%  { color: #EF5098; }
+  100% { color: #0779A1; }
+}
+
+@keyframes inFlight {
+  0%   { color: #0779A1; }
+  20%  { color: #93C83D; }
+  40%  { color: #24BBB1; }
+  60%  { color: #17A8E0; }
+  80%  { color: #EF5098; }
+  100% { color: #0779A1; }
+}

public/lib/keymap.js

@@ -1,26 +1,19 @@
-const undoCombo = 'ctrl+z';
-const redoCombo = 'ctrl+shift+y';
-
 export const keymap = {
-  WORKPAD: {
-    UNDO: {
-      osx: 'meta+z',
-      windows: undoCombo,
-      linux: undoCombo,
-      other: undoCombo,
-    },
-    REDO: {
-      osx: 'meta+shift+z',
-      windows: redoCombo,
-      linux: redoCombo,
-      other: redoCombo,
-    },
+  EDITOR: {
+    UNDO: 'ctrl+z',
+    REDO: 'ctrl+shift+y',
+    NEXT: 'alt+right',
+    PREV: 'alt+left',
+    FULLSCREEN: ['alt+p', 'alt+f'],
+    EDITING: ['alt+e'],
+    REFRESH: 'alt+r',
   },
   ELEMENT: {
     DELETE: 'del',
   },
   PRESENTATION: {
     NEXT: ['space', 'right'],
     PREV: 'left',
+    REFRESH: 'alt+r',
   },
 };