Component refactoring

electron.js

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

src/App.js

@@ -2,16 +2,17 @@ import React, {Component} from 'react';
 import axios from 'axios';
 import styles from './App.css';
 import Box from './components/UI/Box/Box';
-import Button from './components/UI/Button/Button';
 import Configuration from './containers/Configuration/Configuration';
 import CSSModules from 'react-css-modules';
 import DependencyList from './components/DependencyList/DependencyList';
 import DownloadProgress from './components/DownloadProgress/DownloadProgress';
-import DropDown from './components/UI/DropDown/DropDown';
 import ErrorDetails from './components/ErrorDetails/ErrorDetails';
+import Grid from './components/UI/Grid/Grid';
 import Loading from './components/UI/Loading/Loading';
 import Modal from './components/UI/Modal/Modal';
 import MountItems from './containers/MountItems/MountItems';
+import ReleaseVersionDisplay from './components/ReleaseVersionDisplay/ReleaseVersionDisplay';
+import Text from './components/UI/Text/Text';
 import UpgradeIcon from './components/UpgradeIcon/UpgradeIcon';
 import UpgradeUI from './components/UpgradeUI/UpgradeUI';
 
@@ -44,11 +45,11 @@ class App extends Component {
   }
 
   state = {
-    AllowOptions: false,
     AllowDownload: false,
     AutoMountProcessed: false,
     ConfigStorageType: null,
     DisplayError: false,
+    DisplayMainContent: false,
     Error: null,
     ErrorAction: null,
     ErrorCritical: false,
@@ -74,7 +75,7 @@ class App extends Component {
       'Beta',
       'Alpha',
     ],
-    RepertoryVersion: 'none',
+    InstalledVersion: 'none',
     Sia: {
       AutoMount: false,
       MountLocation: '',
@@ -305,10 +306,10 @@ class App extends Component {
 
   onCheckInstalledReply = (event, arg) => {
     const action = () => {
-      const repertoryVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none';
+      const installedVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none';
       let versionAvailable = false;
 
-      if (repertoryVersion !== 'none') {
+      if (installedVersion !== 'none') {
         const latestVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1;
         let version = this.state.Version;
         if (version === -1) {
@@ -321,7 +322,7 @@ class App extends Component {
         AllowDownload: true,
         DownloadingDependency: false,
         MissingDependencies: arg.data.Dependencies,
-        RepertoryVersion: repertoryVersion,
+        InstalledVersion: installedVersion,
         VersionAvailable: versionAvailable,
       });
     };
@@ -430,7 +431,7 @@ class App extends Component {
       }
 
       this.setState({
-        AllowOptions: true,
+        DisplayMainContent: true,
         LocationsLookup: locationsLookup,
         Version: version,
         VersionAvailable: version !== latestVersion,
@@ -551,9 +552,9 @@ class App extends Component {
       !this.state.MountsBusy &&
       !this.state.DownloadActive &&
       (selectedVersion !== 'unavailable') &&
-      (selectedVersion !== this.state.RepertoryVersion);
+      (selectedVersion !== this.state.InstalledVersion);
 
-    const allowMount = this.state.RepertoryVersion !== 'none';
+    const allowMount = this.state.InstalledVersion !== 'none';
     const missingDependencies = (this.state.MissingDependencies.length > 0);
     const allowConfig = this.state.LocationsLookup[selectedVersion] &&
       this.state.LocationsLookup[selectedVersion].config_support;
@@ -596,23 +597,6 @@ class App extends Component {
       );
     }
 
-    let mountDisplay = null;
-    if (allowMount) {
-      mountDisplay = <MountItems allowConfig={allowConfig}
-                                 autoMountChanged={this.handleAutoMountChanged}
-                                 autoMountProcessed={this.notifyAutoMountProcessed}
-                                 changed={this.handleMountLocationChanged}
-                                 configClicked={this.handleConfigClicked}
-                                 directory={Constants.DATA_LOCATIONS[this.props.platform]}
-                                 errorHandler={this.setErrorState}
-                                 hyperspace={this.state.Hyperspace}
-                                 mountsBusy={this.notifyMountsBusy}
-                                 platform={this.props.platform}
-                                 processAutoMount={!this.state.AutoMountProcessed}
-                                 sia={this.state.Sia}
-                                 version={this.state.RepertoryVersion}/>;
-    }
-
     let dependencyDisplay = null;
     if (showDependencies) {
       dependencyDisplay = (
@@ -634,14 +618,6 @@ class App extends Component {
         </Modal>);
     }
 
-    let releaseDisplay = null;
-    if (this.state.ExtractActive) {
-      releaseDisplay = <h3 style={{textAlign: 'center'}}>{'Activating <' + selectedVersion + '>'}</h3>
-    } else {
-      releaseDisplay = <Button clicked={this.handleReleaseDownload}
-                               disabled={!downloadEnabled}>Install</Button>;
-    }
-
     let upgradeDisplay = null;
     if (showUpgrade) {
       upgradeDisplay = (
@@ -652,53 +628,47 @@ class App extends Component {
       );
     }
 
-    let mainContent = null;
-    if (this.state.AllowOptions) {
-      mainContent = (
-        <table width='100%' cellPadding='2'>
-          <tbody>
-          <tr>
-            <td width='33.333%'>
-              <h2>Release</h2>
-            </td>
-            <td width='33.333%'>
-              <h2>Version<UpgradeIcon
-                release
-                available={this.state.VersionAvailable}/></h2>
-            </td>
-            <td width='33.333%'>
-              <h2>Installed</h2>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <DropDown changed={this.handleReleaseChanged}
-                        disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
-                        items={this.state.ReleaseTypes}
-                        selected={this.state.Release}/>
-            </td>
-            <td>
-              <DropDown changed={this.handleVersionChanged}
-                        disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
-                        items={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]}
-                        selected={this.state.Version}/>
-            </td>
-            <td>
-              {this.state.RepertoryVersion}
-            </td>
-          </tr>
-          <tr>
-            <td colSpan={3}>
-              {releaseDisplay}
-            </td>
-          </tr>
-          <tr>
-            <td colSpan={3}>
-              {mountDisplay}
-            </td>
-          </tr>
-          </tbody>
-        </table>);
+    let mainContent = [];
+    if (this.state.DisplayMainContent) {
+      let key = 0;
+      mainContent.push((
+        <div key={'rvd_' + key++}
+             style={{height: '40%'}}>
+          <ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
+                                 downloadClicked={this.handleReleaseDownload}
+                                 downloadDisabled={!downloadEnabled}
+                                 installedVersion={this.state.InstalledVersion}
+                                 release={this.state.Release}
+                                 releaseChanged={this.handleReleaseChanged}
+                                 releaseExtracting={this.state.ExtractActive}
+                                 releaseTypes={this.state.ReleaseTypes}
+                                 version={this.state.Version}
+                                 versionAvailable={this.state.VersionAvailable}
+                                 versionChanged={this.handleVersionChanged}
+                                 versions={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]}/>
+        </div>
+      ));
+
+      if (allowMount) {
+        mainContent.push((
+          <div key={'md_' + key++}
+               style={{height: '60%'}}>
+            <MountItems allowConfig={allowConfig}
+                        autoMountChanged={this.handleAutoMountChanged}
+                        autoMountProcessed={this.notifyAutoMountProcessed}
+                        changed={this.handleMountLocationChanged}
+                        configClicked={this.handleConfigClicked}
+                        directory={Constants.DATA_LOCATIONS[this.props.platform]}
+                        errorHandler={this.setErrorState}
+                        hyperspace={this.state.Hyperspace}
+                        mountsBusy={this.notifyMountsBusy}
+                        platform={this.props.platform}
+                        processAutoMount={!this.state.AutoMountProcessed}
+                        sia={this.state.Sia}
+                        version={this.state.InstalledVersion}/>
+          </div>
+        ));
+      }
     } else {
       mainContent = <Loading/>
     }
@@ -710,32 +680,25 @@ class App extends Component {
         {upgradeDisplay}
         {downloadDisplay}
         {configDisplay}
-        <Box dxStyle={{height: '9.3%', padding: '2px'}}>
-          <table cellPadding={0}
-                 cellSpacing={0}
-                 style={{margin: 0, padding: 0}}
-                 width='100%'>
-            <tbody style={{margin: 0, padding: 0}}>
-              <tr style={{margin: 0, padding: 0}}>
-                <td style={{margin: 0, padding: 0}}
-                    width='33.333%'/>
-                <td style={{margin: 0, padding: 0}}
-                    width='33.333%'>
-                  <h1 style={{'textAlign': 'center'}}>{'Repertory UI v' + this.props.version}</h1>
-                </td>
-                <td align='right'
-                    style={{margin: 0, padding: 0}}
-                    valign='middle'
-                    width='33.333%'>
+        <Box dxStyle={{height: '28px'}}>
+          <Grid>
+            <Text col={0}
+                  row={0}
+                  colSpan={'remain'}
+                  rowSpan={'remain'}
+                  text={'Repertory UI v' + this.props.version}
+                  textAlign={'center'}
+                  type={'Heading1'}/>
             <UpgradeIcon
-                    available={this.state.UpgradeAvailable}
-                    clicked={()=>this.setState({UpgradeDismissed: false})}/>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+              available={!this.state.UpgradeAvailable}
+              clicked={()=>this.setState({UpgradeDismissed: false})}
+              col={dimensions => dimensions.columns - 7}
+              colSpan={6}
+              row={0}
+              rowSpan={'remain'}/>
+          </Grid>
         </Box>
-        <Box dxStyle={{padding: '4px', marginTop: '10px', height: '90.7%'}}>
+        <Box dxStyle={{padding: '8px', marginTop: '10px', height: '238px'}}>
           {mainContent}
         </Box>
       </div>

src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import styles from './ReleaseVersionDisplay.css';
+import CSSModules from 'react-css-modules';
+import DropDown from '../UI/DropDown/DropDown';
+import Grid from '../UI/Grid/Grid';
+import Text from '../UI/Text/Text';
+import Button from '../UI/Button/Button';
+import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
+
+export default CSSModules((props) => {
+  let optionsDisplay = null;
+  if (props.releaseExtracting) {
+    optionsDisplay = <Text align='center'
+                           row={13}
+                           rowSpan={7}
+                           colSpan={'remain'}
+                           text={'Activating <' + props.installedVersion + '>'}/>
+  } else {
+    optionsDisplay = <Button clicked={props.downloadClicked}
+                             colSpan={20}
+                             disabled={props.downloadDisabled}
+                             row={13}
+                             rowSpan={7}>Install</Button>;
+  }
+
+  return (
+    <Grid>
+      <Text colSpan={columns=>columns / 3}
+            rowSpan={4}
+            text={'Release'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      <DropDown changed={props.releaseChanged}
+                colSpan={remain=>remain / 3 - 1}
+                disabled={props.disabled}
+                items={props.releaseTypes}
+                row={5}
+                rowSpan={7}
+                selected={props.release}/>
+      <Text col={dimensions => dimensions.columns / 3}
+            colSpan={remain=>remain / 2}
+            rowSpan={4}
+            text={'Version'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      <UpgradeIcon available={props.versionAvailable}
+                   col={dimensions => ((dimensions.columns / 3) * 2) - 6}
+                   colSpan={4}
+                   release
+                   rowSpan={4}/>
+      <DropDown changed={props.versionChanged}
+                col={dimensions => dimensions.columns / 3}
+                colSpan={remain=>remain / 2 - 1}
+                disabled={props.disabled}
+                items={props.versions}
+                row={5}
+                rowSpan={7}
+                selected={props.version}/>
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            rowSpan={4}
+            text={'Installed'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            row={5}
+            rowSpan={7}
+            text={props.installedVersion}
+            textAlign={'left'}/>
+      {optionsDisplay}
+    </Grid>
+  );
+}, styles, {allowMultiple: true});

src/components/UI/Button/Button.css

@@ -10,7 +10,8 @@
   border: none;
   text-decoration: none;
   text-outline: none;
-  width: 70px;
+  height: 100%;
+  width: 100%;
 }
 
 .Button:hover:enabled {

src/components/UI/DropDown/DropDown.css

@@ -1,5 +1,7 @@
 .DropDown {
+  display: block;
   width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
 }

src/components/UI/Grid/Grid.css

@@ -0,0 +1,18 @@
+.Grid {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.GridOwner {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

src/components/UI/Grid/Grid.js

@@ -0,0 +1,121 @@
+import React, {Component} from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Grid.css';
+import GridComponent from './GridComponent/GridComponent';
+
+export default CSSModules(class extends Component {
+  constructor(props) {
+    super(props);
+    window.addEventListener("resize", this.updateSizeAsync);
+  }
+
+  state = {
+    calculated: false,
+    dimensions: {
+      columns: 0,
+      rows: 0
+    }
+  };
+
+  calculateDimensions = (size) => {
+    return {
+      columns: Math.floor(size.width / 4),
+      rows: Math.floor(size.height / 4)
+    };
+  };
+
+  getSize = () => {
+    const elem = this.refs.GridOwner;
+    return {
+      height: elem ? elem.clientHeight : 0,
+      width: elem ? elem.clientWidth : 0
+    };
+  };
+
+  updateSize = () => {
+    const state = {
+      ...this.state
+    };
+    const size = this.getSize();
+    const dimensions = this.calculateDimensions(size);
+    if (state.dimensions !== dimensions) {
+      this.setState({
+        calculated: true,
+        dimensions: dimensions
+      })
+    }
+  };
+
+  updateSizeAsync = () => {
+    return new Promise((done) => {
+      this.updateSize();
+      done();
+    });
+  };
+
+  componentDidMount = () => {
+    this.updateSizeAsync();
+  };
+
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.updateSizeAsync);
+  };
+
+  render() {
+    let children = null;
+    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 (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>;
+      });
+    }
+
+    const style = {
+      style: {
+        gridTemplateColumns: '4px '.repeat(dimensions.columns).trim(),
+        gridTemplateRows: '4px '.repeat(dimensions.rows).trim(),
+        gridAutoColumns: '4px',
+        gridAutoRows: '4px'
+      }
+    };
+
+    return (
+      <div
+        ref='GridOwner'
+        styleName='GridOwner'>
+        <div styleName='Grid' {...style}>
+          {children}
+        </div>
+      </div>
+    )
+  };
+
+}, styles, {allowMultiple: true});

src/components/UI/Grid/GridComponent/GridComponent.css

@@ -0,0 +1,7 @@
+.GridComponent {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/UI/Grid/GridComponent/GridComponent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './GridComponent.css';
+
+export default CSSModules((props) => {
+  const style = {
+    style: {
+      gridRowStart: Math.floor(props.row + 1),
+      gridRowEnd: 'span ' + Math.floor(props.rowSpan || 1),
+      gridColumnStart: Math.floor(props.col + 1),
+      gridColumnEnd: 'span ' + Math.floor(props.colSpan || 1)
+    }
+  };
+
+  return (
+    <div styleName='GridComponent' {...style}>
+      {props.children}
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/UI/Text/Text.css

@@ -0,0 +1,39 @@
+.TextOwner {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+}
+
+.Text {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: center;
+  color: var(--text_color);
+}
+
+.Heading1 {
+  font-weight: bold;
+  color: var(--heading_text_color);
+}
+
+.Heading2 {
+  font-weight: bold;
+  color: var(--heading_other_text_color);
+}
+
+.Heading3 {
+  font-weight: bold;
+  color: var(--heading_other_text_color);
+}
+
+.AltTextColor {
+  color: var(--heading_other_text_color);
+}

src/components/UI/Text/Text.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Text.css';
+
+export default CSSModules((props) => {
+  const styleList = [];
+  styleList.push('Text');
+  if (props.type) {
+    styleList.push(props.type);
+  }
+
+  let style = {...props.style};
+  if (props.textAlign) {
+    style['textAlign'] = props.textAlign.toLowerCase();
+  }
+
+  const text = (
+    <div
+      styleName={styleList.join(' ')}
+      style={style}>{props.text}
+    </div>);
+
+  return props.noOwner ? text : (
+    <div styleName={'TextOwner'}>
+      {text}
+    </div>);
+
+}, styles, {allowMultiple: true});

src/components/UpgradeIcon/UpgradeIcon.css

@@ -1,26 +1,21 @@
 .Owner {
-  display: block;
-  margin-right: 2px;
   padding: 0;
-  width: 20px;
-  height: 20px;
+  margin: 0;
+  width: 100%;
+  height: 100%;
   border: 0;
   box-sizing: border-box;
   cursor: pointer;
 }
 
-.Owner p {
-  margin: 0;
-  padding: 0;
-}
-
 .UpgradeIcon {
   display: block;
   margin: 0;
   padding: 0;
+  object-fit: contain;
   border: 0;
-  width: 20px;
-  height: 20px;
+  max-width: 100%;
+  max-height: 100%;
   box-sizing: border-box;
   opacity: 0.65;
  }

src/components/UpgradeIcon/UpgradeIcon.js

@@ -5,27 +5,21 @@ import availableImage from '../../assets/images/release_available.png';
 import ReactTooltip from 'react-tooltip';
 
 export default CSSModules((props) => {
-  let style;
-  let style2;
   let placement = 'left';
   let toolTipText = 'UI Upgrade Available';
   if (props.release) {
     placement='bottom';
     toolTipText = 'New Release Available';
-    style = {float: 'right', marginRight: '5%', width: '15px', height: '15px', cursor: 'default'};
-    style2 = {width: '15px', height: '15px'};
   }
 
   return props
     .available ?
     (
-      <div style={style}
-           styleName='Owner'>
+      <div styleName='Owner'>
         <p data-tip='' data-for={placement}>
           <img alt=''
                onClick={props.clicked}
                src={availableImage}
-               style={style2}
                styleName='UpgradeIcon'/>
         </p>
         <ReactTooltip id={placement} place={placement}>{toolTipText}</ReactTooltip>

src/containers/MountItems/MountItems.css

@@ -1,5 +1,4 @@
 .MountItems {
   padding: 0;
-  margin-top: 8px;
   width: 100%;
 }