fix #89, fix closed sidebar on Safari

client/modules/IDE/components/Editor.js

@@ -144,7 +144,11 @@ class Editor extends React.Component {
       >
         <button
           className="editor__options-button"
-          onClick={this.props.showEditorOptions}
+          tabIndex="0"
+          onClick={(e) => {
+            e.target.focus();
+            this.props.showEditorOptions();
+          }}
           onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
         >
           <InlineSVG src={downArrowUrl} />

client/modules/IDE/components/FileNode.js

@@ -117,7 +117,10 @@ export class FileNode extends React.Component {
                 <button
                   className="sidebar__file-item-show-options"
                   aria-label="view file options"
-                  onClick={() => this.props.showFileOptions(this.props.id)}
+                  onClick={(e) => {
+                    e.target.focus();
+                    this.props.showFileOptions(this.props.id);
+                  }}
                 >
                   <InlineSVG src={downArrowUrl} />
                 </button>

client/modules/IDE/components/Sidebar.js

@@ -38,7 +38,10 @@ class Sidebar extends React.Component {
             <button
               aria-label="add file or folder"
               className="sidebar__add"
-              onClick={this.props.openProjectOptions}
+              onClick={(e) => {
+                e.target.focus();
+                this.props.openProjectOptions();
+              }}
               onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}
             >
               <InlineSVG src={downArrowUrl} />

client/modules/IDE/pages/IDEView.js

@@ -50,7 +50,7 @@ class IDEView extends React.Component {
     }
 
     this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
-    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 20;
+    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 25;
     this.forceUpdate();
 
     this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
@@ -63,7 +63,7 @@ class IDEView extends React.Component {
     }
 
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
-      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 200 : 20;
+      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 200 : 25;
     }
 
     if (nextProps.params.project_id && !this.props.params.project_id) {

client/styles/components/_sidebar.scss

@@ -191,6 +191,7 @@
     display: block;
   }
   top: 100%;
+  right: #{-70 / $base-font-size}rem;
   padding: #{8 / $base-font-size}rem;
   width: #{110 / $base-font-size}rem;
 }