add show/hide editor options

client/constants.js

@@ -74,6 +74,8 @@ export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
 
 export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL';
 export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL';
+export const SHOW_EDITOR_OPTIONS = 'SHOW_EDITOR_OPTIONS';
+export const CLOSE_EDITOR_OPTIONS = 'CLOSE_EDITOR_OPTIONS';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/ide.js

@@ -138,3 +138,15 @@ export function closeShareModal() {
     type: ActionTypes.CLOSE_SHARE_MODAL
   };
 }
+
+export function showEditorOptions() {
+  return {
+    type: ActionTypes.SHOW_EDITOR_OPTIONS
+  };
+}
+
+export function closeEditorOptions() {
+  return {
+    type: ActionTypes.CLOSE_EDITOR_OPTIONS
+  };
+}

client/modules/IDE/components/Editor.js

@@ -22,6 +22,9 @@ window.CSSLint = CSSLint;
 import { HTMLHint } from 'htmlhint';
 window.HTMLHint = HTMLHint;
 const beepUrl = require('../../../sounds/audioAlert.mp3');
+import InlineSVG from 'react-inlinesvg';
+const downArrowUrl = require('../../../images/down-arrow.svg');
+import classNames from 'classnames';
 
 import { debounce } from 'throttle-debounce';
 
@@ -120,11 +123,32 @@ class Editor extends React.Component {
   _cm: CodeMirror.Editor
 
   render() {
+    const editorSectionClass = classNames({
+      editor: true,
+      'editor--options': this.props.editorOptionsVisible
+    });
+
     return (
       <section
         title="code editor"
         role="main"
+        className={editorSectionClass}
       >
+        <button
+          className="editor__options-button"
+          onClick={this.props.showEditorOptions}
+          onBlur={this.props.closeEditorOptions}
+        >
+          <InlineSVG src={downArrowUrl} />
+        </button>
+        <ul className="editor__options">
+          <li>
+            <a>Tidy</a>
+          </li>
+          <li>
+            <a>Keyboard Shortcuts</a>
+          </li>
+        </ul>
         <div ref="container" className="editor-holder" tabIndex="0">
         </div>
         <EditorAccessibility
@@ -150,7 +174,10 @@ Editor.propTypes = {
   file: PropTypes.shape({
     name: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired
-  })
+  }),
+  editorOptionsVisible: PropTypes.bool.isRequired,
+  showEditorOptions: PropTypes.func.isRequired,
+  closeEditorOptions: PropTypes.func.isRequired
 };
 
 export default Editor;

client/modules/IDE/pages/IDEView.js

@@ -214,6 +214,9 @@ class IDEView extends React.Component {
                   files={this.props.files}
                   lintMessages={this.props.editorAccessibility.lintMessages}
                   lineNumber={this.props.editorAccessibility.lineNumber}
+                  editorOptionsVisible={this.props.ide.editorOptionsVisible}
+                  showEditorOptions={this.props.showEditorOptions}
+                  closeEditorOptions={this.props.closeEditorOptions}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -338,7 +341,8 @@ IDEView.propTypes = {
     preferencesIsVisible: PropTypes.bool.isRequired,
     projectOptionsVisible: PropTypes.bool.isRequired,
     newFolderModalVisible: PropTypes.bool.isRequired,
-    shareModalVisible: PropTypes.bool.isRequired
+    shareModalVisible: PropTypes.bool.isRequired,
+    editorOptionsVisible: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -412,7 +416,9 @@ IDEView.propTypes = {
   createFolder: PropTypes.func.isRequired,
   createFile: PropTypes.func.isRequired,
   showShareModal: PropTypes.func.isRequired,
-  closeShareModal: PropTypes.func.isRequired
+  closeShareModal: PropTypes.func.isRequired,
+  showEditorOptions: PropTypes.func.isRequired,
+  closeEditorOptions: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -13,7 +13,8 @@ const initialState = {
   preferencesIsVisible: false,
   projectOptionsVisible: false,
   newFolderModalVisible: false,
-  shareModalVisible: false
+  shareModalVisible: false,
+  editorOptionsVisible: false
 };
 
 const ide = (state = initialState, action) => {
@@ -60,6 +61,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { shareModalVisible: true });
     case ActionTypes.CLOSE_SHARE_MODAL:
       return Object.assign({}, state, { shareModalVisible: false });
+    case ActionTypes.SHOW_EDITOR_OPTIONS:
+      return Object.assign({}, state, { editorOptionsVisible: true });
+    case ActionTypes.CLOSE_EDITOR_OPTIONS:
+      return Object.assign({}, state, { editorOptionsVisible: false });
     default:
       return state;
   }

client/styles/components/_editor.scss

@@ -60,3 +60,24 @@
   box-shadow: 0 12px 12px $light-shadow-color;
   font-family: Montserrat, sans-serif;
 }
+
+.editor__options-button {
+  @extend %icon;
+  position: absolute;
+  top: #{5 / $base-font-size}rem;
+  right: #{5 / $base-font-size}rem;
+  z-index: 1;
+}
+
+.editor__options {
+  display: none;
+  @extend %modal;
+  position: absolute;
+  top: #{20 / $base-font-size}rem;
+  right: #{5 / $base-font-size}rem;
+  padding: #{10 / $base-font-size}rem;
+
+  .editor--options & {
+    display: block;
+  }
+}

client/styles/components/_toolbar.scss

@@ -29,6 +29,10 @@
 	}
 }
 
+.toolbar__shortcut-button {
+
+}
+
 .toolbar__logo {
 	margin-right: #{30 / $base-font-size}rem;
 }