Component refactoring

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>