Merge pull request #173 from parallaxinc/automaticDownload

Automatic download

Author: phated

package.json

@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "alt": "^0.16.7",
-    "bs2-serial": "^0.8.0",
+    "bs2-serial": "^0.9.0",
     "codemirror": "^4.13.0",
     "frylord": "^0.6.0",
     "holovisor": "^0.2.0",
     "iggins": "^0.2.1",
-    "irken": "^0.6.1",
+    "irken": "^0.7.0",
     "lodash": "^3.9.1",
     "react": "^0.13.1",
     "react-loader": "^1.2.0",

plugins/editor/key-extension.js

@@ -8,11 +8,20 @@ const { dedent, indent } = require('../../src/actions/text-move');
 const { print } = require('../../src/actions/system');
 const { newFile, saveFile } = require('../../src/actions/file');
 const { hideOverlays, showSave, showDownload, showProjects } = require('../../src/actions/overlay');
+const { disableAuto, enableAuto } = require('../../src/actions/device');
 
 const keyExtension = {
   setup: function(app) {
 
     const cmCommands = {
+      download: {
+        code: ['F9', 'CTRL_R'],
+        exec: (evt) => {
+          evt.preventDefault();
+          enableAuto();
+          showDownload();
+        }
+      },
       findNext: {
         code: 'F3',
         exec: (evt) => {
@@ -31,6 +40,7 @@ const keyExtension = {
         code: ['F6', 'CTRL_I'],
         exec: (evt) => {
           evt.preventDefault();
+          disableAuto();
           showDownload();
         }
       },

plugins/overlays/download.js

@@ -9,25 +9,23 @@ const { createContainer } = require('sovereign');
 
 const Progress = require('./progress');
 const deviceStore = require('../../src/stores/device');
-const { download, reloadDevices, updateSelected } = require('../../src/actions/device');
+const { disableAuto, reloadDevices, updateSelected } = require('../../src/actions/device');
 
 const styles = require('./styles');
 
 class DownloadOverlay extends React.Component {
 
   constructor(){
 
-    this._onAccept = this._onAccept.bind(this);
     this._onCancel = this._onCancel.bind(this);
     this._onReloadDevices = this._onReloadDevices.bind(this);
-    this._onUpdateSelected = this._onUpdateSelected.bind(this);
 
   }
 
   componentizeDevice(device, selectedPath){
     const highlight = device.path === selectedPath ? 'active' : 'inactive';
     return (
-      <tr style={styles[highlight]} onClick={this._onUpdateSelected.bind(this, device)}>
+      <tr style={styles[highlight]} onClick={updateSelected.bind(this, device)}>
         <td style={styles.deviceTd}>{device.name}</td>
         <td style={styles.deviceTd}>{device.version}</td>
         <td style={styles.deviceTd}>{device.path}</td>
@@ -36,14 +34,25 @@ class DownloadOverlay extends React.Component {
   }
 
   render(){
-    const { devices, devicePath, progress, searching } = this.props;
+    const { devices, devicePath, message, progress, searching } = this.props;
 
     const deviceRows = _.map(devices, (device) => this.componentizeDevice(device, devicePath));
 
+    let bottomBar;
+    if(message){
+      bottomBar = (
+        <div style={styles.overlayUserMessage}>{message}</div>
+      );
+    } else {
+      bottomBar = (
+        <Progress percent={progress} />
+      );
+    }
+
     return (
-      <Card styles={[styles.overlay, styles.overlayLarge]}>
-        <h3 style={styles.overlayTitle}>Please choose your connected device.</h3>
-        <div>
+      <Card styles={[styles.overlay, styles.overlayLarge, styles.overlayUnpad]}>
+        <h3 styles={[styles.overlayTitle, styles.overlayPad]}>Please choose your connected device.</h3>
+        <div style={styles.overlayPad}>
           <Loader loaded={!searching}>
             <div style={styles.deviceTableWrapper}>
               <div style={styles.deviceTableScroll}>
@@ -63,28 +72,21 @@ class DownloadOverlay extends React.Component {
             </div>
           </Loader>
         </div>
-        <div>
-        </div>
-        <div style={styles.overlayDevicesBottom}>
+        <div styles={[styles.overlayDevicesBottom, styles.overlayPad]}>
           <div style={styles.overlayLoadingContainer}>
             <Button onClick={this._onReloadDevices}>Refresh</Button>
           </div>
           <div style={styles.overlayButtonContainer}>
-            <Button onClick={this._onAccept}>Download</Button>
             <Button onClick={this._onCancel}>Cancel</Button>
           </div>
         </div>
-        <Progress percent={progress} />
+        <div style={styles.bottomBar}>
+          {bottomBar}
+        </div>
       </Card>
     );
   }
 
-  _onAccept(){
-    const { handleSuccess, handleError, handleComplete } = this.props;
-
-    download(handleSuccess, handleError, handleComplete);
-  }
-
   _onCancel(evt){
     const { onCancel } = this.props;
 
@@ -97,9 +99,6 @@ class DownloadOverlay extends React.Component {
     reloadDevices(this.props);
   }
 
-  _onUpdateSelected(device){
-    updateSelected(device);
-  }
 }
 
 module.exports = createContainer(DownloadOverlay, {

plugins/overlays/styles.js

@@ -18,6 +18,12 @@ const styles = {
   overlayLarge: StyleSheet.create({
     height: 400
   }),
+  overlayUnpad: {
+    padding: '16px 0 0'
+  },
+  overlayPad: {
+    padding: '0 16px'
+  },
   overlayTitle: {
     margin: 0
   },
@@ -36,13 +42,22 @@ const styles = {
     display: 'flex',
     marginTop: 20
   },
+  overlayUserMessage: {
+    color: '#911',
+    backgroundColor: '#fcdede',
+    padding: '10px 16px',
+    textAlign: 'center',
+    width: '100%'
+  },
+  bottomBar: {
+    height: '39px',
+    display: 'flex'
+  },
   progressContainerStyle: {
     width: '100%',
     height: '8px',
     backgroundColor: '#b0d0ef',
-    position: 'absolute',
-    bottom: 0,
-    left: 0
+    marginTop: 'auto'
   },
   progressBarStyle: {
     height: '100%',

plugins/sidebar/file-operations.js

@@ -5,9 +5,15 @@ const { Menu, MainButton, ChildButton } = require('react-mfb-iceddev');
 
 const { newFile, saveFile } = require('../../src/actions/file');
 const { showDelete, showDownload } = require('../../src/actions/overlay');
+const { enableAuto } = require('../../src/actions/device');
 
 require('react-mfb-iceddev/mfb.css');
 
+function download(){
+  enableAuto();
+  showDownload();
+}
+
 const FileOperations = React.createClass({
   render: function(){
 
@@ -17,7 +23,7 @@ const FileOperations = React.createClass({
           iconResting="ion-plus-round"
           iconActive="ion-close-round" />
         <ChildButton
-          onClick={showDownload}
+          onClick={download}
           icon="ion-code-download"
           label="Download" />
         <ChildButton

src/actions/device.js

@@ -3,14 +3,19 @@
 const alt = require('../alt');
 
 class DeviceActions {
-  download(handleSuccess, handleError, handleComplete) {
-    this.dispatch({ handleSuccess, handleError, handleComplete });
-  }
 
   reloadDevices() {
     this.dispatch();
   }
 
+  disableAuto() {
+    this.dispatch();
+  }
+
+  enableAuto(){
+    this.dispatch();
+  }
+
   updateSelected(device) {
     this.dispatch(device);
   }