OS X changes

src/components/MountItem/MountItem.css

@@ -0,0 +1,13 @@
+input.Input {
+  display: block;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(160, 160, 160, 0.1);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+  width: 100%;
+}

src/components/MountItem/MountItem.js

@@ -39,16 +39,17 @@ export default CSSModules((props) => {
                              selected={props.items.indexOf(props.location)}/>;
 
   } else {
-    inputColumnSpan = 60;
+    inputColumnSpan = 50;
     inputControl = (
       <RootElem colSpan={inputColumnSpan}
                 row={secondRow}
                 rowSpan={7}>
         <input disabled={!props.allowMount || props.mounted || props.disabled}
                onChange={props.changed}
+               styleName={'Input'}
                type={'text'}
                value={props.location}/>
-    </RootElem>);
+      </RootElem>);
   }
 
   const buttonDisplay = props.allowMount || props.disabled ?
@@ -61,7 +62,7 @@ export default CSSModules((props) => {
   const actionsDisplay = (
     <Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
             col={inputColumnSpan + 2}
-            colSpan={20}
+            colSpan={21}
             disabled={!props.allowMount || props.disabled}
             row={secondRow}
             rowSpan={7}>
@@ -69,8 +70,8 @@ export default CSSModules((props) => {
     </Button>);
 
   const autoMountControl = (
-    <RootElem col={inputColumnSpan + 23}
-              colSpan={26}
+    <RootElem col={inputColumnSpan + 24}
+              colSpan={28}
               row={secondRow}
               rowSpan={7}>
       <input checked={props.autoMount}
@@ -81,7 +82,7 @@ export default CSSModules((props) => {
   );
 
   const autoRestartControl = (
-    <RootElem col={inputColumnSpan + 23 + 25}
+    <RootElem col={inputColumnSpan + 24 + 28}
               colSpan={24}
               row={secondRow}
               rowSpan={7}>

src/containers/MountItems/MountItems.js

@@ -60,12 +60,12 @@ class MountItems extends Component {
     });
   };
 
-  handleMountLocationChanged = (systemType, value) => {
+  handleMountLocationChanged = (storageType, value) => {
     if (this.props.platform === 'win32') {
-      this.props.changed(systemType, this.state[systemType].DriveLetters[value]);
+      this.props.changed(storageType, this.state[storageType].DriveLetters[value]);
     }
     else {
-      this.props.changed(systemType, value);
+      this.props.changed(storageType, value);
     }
   };
 
@@ -103,57 +103,36 @@ class MountItems extends Component {
 
   onDetectMountsReply = (event, arg) => {
     if (arg.data.Success) {
-      const sia = {
-        ...this.state.Sia,
-        AllowMount: true,
-        DriveLetters: (arg.data.DriveLetters.Sia),
-        Mounted: (arg.data.Locations.Sia.length > 0),
-        PID: arg.data.PIDS.Sia,
-      };
-      const siaPrime = {
-        ...this.state.SiaPrime,
-        AllowMount: true,
-        DriveLetters: (arg.data.DriveLetters.SiaPrime),
-        Mounted: (arg.data.Locations.SiaPrime.length > 0),
-        PID: arg.data.PIDS.SiaPrime,
-      };
-      const hs = {
-        ...this.state.Hyperspace,
-        AllowMount: true,
-        DriveLetters: (arg.data.DriveLetters.Hyperspace),
-        Mounted: (arg.data.Locations.Hyperspace.length > 0),
-        PID: arg.data.PIDS.Hyperspace,
-      };
+      let state = {};
+      let mountsBusy = false;
+      for (const name in this.state) {
+        state[name] = {
+          ...this.state[name],
+          AllowMount: true,
+          DriveLetters: (arg.data.DriveLetters[name]),
+          Mounted: (arg.data.Locations[name].length > 0),
+          PID: arg.data.PIDS[name],
+        };
+        mountsBusy = mountsBusy || state[name].Mounted;
+      }
+      this.props.mountsBusy(mountsBusy);
 
-      this.props.mountsBusy(hs.Mounted || sia.Mounted);
-
-      this.setState({
-        Hyperspace: hs,
-        Sia: sia,
-        SiaPrime: siaPrime,
-      }, () => {
-        let hsLocation = arg.data.Locations.Hyperspace;
-        if ((hsLocation.length === 0) && (this.props.platform === 'win32')) {
-          hsLocation = this.props.hyperspace.MountLocation || arg.data.DriveLetters.Hyperspace[0];
-        }
-        if (hsLocation !== this.props.hyperspace.MountLocation) {
-          this.props.changed('Hyperspace', hsLocation);
-        }
-
-        let siaLocation = arg.data.Locations.Sia;
-        if ((siaLocation.length === 0) && (this.props.platform === 'win32')) {
-          siaLocation = this.props.sia.MountLocation || arg.data.DriveLetters.Sia[0];
-        }
-        if (siaLocation !== this.props.sia.MountLocation) {
-          this.props.changed('Sia', siaLocation);
-        }
-
-        let siaPrimeLocation = arg.data.Locations.SiaPrime;
-        if ((siaPrimeLocation.length === 0) && (this.props.platform === 'win32')) {
-          siaPrimeLocation = this.props.siaprime.MountLocation || arg.data.DriveLetters.SiaPrime[0];
-        }
-        if (siaPrimeLocation !== this.props.siaprime.MountLocation) {
-          this.props.changed('SiaPrime', siaPrimeLocation);
+      this.setState(state, () => {
+        const updateMountLocation = (data, name) => {
+          const nameLower = name.toLowerCase();
+          let location = data.Locations[name];
+          if (location.length === 0) {
+            location = (this.props.platform === 'win32') ?
+              this.props[nameLower].MountLocation || data.DriveLetters[name][0] :
+              this.props[nameLower].MountLocation;
+          }
+          if (location !== this.props[nameLower].MountLocation) {
+            this.props.changed(name, location);
+          }
+        };
+        
+        for (const name in this.state) {
+          updateMountLocation(arg.data, name);
         }
 
         this.performAutoMount();
@@ -177,7 +156,6 @@ class MountItems extends Component {
   };
 
   onUnmountDriveReply = (event, arg) => {
-    console.log(arg);
     if ((this.props.platform === 'win32') && arg && arg.data && !arg.data.Expected && arg.data.Location && this.props[arg.data.StorageType.toLowerCase()].AutoRestart) {
       this.handleMountUnMount(arg.data.StorageType, true, arg.data.Location)
     } else {
@@ -188,75 +166,51 @@ class MountItems extends Component {
   performAutoMount = ()=> {
     if (this.props.processAutoMount) {
       this.props.autoMountProcessed();
-      if (this.props.hyperspace.AutoMount &&
-        !this.state.Hyperspace.Mounted &&
-        (this.props.hyperspace.MountLocation.length > 0)) {
-        this.handleMountUnMount('Hyperspace', true, this.props.hyperspace.MountLocation);
-      }
-      if (this.props.sia.AutoMount &&
-        !this.state.Sia.Mounted &&
-        (this.props.sia.MountLocation.length > 0)) {
-        this.handleMountUnMount('Sia', true, this.props.sia.MountLocation);
-      }
-      if (this.props.allowSiaPrime && this.props.siaprime.AutoMount &&
-        !this.state.SiaPrime.Mounted &&
-        (this.props.siaprime.MountLocation.length > 0)) {
-        this.handleMountUnMount('SiaPrime', true, this.props.siaprime.MountLocation);
+      const processAutoMount = (name) => {
+        const nameLower = name.toLowerCase();
+        if (this.props[nameLower].AutoMount &&
+          !this.state[name].Mounted &&
+          (this.props[nameLower].MountLocation.length > 0)) {
+          this.handleMountUnMount(name, true, this.props[nameLower].MountLocation);
+        }
+      };
+      for (const name in this.state) {
+        processAutoMount(name);
       }
     }
   };
 
   render() {
+    let items = [];
+    for (const name in this.state) {
+      const nameLower = name.toLowerCase();
+      items.push((
+        <MountItem allowConfig={this.props.allowConfig}
+                   allowMount={this.state[name].AllowMount}
+                   autoMount={this.props[nameLower].AutoMount}
+                   autoMountChanged={(e)=>this.props.autoMountChanged(name, e)}
+                   autoRestart={this.props[nameLower].AutoRestart}
+                   autoRestartChanged={(e)=>this.props.autoRestartChanged(name, e)}
+                   changed={(e) => this.handleMountLocationChanged(name, e.target.value)}
+                   clicked={this.handleMountUnMount}
+                   configClicked={()=>this.props.configClicked(name)}
+                   items={this.state[name].DriveLetters}
+                   key={'mi_' + items.length}
+                   location={this.props[nameLower].MountLocation}
+                   mounted={this.state[name].Mounted}
+                   pid={this.state[name].PID}
+                   platform={this.props.platform}
+                   title={name} />
+      ));
+      if (items.length !== this.state.length) {
+        items.push(<div key={'di_' + items.length}
+                        style={{paddingTop: '12px'}} />)
+      }
+    }
+    
     return (
       <div styleName='MountItems'>
-        <MountItem allowConfig={this.props.allowConfig}
-                   allowMount={this.state.Hyperspace.AllowMount}
-                   autoMount={this.props.hyperspace.AutoMount}
-                   autoMountChanged={(e)=>this.props.autoMountChanged('Hyperspace', e)}
-                   autoRestart={this.props.hyperspace.AutoRestart}
-                   autoRestartChanged={(e)=>this.props.autoRestartChanged('Hyperspace', e)}
-                   changed={(e) => this.handleMountLocationChanged('Hyperspace', e.target.value)}
-                   clicked={this.handleMountUnMount}
-                   configClicked={()=>this.props.configClicked('Hyperspace')}
-                   items={this.state.Hyperspace.DriveLetters}
-                   location={this.props.hyperspace.MountLocation}
-                   mounted={this.state.Hyperspace.Mounted}
-                   pid={this.state.Hyperspace.PID}
-                   platform={this.props.platform}
-                   title={'Hyperspace'}/>
-        <div style={{paddingTop: '12px'}}/>
-        <MountItem allowConfig={this.props.allowConfig}
-                   allowMount={this.state.Sia.AllowMount}
-                   autoMount={this.props.sia.AutoMount}
-                   autoMountChanged={(e)=>this.props.autoMountChanged('Sia', e)}
-                   autoRestart={this.props.sia.AutoRestart}
-                   autoRestartChanged={(e)=>this.props.autoRestartChanged('Sia', e)}
-                   changed={(e) => this.handleMountLocationChanged('Sia', e.target.value)}
-                   clicked={this.handleMountUnMount}
-                   configClicked={()=>this.props.configClicked('Sia')}
-                   items={this.state.Sia.DriveLetters}
-                   location={this.props.sia.MountLocation}
-                   mounted={this.state.Sia.Mounted}
-                   pid={this.state.Sia.PID}
-                   platform={this.props.platform}
-                   title={'Sia'}/>
-        <div style={{paddingTop: '12px'}}/>
-        <MountItem allowConfig={this.props.allowConfig}
-                   allowMount={this.state.SiaPrime.AllowMount}
-                   autoMount={this.props.siaprime.AutoMount}
-                   autoMountChanged={(e)=>this.props.autoMountChanged('SiaPrime', e)}
-                   autoRestart={this.props.siaprime.AutoRestart}
-                   autoRestartChanged={(e)=>this.props.autoRestartChanged('SiaPrime', e)}
-                   changed={(e) => this.handleMountLocationChanged('SiaPrime', e.target.value)}
-                   clicked={this.handleMountUnMount}
-                   configClicked={()=>this.props.configClicked('SiaPrime')}
-                   disabled={!this.props.allowSiaPrime}
-                   items={this.state.SiaPrime.DriveLetters}
-                   location={this.props.siaprime.MountLocation}
-                   mounted={this.state.SiaPrime.Mounted}
-                   pid={this.state.SiaPrime.PID}
-                   platform={this.props.platform}
-                   title={'SiaPrime'}/>
+        {items}
       </div>);
   }
 }

src/index.css

@@ -18,7 +18,7 @@
 
 * {
   font-family: 'Nunito', sans-serif;
-  font-size: 3.5vw;
+  font-size: 4.4vmin;
 }
 
 *::-moz-focus-inner {