Initial commit

src/components/DependencyList/Dependency/Dependency.css

@@ -0,0 +1,9 @@
+.Dependency {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.Link {
+  cursor: pointer;
+}

src/components/DependencyList/Dependency/Dependency.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Dependency.css';
+
+export default CSSModules((props) => {
+  return (
+    <div styleName='Dependency'>
+      <table width="100%">
+        <tbody>
+          <tr>
+            <td width="35%">
+              <h3>{props.name}</h3>
+            </td>
+            <td>
+              {props.allowDownload ?
+                <a styleName='Link' href={void(0)} onClick={()=>{props.onDownload(props.download); return false;}}><u>Install</u></a> :
+                'Installing...'}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/DependencyList/DependencyList.css

@@ -0,0 +1,3 @@
+.DependencyList {
+
+}

src/components/DependencyList/DependencyList.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './DependencyList.css';
+import Dependency from './Dependency/Dependency';
+import Box from '../UI/Box/Box';
+
+export default CSSModules((props) => {
+  const items = props.dependencies.map((k, i)=> {
+    return (
+      <Dependency allowDownload={props.allowDownload}
+                  key={i}
+                  name={k.display}
+                  download={k.download}
+                  onDownload={props.onDownload}/>
+    );
+  });
+
+  return (
+    <Box dxDark dxStyle={{width: '300px', height: 'auto', padding: '5px'}}>
+      <div style={{width: '100%', height: 'auto', paddingBottom: '5px', boxSizing: 'border-box'}}>
+        <h1 style={{width: '100%', textAlign: 'center'}}>Missing Dependencies</h1>
+      </div>
+      {items}
+    </Box>
+  );
+
+}, styles, {allowMultiple: true});

src/components/DownloadProgress/DownloadProgress.js

@@ -0,0 +1,17 @@
+import Box from '../UI/Box/Box';
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './DownloadProgress.css';
+
+export default CSSModules((props) => {
+
+  return (
+    <Box dxDark dxStyle={{width: '380px', height: 'auto', padding: '5px'}}>
+      <div style={{width: '100%', height: 'auto'}}>
+        <h1 style={{width: '100%', textAlign: 'center'}}>{'Downloading ' + props.display}</h1>
+      </div>
+      <progress max={100.0} id={'download_progress'}
+                style={{width: '100%'}}
+                value={props.progress}/>
+    </Box>);
+}, styles, {allowMultiple: true});

src/components/MountItem/MountItem.css

@@ -0,0 +1,4 @@
+.MountItem {
+  width: 100%;
+}
+

src/components/MountItem/MountItem.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './MountItem.css';
+import DropDown from '../UI/DropDown/DropDown';
+import Button from '../UI/Button/Button';
+import Loader from 'react-loader-spinner';
+
+export default CSSModules((props) => {
+  let inputControl = null;
+  let mountWidth = '70%';
+  if (props.platform === 'win32') {
+    inputControl = <DropDown disabled={!props.allowMount || props.mounted}
+                             items={props.items}
+                             selected={props.items.indexOf(props.location)}
+                             changed={props.changed}/>;
+    mountWidth = '18%';
+  } else {
+    inputControl = <input disabled={!props.allowMount || props.mounted}
+                          type={'text'}
+                          value={props.location}
+                          onChange={props.changed}/>;
+  }
+
+  let actionDisplay = null;
+  if (props.allowMount) {
+    actionDisplay = <Button buttonStyles={{width: '100%'}}
+                            clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
+  } else {
+    actionDisplay = <Loader color={'var(--heading_text_color)'}
+                            height='24px'
+                            width='24px'
+                            type='Circles'/>;
+  }
+  return (
+    <div styleName='MountItem'>
+      <h2>{props.title}</h2>
+      <table width='100%' cellPadding='2'>
+        <tbody>
+          <tr>
+            <td width={mountWidth} height='30px'>{inputControl}</td>
+            <td width='25%' align='center' valign='middle'>
+              {actionDisplay}
+            </td>
+            <td>
+              <input type='checkbox' checked={props.autoMount} onChange={props.autoMountChanged}/>Auto-mount
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}, styles, {allowMultiple: true});

src/components/UI/Box/Box.css

@@ -0,0 +1,41 @@
+.Box {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--control_transparent_background);
+  box-sizing: border-box;
+  border: var(--control_border);
+  border-radius: var(--border_radius);
+  box-shadow: var(--control_box_shadow);
+}
+
+.Box.Darker {
+  background-color: var(--control_dark_transparent_background);
+}
+
+.Box.SlideOut {
+  animation: slide-out 0.5s forwards;
+  transform: translateX(-100%);
+}
+
+.Box.SlideOutTop {
+  animation: slide-out-top 0.5s forwards;
+  transform: translateY(-100%);
+}
+
+.Box.FadeIn {
+  transition: 0.3s;
+}
+
+@keyframes slide-out {
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out-top {
+  100% {
+    transform: translateY(0%);
+  }
+}

src/components/UI/Box/Box.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Box.css';
+
+export default CSSModules((props) => {
+  const styleList = ['Box'];
+  if (props.dxDark) {
+    styleList.push('Darker');
+  }
+
+  if (props.dxSlideOut) {
+    styleList.push('SlideOut');
+  } else if (props.dxFadeIn) {
+    styleList.push('FadeIn');
+  } else if (props.dxSlideOutTop) {
+    styleList.push('SlideOutTop');
+  }
+
+  return (
+    <div
+      onClick={props.clicked}
+      styleName={styleList.join(' ')}
+      style={{...props.dxStyle}}>
+      {props.children}
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/UI/Button/Button.css

@@ -0,0 +1,30 @@
+.Button {
+  display: block;
+  text-align: center;
+  margin: 0;
+  padding: 4px;
+  outline: 0;
+  color: var(--text_color);
+  border-radius: var(--border_radius);
+  background-color: var(--control_background);
+  border: none;
+  text-decoration: none;
+  text-outline: none;
+  width: 70px;
+}
+
+.Button:hover:enabled {
+  background: var(--control_background_hover);
+  color: var(--text_color_hover);
+  cursor: pointer;
+}
+
+.Button:hover:disabled {
+  cursor: default;
+}
+
+.Button:active,
+.Button.active {
+  box-shadow: none;
+  cursor: pointer;
+}

src/components/UI/Button/Button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Button.css';
+
+export default CSSModules((props) => {
+  return (
+    <button disabled={props.disabled}
+            styleName={'Button'}
+            style={props.buttonStyles}
+            onClick={props.clicked}>{props.children}</button>
+  );
+}, styles, {allowMultiple: true});
+

src/components/UI/DropDown/DropDown.css

@@ -0,0 +1,24 @@
+.DropDown {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.Select {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(10, 10, 20, 0.3);
+  border-color: rgba(10, 10, 20, 0.9);
+  color: var(--text_color);
+  box-sizing: border-box;
+}
+
+.Option {
+  background: rgba(10, 10, 15, 0.8);
+  border-color: rgba(10, 10, 20, 0.9);
+  color: var(--text_color);
+}

src/components/UI/DropDown/DropDown.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './DropDown.css';
+
+export default CSSModules((props) => {
+  const options = props.items.map((s, i) => {
+    return (
+      <option styleName='Option' key={i} value={i}>{s}</option>
+    );
+  });
+
+  return (
+    <div styleName='DropDown'>
+      <select styleName='Select' disabled={props.disabled} onChange={props.changed} value={props.selected}>
+        {options}
+      </select>
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/UI/Modal/Modal.css

@@ -0,0 +1,19 @@
+.Modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+}
+
+.Content {
+  position: fixed;
+  width: auto;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2001;
+}

src/components/UI/Modal/Modal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Modal.css'
+
+export default CSSModules((props) => {
+  return (
+    <div
+      styleName='Modal'
+      onClick={props.clicked}>
+      <div styleName='Content'>
+        {props.children}
+      </div>
+    </div>);
+}, styles, {allowMultiple: true});

src/components/UpgradeIcon/UpgradeIcon.css

@@ -0,0 +1,14 @@
+.UpgradeIcon {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+div.UpgradeIcon {
+  cursor: default;
+}

src/components/UpgradeIcon/UpgradeIcon.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './UpgradeIcon.css';
+import availableImage from '../../assets/images/upgrade_available.png';
+
+export default CSSModules((props) => {
+  return props.available ?
+    <img alt='' styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> :
+    <div styleName='UpgradeIcon'/> ;
+}, styles, {allowMultiple: true});

src/components/UpgradeUI/UpgradeUI.js

@@ -0,0 +1,28 @@
+import Button from '../UI/Button/Button';
+import Box from '../UI/Box/Box';
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './UpgradeUI.css';
+
+export default CSSModules((props) => {
+  return (
+    <Box dxDark dxStyle={{width: '180px', height: 'auto', padding: '5px'}}>
+      <div style={{width: '100%', height: 'auto'}}>
+        <h1 style={{width: '100%', textAlign: 'center'}}>UI Upgrade Available</h1>
+      </div>
+      <table cellSpacing={5} width="100%">
+        <tbody>
+        <tr>
+          <td width="50%">
+            <Button buttonStyles={{width: '100%'}}
+                    clicked={props.upgrade}>Install</Button>
+          </td>
+          <td width="50%">
+            <Button buttonStyles={{width: '100%'}}
+                    clicked={props.cancel}>Cancel</Button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </Box>);
+}, styles, {allowMultiple: true});