Added proper about page with tools versions

Signed-off-by: FrenchBen <me@frenchben.com>

src/components/About.react.js

@@ -0,0 +1,67 @@
+import React from 'react/addons';
+import metrics from '../utils/MetricsUtil';
+import utils from '../utils/Util';
+import Router from 'react-router';
+import RetinaImage from 'react-retina-image';
+var packages;
+
+try {
+  packages = utils.packagejson();
+} catch (err) {
+  packages = {};
+}
+
+var Preferences = React.createClass({
+  mixins: [Router.Navigation],
+  getInitialState: function () {
+    return {
+      metricsEnabled: metrics.enabled()
+    };
+  },
+  handleGoBackClick: function () {
+    this.goBack();
+    metrics.track('Went Back From About');
+  },
+  render: function () {
+    return (
+      <div className="preferences">
+        <div className="preferences-content">
+          <a onClick={this.handleGoBackClick}>Go Back</a>
+          <RetinaImage src="banner.png"/>
+          <table className="table">
+            <thead>
+              <tr>
+                <th>APP NAME</th>
+                <th>VERSION</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{packages.name}</td>
+                <td>{packages.version}</td>
+              </tr>
+              <tr>
+                <td>Docker</td>
+                <td>{packages["docker-version"]}</td>
+              </tr>
+              <tr>
+                <td>Docker Machine</td>
+                <td>{packages["docker-machine-version"]}</td>
+              </tr>
+              <tr>
+                <td>Docker Compose</td>
+                <td>{packages["docker-compose-version"]}</td>
+              </tr>
+              <tr>
+                <td>VirtualBox</td>
+                <td>{packages["virtualbox-version"]}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = Preferences;

src/menutemplate.js

@@ -17,7 +17,13 @@ var MenuTemplate = function () {
       submenu: [
       {
         label: 'About Kitematic',
-        selector: 'orderFrontStandardAboutPanel:'
+        //selector: 'orderFrontStandardAboutPanel:'
+        click: function () {
+          metrics.track('Opened About', {
+            from: 'menu'
+          });
+          router.get().transitionTo('about');
+        }
       },
       {
         type: 'separator'
@@ -94,6 +100,11 @@ var MenuTemplate = function () {
     {
       label: 'File',
       submenu: [
+      {
+        label: 'Open File',
+        accelerator: util.CommandOrCtrl() + '+O',
+        selector: 'openDocument:'
+      },
       {
         type: 'separator'
       },

src/routes.js

@@ -13,6 +13,7 @@ import ContainerSettingsPorts from './components/ContainerSettingsPorts.react';
 import ContainerSettingsVolumes from './components/ContainerSettingsVolumes.react';
 import ContainerSettingsAdvanced from './components/ContainerSettingsAdvanced.react';
 import Preferences from './components/Preferences.react';
+import About from './components/About.react';
 import NewContainerSearch from './components/NewContainerSearch.react';
 import NewContainerPull from './components/NewContainerPull.react';
 import Router from 'react-router';
@@ -51,6 +52,7 @@ var routes = (
         <Route name="pull" path="containers/new/pull" handler={NewContainerPull}></Route>
       </Route>
       <Route name="preferences" path="/preferences" handler={Preferences}/>
+      <Route name="about" path="/about" handler={About}/>
     </Route>
     <DefaultRoute name="setup" handler={Setup}/>
   </Route>