[Partial browse mount location] [Layout changes]

electron.js

@@ -1,6 +1,6 @@
 // Modules to control application life and create native browser window
 
-const {app, BrowserWindow, Tray, nativeImage, Menu} = require('electron');
+const {app, BrowserWindow, Tray, nativeImage, Menu, dialog} = require('electron');
 const {ipcMain} = require('electron');
 const Constants = require('./src/constants');
 const path = require('path');
@@ -249,6 +249,20 @@ const standardIPCReply = (event, channel, data, error) => {
   }
 };
 
+ipcMain.on(Constants.IPC_Browse_Directory, (event, data) => {
+  dialog.showOpenDialog(mainWindow, {
+    defaultPath: data.Location,
+    properties: ['openDirectory'],
+    title: data.Title,
+  }, (filePaths) => {
+    if (filePaths && (filePaths.length > 0)) {
+      event.returnValue = filePaths[0];
+    } else {
+      event.returnValue = '';
+    }
+  });
+});
+
 ipcMain.on(Constants.IPC_Check_Dependency_Installed, (event, data) => {
   try {
     const exists = fs.lstatSync(data.File).isFile();

src/components/MountItem/MountItem.css

@@ -1,7 +1,6 @@
 input.Input {
-  display: block;
   margin: 0;
-  padding: 2px;
+  padding: 5px;
   border-radius: var(--border_radius);
   background: rgba(160, 160, 160, 0.1);
   border: none;

src/components/MountItem/MountItem.js

@@ -27,29 +27,44 @@ export default CSSModules((props) => {
   }
 
   let inputColumnSpan;
-  let inputControl = null;
+  let inputControls = null;
   if (props.platform === 'win32') {
     inputColumnSpan = 20;
-    inputControl = <DropDown changed={props.changed}
+    inputControls = <DropDown changed={props.changed}
-                             colSpan={inputColumnSpan}
+                              colSpan={inputColumnSpan}
-                             disabled={!props.allowMount || props.mounted || props.disabled}
+                              disabled={!props.allowMount || props.mounted || props.disabled}
-                             items={props.items}
+                              items={props.items}
-                             row={secondRow}
+                              row={secondRow}
-                             rowSpan={7}
+                              rowSpan={7}
-                             selected={props.items.indexOf(props.location)}/>;
+                              selected={props.items.indexOf(props.location)}/>;
 
   } else {
-    inputColumnSpan = 50;
+    inputColumnSpan = 58;
-    inputControl = (
+    inputControls = [];
-      <RootElem colSpan={inputColumnSpan}
+    let key = 0;
+    inputControls.push((
+      <RootElem colSpan={inputColumnSpan - 8}
+                key={'i' + key++}
                 row={secondRow}
                 rowSpan={7}>
         <input disabled={!props.allowMount || props.mounted || props.disabled}
+               maxLength={4096}
                onChange={props.changed}
+               size={4096}
                styleName={'Input'}
                type={'text'}
                value={props.location}/>
-      </RootElem>);
+      </RootElem>
+    ));
+    inputControls.push((
+      <Button clicked={()=>props.browseClicked(props.title, props.location)}
+              col={inputColumnSpan - 7}
+              colSpan={7}
+              disabled={props.mounted || props.disabled}
+              key={'b' + key++}
+              row={secondRow}
+              rowSpan={7}>...</Button>
+    ));
   }
 
   const buttonDisplay = props.allowMount || props.disabled ?
@@ -101,7 +116,7 @@ export default CSSModules((props) => {
         rowSpan={5}
         text={props.title}
         type={'Heading1'}/>
-      {inputControl}
+      {inputControls}
       {actionsDisplay}
       {autoMountControl}
       {autoRestartControl}

src/constants.js

@@ -21,6 +21,8 @@ exports.PROVIDER_ARG = {
   siaprime: '-sp'
 };
 
+exports.IPC_Browse_Directory = 'browse_directory';
+
 exports.IPC_Check_Dependency_Installed = 'check_dependency_installed';
 exports.IPC_Check_Dependency_Installed_Reply = 'check_dependency_installed';
 

src/containers/MountItems/MountItems.js

@@ -82,6 +82,17 @@ class MountItems extends Component {
     }
   };
 
+  handleBrowseLocation = (storageType, location) => {
+    location = ipcRenderer.sendSync(Constants.IPC_Browse_Directory, {
+      Title: storageType + ' Mount Location',
+      Location: location,
+    });
+    if (location && (location.length > 0)) {
+      console.log(location);
+      //this.handleMountLocationChanged(storageType, location);
+    }
+  };
+
   handleMountLocationChanged = (storageType, value) => {
     if (this.props.platform === 'win32') {
       this.props.changed(storageType, this.state[storageType].DriveLetters[value]);
@@ -287,6 +298,7 @@ class MountItems extends Component {
                    autoMountChanged={(e)=>this.props.autoMountChanged(provider, e)}
                    autoRestart={this.props[providerLower].AutoRestart}
                    autoRestartChanged={(e)=>this.props.autoRestartChanged(provider, e)}
+                   browseClicked={this.handleBrowseLocation}
                    changed={(e) => this.handleMountLocationChanged(provider, e.target.value)}
                    clicked={this.handleMountUnMount}
                    configClicked={()=>this.props.configClicked(provider)}