From 8cf313f6f965a247ece98f5f3fa98ebd96001267 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 29 Nov 2016 19:18:11 -0500 Subject: [PATCH] fix #204, making sure focus/form is reset properly --- client/modules/IDE/actions/files.js | 15 ++-- .../modules/IDE/components/FileUploader.jsx | 7 +- client/modules/IDE/components/NewFileForm.jsx | 16 ++-- .../modules/IDE/components/NewFileModal.jsx | 74 ++++++++++++------- .../modules/IDE/components/NewFolderForm.jsx | 11 ++- .../modules/IDE/components/NewFolderModal.jsx | 32 ++++---- client/styles/components/_modal.scss | 8 +- client/styles/components/_preferences.scss | 2 +- 8 files changed, 100 insertions(+), 65 deletions(-) diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index 1108a2b6..6ded6a7b 100644 --- a/client/modules/IDE/actions/files.js +++ b/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)); } }; diff --git a/client/modules/IDE/components/FileUploader.jsx b/client/modules/IDE/components/FileUploader.jsx index 81a25230..9c315a7c 100644 --- a/client/modules/IDE/components/FileUploader.jsx +++ b/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, diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx index 3e0c6059..c3b64c50 100644 --- a/client/modules/IDE/components/NewFileForm.jsx +++ b/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 ( -
+ { + this.props.focusOnModal(); + handleSubmit(this.createFile)(data); + }} + > @@ -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; diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx index e01d084c..084788a8 100644 --- a/client/modules/IDE/components/NewFileModal.jsx +++ b/client/modules/IDE/components/NewFileModal.jsx @@ -10,35 +10,53 @@ 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) { - const modalClass = classNames({ - modal: true, - 'modal--reduced': !props.canUploadMedia - }); - return ( -
-
-
-

Add File

- +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': !this.props.canUploadMedia + }); + return ( +
+
+
+

Add File

+ +
+ + {(() => { + if (this.props.canUploadMedia) { + return ( +
+

OR

+ +
+ ); + } + return ''; + })()}
- - {(() => { - if (props.canUploadMedia) { - return ( -
-

OR

- -
- ); - } - return ''; - })()} -
-
- ); + + ); + } } NewFileModal.propTypes = { diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx index 0678d971..09cdd4aa 100644 --- a/client/modules/IDE/components/NewFolderForm.jsx +++ b/client/modules/IDE/components/NewFolderForm.jsx @@ -14,7 +14,13 @@ class NewFolderForm extends React.Component { render() { const { fields: { name }, handleSubmit } = this.props; return ( - + { + handleSubmit(this.createFolder)(data); + this.props.closeModal(); + }} + > -
-
-

Add Folder

- +class NewFolderModal extends React.Component { + componentDidMount() { + this.refs.modal.focus(); + } + + render() { + return ( +
+
+
+

Add Folder

+ +
+
- -
- - ); + + ); + } } NewFolderModal.propTypes = { diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss index 187426fb..c01d167e 100644 --- a/client/styles/components/_modal.scss +++ b/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; } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 55c6ee6a..4a2e3136 100644 --- a/client/styles/components/_preferences.scss +++ b/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;