Layout changes

electron.js

@@ -21,7 +21,7 @@ let mountedPIDs = [];
 
 function createWindow() {
   // Create the browser window.
-  const height = process.env.ELECTRON_START_URL ? 344 : 324;
+  const height = process.env.ELECTRON_START_URL ? 324 : 304;
   mainWindow = new BrowserWindow({
     width: 425,
     height: height,

src/App.js

@@ -634,7 +634,7 @@ class App extends Component {
       let key = 0;
       mainContent.push((
         <div key={'rvd_' + key++}
-             style={{height: '40%'}}>
+             style={{height: '44%'}}>
           <ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
                                  downloadClicked={this.handleReleaseDownload}
                                  downloadDisabled={!downloadEnabled}
@@ -653,7 +653,7 @@ class App extends Component {
       if (allowMount) {
         mainContent.push((
           <div key={'md_' + key++}
-               style={{height: '60%'}}>
+               style={{height: '56%'}}>
             <MountItems allowConfig={allowConfig}
                         autoMountChanged={this.handleAutoMountChanged}
                         autoMountProcessed={this.notifyAutoMountProcessed}

src/components/MountItem/MountItem.css

@@ -1,7 +0,0 @@
-.MountItem {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-

src/components/MountItem/MountItem.js

@@ -4,70 +4,92 @@ import styles from './MountItem.css';
 import DropDown from '../UI/DropDown/DropDown';
 import Button from '../UI/Button/Button';
 import Loader from 'react-loader-spinner';
+import Text from '../UI/Text/Text';
+import Grid from '../UI/Grid/Grid';
 import configureImage from '../../assets/images/configure.png';
+import RootElem from '../../hoc/RootElem/RootElem';
 
 export default CSSModules((props) => {
   let configButton = null;
+  let secondRow = 6;
   if (props.allowConfig) {
     configButton = (
-      <img alt=''
+      <RootElem colSpan={4}
-        height={'16px'}
+                rowSpan={6}>
-        onClick={props.configClicked}
+        <img alt=''
-        src={configureImage}
+             height={'16px'}
-        style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
+             onClick={props.configClicked}
-        width={'16px'}/>
+             src={configureImage}
+             style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
+             width={'16px'}/>
+      </RootElem>
     );
   }
 
+  let inputColumnSpan;
   let inputControl = null;
-  let mountWidth = '70%';
   if (props.platform === 'win32') {
+    inputColumnSpan = 20;
     inputControl = <DropDown changed={props.changed}
+                             colSpan={inputColumnSpan}
                              disabled={!props.allowMount || props.mounted}
                              items={props.items}
+                             row={secondRow}
+                             rowSpan={7}
                              selected={props.items.indexOf(props.location)}/>;
-    mountWidth = '18%';
+
   } else {
-    inputControl = <input disabled={!props.allowMount || props.mounted}
+    inputColumnSpan = 60;
-                          onChange={props.changed}
+    inputControl = (
-                          type={'text'}
+      <RootElem colSpan={inputColumnSpan}
-                          value={props.location}/>;
+                row={secondRow}
+                rowSpan={7}>
+        <input disabled={!props.allowMount || props.mounted}
+               onChange={props.changed}
+               type={'text'}
+               value={props.location}/>
+    </RootElem>);
   }
 
-  let actionDisplay = null;
+  const buttonDisplay = props.allowMount ?
-  if (props.allowMount) {
+    (props.mounted ? 'Unmount' : 'Mount') :
-    actionDisplay = <Button buttonStyles={{width: '100%'}}
+    <Loader color={'var(--heading_text_color)'}
-                            clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
+            height='19px'
-  } else {
+            type='Circles'
-    actionDisplay = <Loader color={'var(--heading_text_color)'}
+            width='19px'/>;
-                            height='24px'
+
-                            type='Circles'
+  const actionsDisplay = (
-                            width='24px'/>;
+    <Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
-  }
+            col={inputColumnSpan + 2}
+            colSpan={20}
+            disabled={!props.allowMount}
+            row={secondRow}
+            rowSpan={7}>
+      {buttonDisplay}
+    </Button>);
+
+  const autoMountControl = (
+    <RootElem col={inputColumnSpan + 23}
+              colSpan={26}
+              row={secondRow}
+              rowSpan={7}>
+      <input checked={props.autoMount}
+             onChange={props.autoMountChanged}
+             type='checkbox'/>Auto-mount
+    </RootElem>
+  );
 
   return (
-    <div styleName='MountItem'>
+    <Grid>
-      <table><tbody><tr><td>{configButton}</td><td><h2>{props.title}</h2></td></tr></tbody></table>
+      {configButton}
-      <table cellPadding='2'
+      <Text
-             width='100%'>
+        col={configButton ? 6 : 0}
-        <tbody>
+        rowSpan={5}
-          <tr>
+        text={props.title}
-            <td height='30px'
+        type={'Heading1'}/>
-                width={mountWidth}>{inputControl}
+      {inputControl}
-            </td>
+      {actionsDisplay}
-            <td align='center'
+      {autoMountControl}
-                valign='middle'
+    </Grid>
-                width='25%'>
-              {actionDisplay}
-            </td>
-            <td>
-              <input checked={props.autoMount}
-                     onChange={props.autoMountChanged}
-                     type='checkbox'/>Auto-mount
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
   );
 }, styles, {allowMultiple: true});

src/components/UI/Button/Button.css

@@ -1,7 +1,6 @@
 .Button {
   display: block;
   text-align: center;
-  margin: 0;
   padding: 4px;
   outline: 0;
   color: var(--text_color);
@@ -10,8 +9,10 @@
   border: none;
   text-decoration: none;
   text-outline: none;
+  vertical-align: center;
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 
 .Button:hover:enabled {
@@ -21,7 +22,7 @@
 }
 
 .Button:hover:disabled {
-  cursor: default;
+  cursor: no-drop;
 }
 
 .Button:active,

src/components/UI/DropDown/DropDown.css

@@ -23,4 +23,17 @@
   background: rgba(10, 10, 15, 0.8);
   border-color: rgba(10, 10, 20, 0.9);
   color: var(--text_color);
+}
+
+.Select:hover:enabled {
+  cursor: pointer;
+}
+
+.Select:hover:disabled {
+  cursor: no-drop;
+}
+
+.Select:active,
+.Select.active {
+  cursor: pointer;
 }

src/components/UI/Grid/Grid.js

@@ -66,36 +66,41 @@ export default CSSModules(class extends Component {
     const dimensions = this.state.dimensions;
     if (this.state.calculated) {
       children = React.Children.map(this.props.children, (child, i) => {
-        let row = child.props.row || 0;
+        if (child) {
-        if (typeof(row) === 'function') {
+          let row = child.props.row || 0;
-          row = row(dimensions);
+          if (typeof(row) === 'function') {
+            row = row(dimensions);
+          }
+
+          let col = child.props.col || 0;
+          if (typeof(col) === 'function') {
+            col = col(dimensions);
+          }
+
+          let rowSpan = child.props.rowSpan;
+          if (typeof(rowSpan) === 'function') {
+            rowSpan = rowSpan(dimensions.rows - row, dimensions.rows);
+          }
+
+          let colSpan = child.props.colSpan;
+          if (typeof(colSpan) === 'function') {
+            colSpan = colSpan(dimensions.columns - col, dimensions.columns);
+          }
+
+          rowSpan = rowSpan ? (rowSpan === 'remain' ? (dimensions.rows - row) : rowSpan) : null;
+          colSpan = colSpan ? (colSpan === 'remain' ? dimensions.columns - col : colSpan) : null;
+
+          return <GridComponent
+            row={row}
+            col={col}
+            rowSpan={rowSpan}
+            colSpan={colSpan}
+            key={'gc_' + i}>{child}</GridComponent>;
+        } else {
+          return null;
         }
-
+      })
-        let col = child.props.col || 0;
+      .filter(i => i !== null);
-        if (typeof(col) === 'function') {
-          col = col(dimensions);
-        }
-
-        let rowSpan = child.props.rowSpan;
-        if (typeof(rowSpan) === 'function') {
-          rowSpan = rowSpan(dimensions.rows - row, dimensions.rows);
-        }
-
-        let colSpan = child.props.colSpan;
-        if (typeof(colSpan) === 'function') {
-          colSpan = colSpan(dimensions.columns - col, dimensions.columns);
-        }
-
-        rowSpan = rowSpan ? (rowSpan === 'remain' ? (dimensions.rows - row) : rowSpan) : null;
-        colSpan = colSpan ? (colSpan === 'remain' ? dimensions.columns - col : colSpan) : null;
-
-        return <GridComponent
-          row={row}
-          col={col}
-          rowSpan={rowSpan}
-          colSpan={colSpan}
-          key={'gc_' + i}>{child}</GridComponent>;
-      });
     }
 
     const style = {

src/containers/MountItems/MountItems.css

@@ -1,5 +1,6 @@
 .MountItems {
   padding: 0;
+  margin: 0;
   width: 100%;
   box-sizing: border-box;
 }

src/hoc/RootElem/RootElem.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default (props) => {
+  return (
+    <div style={{margin: 0, padding: 0}} {...props}>
+      {props.children}
+    </div>
+  )
+};

src/index.css

@@ -2,7 +2,7 @@
   --border_radius: 4px;
 
   --control_background: rgba(150, 150, 190, .15);
-  --control_background_hover: rgba(150, 150, 190, .3);
+  --control_background_hover: rgba(150, 150, 190, .35);
   --control_border: 1px solid rgba(70, 70, 70, 0.9);
   --control_box_shadow: 1px 1px 1px black;
   --control_transparent_background: rgba(40, 40, 55, 0.45);
@@ -11,7 +11,7 @@
   --text_color: rgba(200, 205, 220, 0.7);
   --text_color_hover: rgba(200, 205, 220, 0.7);
   --text_color_error: rgba(203, 120, 120, 0.8);
-  --heading_text_color: rgba(166, 177, 219, 0.7);
+  --heading_text_color: rgba(161, 190, 219, 0.7);
   --heading_other_text_color: var(--heading_text_color);
   --text_color_transition: color 0.3s;
 }