8 years ago · f492441718
--- a/ui/public/favicon.ico
+++ b/ui/public/favicon.ico
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -13,7 +13,7 @@
 
				       work correctly both with client-side routing and a non-root public URL.
			
 
				       Learn how to configure a non-root public URL by running `npm run build`.
			
 
				     -->
			
 
				-    <title>React App</title>
			
 
				+    <title>Flasher.js</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <div id="root"></div>
			
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -1,24 +1,80 @@
 
				-.App {
			
 
				-  text-align: center;
			
 
				+* {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				 }
			
 
				 
			
 
				-.App-logo {
			
 
				-  animation: App-logo-spin infinite 20s linear;
			
 
				-  height: 80px;
			
 
				+html {
			
 
				+	overflow: hidden;
			
 
				 }
			
 
				 
			
 
				-.App-header {
			
 
				-  background-color: #222;
			
 
				-  height: 150px;
			
 
				-  padding: 20px;
			
 
				-  color: white;
			
 
				+body {
			
 
				+	font-size: 14px;
			
 
				+	font-family: HelveticaNeue, "Lucida Grande", Helvetica, Arial, sans-serif;
			
 
				+	color: #010101;
			
 
				 }
			
 
				 
			
 
				-.App-intro {
			
 
				-  font-size: large;
			
 
				+footer {
			
 
				+	position:fixed;
			
 
				+	left:0;
			
 
				+	bottom:0;
			
 
				+	height:30px;
			
 
				+	padding-top:10px;
			
 
				+	width:100%;
			
 
				+	text-align: center;
			
 
				+	border-top: 1px solid #EDEAE8;
			
 
				+	background: white;
			
 
				 }
			
 
				 
			
 
				-@keyframes App-logo-spin {
			
 
				-  from { transform: rotate(0deg); }
			
 
				-  to { transform: rotate(360deg); }
			
 
				+#app {
			
 
				+	margin:27px auto;
			
 
				+	display: flex;
			
 
				+	background: white;
			
 
				+	width: 500px;
			
 
				 }
			
 
				+
			
 
				+
			
 
				+@keyframes moveLeft {
			
 
				+    0%   {margin-left: 0px;}
			
 
				+    100% {margin-left: 160px;}
			
 
				+}
			
 
				+
			
 
				+@keyframes moveBack {
			
 
				+    0%   {margin-left: 160px;}
			
 
				+    100% {margin-left: 0px;}
			
 
				+}
			
 
				+
			
 
				+#app.flashing #logo {
			
 
				+	animation: moveLeft 500ms ease-in;
			
 
				+	margin-left: 160px;
			
 
				+}
			
 
				+
			
 
				+#app.flashing #form {
			
 
				+	display: none;
			
 
				+}
			
 
				+
			
 
				+#app.finished #logo {
			
 
				+	animation: moveBack 500ms ease-in;
			
 
				+	margin-left: 0px;
			
 
				+}
			
 
				+
			
 
				+#app.finished #form {
			
 
				+	display: inline-block;
			
 
				+}
			
 
				+
			
 
				+#warning p {
			
 
				+    line-height: 1.5;
			
 
				+    margin-top:5px;
			
 
				+}
			
 
				+
			
 
				+.code {
			
 
				+    background: #ccc;
			
 
				+    border: 1px solid #999;
			
 
				+    font-family: monospace;
			
 
				+    padding: 2px 4px;
			
 
				+    border-radius: 4px;
			
 
				+}
			
 
				+
			
 
				+#warning p.code {
			
 
				+    padding:1px 10px;
			
 
				+    display: inline-block;
			
 
				+}
			
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -1,18 +1,17 @@
 
				 import React, { Component } from 'react';
			
 
				-import logo from './logo.svg';
			
 
				 import './App.css';
			
 
				-
			
 
				+import Logo from './Logo.js';
			
 
				+import Form from './Form.js';
			
 
				+import Footer from './Footer.js';
			
 
				 class App extends Component {
			
 
				   render() {
			
 
				     return (
			
 
				       <div className="App">
			
 
				-        <div className="App-header">
			
 
				-          <img src={logo} className="App-logo" alt="logo" />
			
 
				-          <h2>Welcome to React</h2>
			
 
				+        <div id="app">
			
 
				+          <Logo />
			
 
				+          <Form />
			
 
				         </div>
			
 
				-        <p className="App-intro">
			
 
				-          To get started, edit <code>src/App.js</code> and save to reload.
			
 
				-        </p>
			
 
				+        <Footer />
			
 
				       </div>
			
 
				     );
			
 
				   }
			
--- a/ui/src/Footer.js
+++ b/ui/src/Footer.js
@@ -0,0 +1,5 @@
 
				+import React from 'react';

			
 
				+

			
 
				+export default () => {

			
 
				+    return <footer><span id="status"></span></footer>;

			
 
				+}
			
--- a/ui/src/Form.css
+++ b/ui/src/Form.css
@@ -0,0 +1,38 @@
 
				+button {

			
 
				+	background-image: linear-gradient(-180deg, #4C98FE 0%, #0664E3 100%);

			
 
				+	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.15);

			
 
				+	border-radius: 3px;

			
 
				+	font-size: 14px;

			
 
				+	color: #FFFFFF;

			
 
				+	letter-spacing: -0.11px;

			
 
				+	line-height: 12px;

			
 
				+	height: 21px;

			
 
				+	width: 60px;

			
 
				+	border: 0.5px solid #247EFF;

			
 
				+}

			
 
				+

			
 
				+button:disabled {

			
 
				+	background: #eee;

			
 
				+	color: #aaa;

			
 
				+}

			
 
				+

			
 
				+button:hover {

			
 
				+	background-image: linear-gradient(-180deg, #5DA9FF 0%, #1775F4 100%);

			
 
				+	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);

			
 
				+}

			
 
				+

			
 
				+button:hover:disabled {

			
 
				+	background: #eee;

			
 
				+	color: #aaa;

			
 
				+}

			
 
				+

			
 
				+

			
 
				+#form .field {

			
 
				+	margin-top:20px;

			
 
				+	line-height: 1.5;

			
 
				+}

			
 
				+

			
 
				+#form .button {

			
 
				+	margin-top: 10px;

			
 
				+	text-align: right;

			
 
				+}
			
--- a/ui/src/Form.js
+++ b/ui/src/Form.js
@@ -0,0 +1,14 @@
 
				+import React from "react";

			
 
				+import './Form.css';

			
 
				+

			
 
				+import SelectField from './SelectField.js';

			
 
				+

			
 
				+export default () => {

			
 
				+    return <div id="form">

			
 
				+        <SelectField id="ports" label="Select Port:" title="Select a Serial/COM Port" isDisabled={true} />

			
 
				+        <SelectField id="manifests" label="Select Binaries to Flash" title="Select Binaries to Flash" isDisabled={true} />

			
 
				+        <div className="button">

			
 
				+            <button id="flash-button" disabled>Flash!</button>

			
 
				+        </div>

			
 
				+    </div>;

			
 
				+}
			
--- a/ui/src/Logo.css
+++ b/ui/src/Logo.css
@@ -0,0 +1,11 @@
 
				+#logo svg {

			
 
				+	width:180px;

			
 
				+}

			
 
				+

			
 
				+.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:3;stroke-miterlimit:10;}

			
 
				+.st1{fill:none;stroke:#FFAB91;stroke-width:3;stroke-miterlimit:10;}

			
 
				+.st2{fill:none;stroke:#FFD600;stroke-width:3;stroke-miterlimit:10;}

			
 
				+

			
 
				+.svgStyle {enable-background:new 0 0 180 180;}

			
 
				+.stop0 {stop-color:#FFAB91;}

			
 
				+.stop1 {stop-color:#FFD600;}
			
--- a/ui/src/Logo.js
+++ b/ui/src/Logo.js
@@ -0,0 +1,19 @@
 
				+import React from 'react';

			
 
				+import './Logo.css';

			
 
				+

			
 
				+export default () => {

			
 
				+    return <div id="logo">

			
 
				+            <svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 180 180">

			
 
				+            <g>

			
 
				+                <title>Flasher.js</title>

			
 
				+                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49" y1="145" x2="128" y2="145" gradientTransform="matrix(1 0 0 1 0 -55)">

			
 
				+                    <stop  offset="0" className='stop0' />

			
 
				+                    <stop  offset="1" className='stop1' />

			
 
				+                </linearGradient>

			
 
				+                <polyline className='st0' points="52,28 63,28 51,93 57,93 72,4 78,4 62,93 68,93 78,38 84,38,73,93 79,93 86,55 91,55 69,176 75,176 91,88 97,88 85,154 90,154 102,88 108,88,100,136 105,136 114,88 119,88 117,99 128,99"/>

			
 
				+                <circle className='st1' cx="49" cy="28" r="3"/>

			
 
				+                <circle className='st2' cx="131" cy="100" r="3"/>

			
 
				+            </g>

			
 
				+            </svg>

			
 
				+    </div>;

			
 
				+}

			
--- a/ui/src/SelectField.css
+++ b/ui/src/SelectField.css
@@ -0,0 +1,9 @@
 
				+select {

			
 
				+	width: 254px;

			
 
				+	height: 21px;

			
 
				+	font-size: 13px;

			
 
				+}

			
 
				+

			
 
				+label {

			
 
				+	font-size: 13px;

			
 
				+}
			
--- a/ui/src/SelectField.js
+++ b/ui/src/SelectField.js
@@ -0,0 +1,11 @@
 
				+import React from 'react';

			
 
				+import './SelectField.css';

			
 
				+

			
 
				+export default (props) => {

			
 
				+    return <div className="field">

			
 
				+            <label htmlFor={props.id}>{props.label}</label><br />

			
 
				+            <select title={props.title} id={props.id} name={props.id} disabled={props.isDisabled}>

			
 
				+

			
 
				+            </select>

			
 
				+        </div>;

			
 
				+}
			
--- a/ui/src/logo.svg
+++ b/ui/src/logo.svg