fix #204, making sure focus/form is reset properly

client/modules/IDE/actions/files.js

@@ -3,6 +3,7 @@ import axios from 'axios';
 import objectID from 'bson-objectid';
 import blobUtil from 'blob-util';
 import { setUnsavedChanges } from './ide';
+import { reset } from 'redux-form';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
@@ -61,9 +62,10 @@ export function createFile(formProps) {
             ...response.data,
             parentId
           });
-          dispatch({
-            type: ActionTypes.HIDE_MODAL
-          });
+          dispatch(reset('new-file'));
+          // dispatch({
+          //   type: ActionTypes.HIDE_MODAL
+          // });
           dispatch(setUnsavedChanges(true));
         })
         .catch(response => dispatch({
@@ -82,9 +84,10 @@ export function createFile(formProps) {
         parentId,
         children: []
       });
-      dispatch({
-        type: ActionTypes.HIDE_MODAL
-      });
+      dispatch(reset('new-file'));
+      // dispatch({
+      //   type: ActionTypes.HIDE_MODAL
+      // });
       dispatch(setUnsavedChanges(true));
     }
   };

client/modules/IDE/components/FileUploader.jsx

@@ -17,13 +17,12 @@ class FileUploader extends React.Component {
       method: 'post',
       autoProcessQueue: true,
       clickable: true,
-      maxFiles: 1,
-      parallelUploads: 1,
+      maxFiles: 6,
+      parallelUploads: 2,
       maxFilesize: 5, // in mb
-      maxThumbnailFilesize: 8, // 3MB
+      maxThumbnailFilesize: 8, // 8 mb
       thumbnailWidth: 200,
       thumbnailHeight: 200,
-      addRemoveLinks: true,
       // TODO what is a good list of MIME types????
       acceptedFiles: `image/*,audio/*,text/javascript,text/html,text/css,
       application/json,application/x-font-ttf,application/x-font-truetype,

client/modules/IDE/components/NewFileForm.jsx

@@ -7,21 +7,22 @@ class NewFileForm extends React.Component {
     this.createFile = this.props.createFile.bind(this);
   }
 
-  componentDidMount() {
-    this.refs.fileName.focus();
-  }
-
   render() {
     const { fields: { name }, handleSubmit } = this.props;
     return (
-      <form className="new-file-form" onSubmit={handleSubmit(this.createFile)}>
+      <form
+        className="new-file-form"
+        onSubmit={(data) => {
+          this.props.focusOnModal();
+          handleSubmit(this.createFile)(data);
+        }}
+      >
         <label className="new-file-form__name-label" htmlFor="name">Name:</label>
         <input
           className="new-file-form__name-input"
           id="name"
           type="text"
           placeholder="Name"
-          ref="fileName"
           {...domOnlyProps(name)}
         />
         <input type="submit" value="Add File" aria-label="add file" />
@@ -36,7 +37,8 @@ NewFileForm.propTypes = {
     name: PropTypes.object.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  createFile: PropTypes.func.isRequired
+  createFile: PropTypes.func.isRequired,
+  focusOnModal: PropTypes.func.isRequired
 };
 
 export default NewFileForm;

client/modules/IDE/components/NewFileModal.jsx

@@ -10,23 +10,40 @@ import FileUploader from './FileUploader';
 // At some point this will probably be generalized to a generic modal
 // in which you can insert different content
 // but for now, let's just make this work
-function NewFileModal(props) {
+class NewFileModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.focusOnModal = this.focusOnModal.bind(this);
+  }
+
+  componentDidMount() {
+    this.focusOnModal();
+  }
+
+  focusOnModal() {
+    this.refs.modal.focus();
+  }
+
+  render() {
     const modalClass = classNames({
       modal: true,
-    'modal--reduced': !props.canUploadMedia
+      'modal--reduced': !this.props.canUploadMedia
     });
     return (
-    <section className={modalClass}>
+      <section className={modalClass} tabIndex="0" ref="modal">
         <div className="modal-content">
           <div className="modal__header">
             <h2 className="modal__title">Add File</h2>
-          <button className="modal__exit-button" onClick={props.closeModal}>
+            <button className="modal__exit-button" onClick={this.props.closeModal}>
               <InlineSVG src={exitUrl} alt="Close New File Modal" />
             </button>
           </div>
-        <NewFileForm {...props} />
+          <NewFileForm
+            focusOnModal={this.focusOnModal}
+            {...this.props}
+          />
           {(() => {
-          if (props.canUploadMedia) {
+            if (this.props.canUploadMedia) {
               return (
                 <div>
                   <p className="modal__divider">OR</p>
@@ -40,6 +57,7 @@ function NewFileModal(props) {
       </section>
     );
   }
+}
 
 NewFileModal.propTypes = {
   closeModal: PropTypes.func.isRequired,

client/modules/IDE/components/NewFolderForm.jsx

@@ -14,7 +14,13 @@ class NewFolderForm extends React.Component {
   render() {
     const { fields: { name }, handleSubmit } = this.props;
     return (
-      <form className="new-folder-form" onSubmit={handleSubmit(this.createFolder)}>
+      <form
+        className="new-folder-form"
+        onSubmit={(data) => {
+          handleSubmit(this.createFolder)(data);
+          this.props.closeModal();
+        }}
+      >
         <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
         <input
           className="new-folder-form__name-input"
@@ -35,7 +41,8 @@ NewFolderForm.propTypes = {
     name: PropTypes.object.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  createFolder: PropTypes.func.isRequired
+  createFolder: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired
 };
 
 export default NewFolderForm;

client/modules/IDE/components/NewFolderModal.jsx

@@ -4,21 +4,27 @@ import InlineSVG from 'react-inlinesvg';
 const exitUrl = require('../../../images/exit.svg');
 import NewFolderForm from './NewFolderForm';
 
-function NewFolderModal(props) {
+class NewFolderModal extends React.Component {
+  componentDidMount() {
+    this.refs.modal.focus();
+  }
+
+  render() {
     return (
-    <section className="modal">
+      <section className="modal" ref="modal" tabIndex="0">
         <div className="modal-content-folder">
           <div className="modal__header">
             <h2 className="modal__title">Add Folder</h2>
-          <button className="modal__exit-button" onClick={props.closeModal}>
+            <button className="modal__exit-button" onClick={this.props.closeModal}>
               <InlineSVG src={exitUrl} alt="Close New Folder Modal" />
             </button>
           </div>
-        <NewFolderForm {...props} />
+          <NewFolderForm {...this.props} />
         </div>
       </section>
     );
   }
+}
 
 NewFolderModal.propTypes = {
   closeModal: PropTypes.func.isRequired

client/styles/components/_modal.scss

@@ -1,17 +1,17 @@
 .modal {
   position: absolute;
-  top: #{66 / $base-font-size}rem;
+  top: #{60 / $base-font-size}rem;
   right: #{400 / $base-font-size}rem;
   z-index: 100;
 }
 
 .modal-content {
   @extend %modal;
-  height: #{400 / $base-font-size}rem;
+  min-height: #{150 / $base-font-size}rem;
   width: #{400 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
   .modal--reduced & {
-    height: #{150 / $base-font-size}rem;
+    //min-height: #{150 / $base-font-size}rem;
   }
 }
 
@@ -51,7 +51,7 @@
 }
 
 .uploader {
-  height: #{200 / $base-font-size}rem;
+  min-height: #{200 / $base-font-size}rem;
   width: 100%;
   text-align: center;
 }

client/styles/components/_preferences.scss

@@ -1,7 +1,7 @@
 .preferences {
 	@extend %modal;
 	position: absolute;
-	top: #{66 / $base-font-size}rem;
+	top: #{60 / $base-font-size}rem;
 	right: #{40 / $base-font-size}rem;
 	width: #{336 / $base-font-size}rem;
 	display: none;