fix: disable file input areas while processing

Fixes #24
daisy · Dec 23, 2018 · 802ddf7 · 802ddf7
1 parent 286fbb5
commit 802ddf7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/src/renderer/components/Sidebar.js b/src/renderer/components/Sidebar.js
@@ -6,9 +6,9 @@ import { bindActionCreators } from 'redux';
 import { createMuiTheme, withStyles, MuiThemeProvider } from '@material-ui/core/styles';
 import {
   CircularProgress,
-  Divider, 
-  Drawer, 
-  IconButton, 
+  Divider,
+  Drawer,
+  IconButton,
   List,
   ListItem,
   ListItemIcon,
@@ -43,7 +43,7 @@ const sidebarTheme = createMuiTheme({
 });
 
 const styles = theme => ({
-  
+
   menuButton: {
     marginLeft: 12,
     marginRight: 36,
@@ -103,7 +103,7 @@ class Sidebar extends React.Component {
     open: true,
     fileHover: false,
   };
-  
+
   showOpenEPUBDialog = () => {
     process.platform == 'darwin'
       ? FileDialogHelpers.showEpubFileOrFolderBrowseDialog(this.props.openFile)
@@ -115,7 +115,7 @@ class Sidebar extends React.Component {
     FileDialogHelpers.showExportReportDialog(this.props.exportReport);
     return false;
   }
-  
+
   onDragOver = e => {
     e.stopPropagation();
     e.preventDefault();
@@ -164,6 +164,7 @@ class Sidebar extends React.Component {
           <Divider />
           <List className={classes.primaryActions}>
             <ListItem button
+              disabled={processing.ace}
               onClick={this.showOpenEPUBDialog}
               onDrop={this.onDrop}
               onDragOver={this.onDragOver}
@@ -176,7 +177,7 @@ class Sidebar extends React.Component {
               {processing.ace && reportPath &&
                 <CircularProgress size={40} className={classes.buttonProcessing} />}
             </ListItem>
-            <ListItem button 
+            <ListItem button
               onClick={() => openFile(inputPath)}
               disabled={!inputPath}>
               <ListItemIcon>
@@ -228,4 +229,3 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles,{ withTheme: true })(Sidebar));
-
diff --git a/src/renderer/components/Splash.js b/src/renderer/components/Splash.js
@@ -69,10 +69,11 @@ class Splash extends React.Component {
 
   render() {
     let {classes, processing} = this.props;
-
+    let disabled = processing ? 'disabled' : '';
     return (
         <div className={`splash
-            ${this.state.fileHover ? 'hover' : ''}`}
+            ${this.state.fileHover ? 'hover' : ''}
+            ${processing ? 'processing' : ''}`}
           onDrop={this.onDrop}
           onDragOver={this.onDragOver}
           onDragLeave={this.onDragLeave}
@@ -83,16 +84,21 @@ class Splash extends React.Component {
             <img src={`${AceLogo}`} alt="" width="150" height="150"/>
             {processing && <CircularProgress size={178} className={classes.buttonProcessing}/>}
           </div>
+          {!processing &&
           <p>Drop an EPUB file or directory here,<br/>
             or on the&nbsp;
               <AddCircleOutlineIcon titleAccess="“New”" fontSize='inherit' style={{position: 'relative', bottom: '-0.15em'}}/>
               &nbsp;button in the sidebar, <br/>
-              or {process.platform == 'darwin'
-                ?<span><a href="#" onClick={this.onBrowseFileOrFolderClick}>click to browse.</a></span>
-                :<span>browse for a <a href="#" onClick={this.onBrowseFileClick}>file</a> or
-                       a <a href="#" onClick={this.onBrowseFolderClick}>folder</a>.</span>
-}
+              or
+              {process.platform == 'darwin'
+                ? <span> <a href="#"onClick={this.onBrowseFileOrFolderClick}>click to browse.</a></span>
+                : <span> browse for
+                a <a href="#" onClick={this.onBrowseFileClick}>file</a> or
+                a <a href="#" onClick={this.onBrowseFolderClick}>folder</a>.
+                </span>
+              }
           </p>
+        }
         </div>
     );
   }

diff --git a/src/renderer/styles/Splash.scss b/src/renderer/styles/Splash.scss
@@ -43,4 +43,9 @@
   border: 5px dashed rgba(0, 0, 0, 0.1);
   border-radius: 50px;
   transition: border-color 0.5s ease;
-}
+}
+
+.splash.processing {
+  background-color: rgba(128, 128, 128, .4) !important;
+  pointer-events: none;
+}