style for message and switching between progress and message

Author: phated

plugins/overlays/download.js

@@ -13,18 +13,6 @@ const { disableAuto, reloadDevices, updateSelected } = require('../../src/action
 
 const styles = require('./styles');
 
-function componentizeUserMessage(message){
-  let messageBox;
-  if(message) {
-    messageBox = <div style={styles.overlayUserMessage}>{message}</div>;
-  }
-  else {
-    messageBox = null;
-  }
-
-  return messageBox;
-}
-
 class DownloadOverlay extends React.Component {
 
   constructor(){
@@ -49,12 +37,22 @@ class DownloadOverlay extends React.Component {
     const { devices, devicePath, message, progress, searching } = this.props;
 
     const deviceRows = _.map(devices, (device) => this.componentizeDevice(device, devicePath));
-    const userMessage = componentizeUserMessage(message);
+
+    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}>
@@ -74,20 +72,17 @@ class DownloadOverlay extends React.Component {
             </div>
           </Loader>
         </div>
-        <div>
-        </div>
-
-        {userMessage}
-
-        <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._onCancel}>Cancel</Button>
           </div>
         </div>
-        <Progress percent={progress} />
+        <div style={styles.bottomBar}>
+          {bottomBar}
+        </div>
       </Card>
     );
   }

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
   },
@@ -37,21 +43,21 @@ const styles = {
     marginTop: 20
   },
   overlayUserMessage: {
-    display: 'flex',
-    margin: '20px',
     color: '#911',
     backgroundColor: '#fcdede',
-    border: '1px solid #d2b2b2',
-    borderRadius: '3px',
-    padding: '10px'
+    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%',

src/stores/device.js

@@ -75,7 +75,8 @@ class DeviceStore {
 
     this.setState({
       devicePath: device.path,
-      selectedDevice: device
+      selectedDevice: device,
+      message: null
     });
 
     this._download();