toggling menu (#258)

* toggling menu

* Other components should be treated equally

client/modules/IDE/components/Editor.jsx

@@ -177,6 +177,15 @@ class Editor extends React.Component {
     }
   }
 
+  toggleEditorOptions() {
+    if (this.props.editorOptionsVisible) {
+      this.props.closeEditorOptions();
+    } else {
+      this.refs.optionsButton.focus();
+      this.props.showEditorOptions();
+    }
+  }
+
   _cm: CodeMirror.Editor
 
   render() {
@@ -222,8 +231,7 @@ class Editor extends React.Component {
             tabIndex="0"
             ref="optionsButton"
             onClick={() => {
-              this.refs.optionsButton.focus();
+              this.toggleEditorOptions();
-              this.props.showEditorOptions();
             }}
             onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
           >

client/modules/IDE/components/FileNode.jsx

@@ -48,6 +48,15 @@ export class FileNode extends React.Component {
     }
   }
 
+  toggleFileOptions() {
+    if (this.props.isOptionsOpen) {
+      this.props.hideFileOptions(this.props.id);
+    } else {
+      this.refs[`fileOptions-${this.props.id}`].focus();
+      this.props.showFileOptions(this.props.id);
+    }
+  }
+
   renderChild(childId) {
     return (
       <li key={childId}>
@@ -120,8 +129,7 @@ export class FileNode extends React.Component {
                   ref={`fileOptions-${this.props.id}`}
                   tabIndex="0"
                   onClick={() => {
-                    this.refs[`fileOptions-${this.props.id}`].focus();
+                    this.toggleFileOptions();
-                    this.props.showFileOptions(this.props.id);
                   }}
                 >
                   <InlineSVG src={downArrowUrl} />

client/modules/IDE/components/Sidebar.jsx

@@ -16,6 +16,15 @@ class Sidebar extends React.Component {
     this.props.setSelectedFile(this.props.files[1].id);
   }
 
+  toggleProjectOptions() {
+    if (this.props.projectOptionsVisible) {
+      this.props.closeProjectOptions();
+    } else {
+      this.refs.sidebarOptions.focus();
+      this.props.openProjectOptions();
+    }
+  }
+
   render() {
     const sidebarClass = classNames({
       sidebar: true,
@@ -39,8 +48,7 @@ class Sidebar extends React.Component {
               tabIndex="0"
               ref="sidebarOptions"
               onClick={() => {
-                this.refs.sidebarOptions.focus();
+                this.toggleProjectOptions();
-                this.props.openProjectOptions();
               }}
               onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}
             >