Merge branch 'master' into fix-install

Conflicts:
	src/Setup.react.js

browser/main.js

@@ -34,7 +34,7 @@ var windowOptions = {
   'min-height': 700,
   resizable: true,
   frame: false,
-  show: false
+  show: true
 };
 
 app.on('activate-with-no-open-windows', function () {

src/ContainerListItem.react.js

@@ -31,7 +31,7 @@ var ContainerListItem = React.createClass({
         });
         ContainerStore.remove(this.props.container.Name, () => {
           var containers = ContainerStore.sorted();
-          if (containers.length === 0) {
+          if (containers.length === 1) {
             $(document.body).find('.new-container-item').parent().fadeIn();
           }
         });

src/ContainerSettingsGeneral.react.js

@@ -20,7 +20,7 @@ var containerNameSlugify = function (text) {
   for (var i=0, l=from.length ; i<l ; i++) {
     text = text.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
   }
-  text = text.replace(/[^a-z0-9 -_]/g, '') // Remove invalid chars
+  text = text.replace(/[^a-z0-9-_.\s]/g, '') // Remove invalid chars
     .replace(/\s+/g, '-') // Collapse whitespace and replace by -
     .replace(/-+/g, '-')  // Collapse dashes
     .replace(/_+/g, '_'); // Collapse underscores

src/Containers.react.js

@@ -8,6 +8,10 @@ var ipc = require('ipc');
 var remote = require('remote');
 var metrics = require('./Metrics');
 var autoUpdater = remote.require('auto-updater');
+var RetinaImage = require('react-retina-image');
+var path = require('path');
+var docker = require('./Docker');
+var util = require('./Util');
 
 var Containers = React.createClass({
   mixins: [Router.Navigation, Router.State],
@@ -16,7 +20,8 @@ var Containers = React.createClass({
       sidebarOffset: 0,
       containers: ContainerStore.containers(),
       sorted: ContainerStore.sorted(),
-      updateAvailable: false
+      updateAvailable: false,
+      currentButtonLabel: ''
     };
   },
   componentDidMount: function () {
@@ -88,19 +93,56 @@ var Containers = React.createClass({
     metrics.track('Restarted to Update');
     ipc.send('command', 'application:quit-install');
   },
+  handleClickPreferences: function () {
+    this.transitionTo('preferences');
+  },
+  handleClickDockerTerminal: function () {
+    var terminal = path.join(process.cwd(), 'resources', 'terminal');
+    var cmd = [terminal, `DOCKER_HOST=${'tcp://' + docker.host + ':2376'} DOCKER_CERT_PATH=${path.join(process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'], '.boot2docker/certs/boot2docker-vm')} DOCKER_TLS_VERIFY=1 $SHELL`];
+    util.exec(cmd).then(() => {});
+  },
+  handleClickReportIssue: function () {
+    util.exec(['open', 'https://github.com/kitematic/kitematic/issues/new']);
+  },
+  handleMouseEnterDockerTerminal: function () {
+    this.setState({
+      currentButtonLabel: 'Open terminal to use Docker CLI.'
+    });
+  },
+  handleMouseLeaveDockerTerminal: function () {
+    this.setState({
+      currentButtonLabel: ''
+    });
+  },
+  handleMouseEnterReportIssue: function () {
+    this.setState({
+      currentButtonLabel: 'Report issues or suggest feedbacks.'
+    });
+  },
+  handleMouseLeaveReportIssue: function () {
+    this.setState({
+      currentButtonLabel: ''
+    });
+  },
+  handleMouseEnterPreferences: function () {
+    this.setState({
+      currentButtonLabel: 'Change app preferences.'
+    });
+  },
+  handleMouseLeavePreferences: function () {
+    this.setState({
+      currentButtonLabel: ''
+    });
+  },
   render: function () {
     var sidebarHeaderClass = 'sidebar-header';
     if (this.state.sidebarOffset) {
       sidebarHeaderClass += ' sep';
     }
-    var updateNotification;
-    var updatePadding;
+    var updateWidget;
     if (this.state.updateAvailable) {
-      updateNotification = (
-        <div className="update-notification"><span className="text">Update Available</span><a className="btn btn-action small" onClick={this.handleAutoUpdateClick}>Update Now</a></div>
-      );
-      updatePadding = (
-        <div className="update-padding"></div>
+      updateWidget = (
+        <a className="btn btn-action small" onClick={this.handleAutoUpdateClick}>New Update</a>
       );
     }
     var container = this.getParams().name ? this.state.containers[this.getParams().name] : {};
@@ -117,8 +159,14 @@ var Containers = React.createClass({
             </section>
             <section className="sidebar-containers" onScroll={this.handleScroll}>
               <ContainerList containers={this.state.sorted} newContainer={this.state.newContainer} />
-              {updatePadding}
-              {updateNotification}
+              <div className="sidebar-buttons">
+                <div className="btn-label">{this.state.currentButtonLabel}</div>
+                <span className="btn-sidebar" onClick={this.handleClickDockerTerminal} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><RetinaImage src="docker-terminal.png"/></span>
+                <span className="btn-sidebar" onClick={this.handleClickReportIssue} onMouseEnter={this.handleMouseEnterReportIssue} onMouseLeave={this.handleMouseLeaveReportIssue}><RetinaImage src="report-issue.png"/></span>
+                <span className="btn-sidebar" onClick={this.handleClickPreferences} onMouseEnter={this.handleMouseEnterPreferences} onMouseLeave={this.handleMouseLeavePreferences}><RetinaImage src="preferences.png"/></span>
+                {updateWidget}
+              </div>
+              <div className="sidebar-buttons-padding"></div>
             </section>
           </div>
           <Router.RouteHandler container={container}/>

src/Main.js

@@ -51,7 +51,18 @@ Menu.setApplicationMenu(menu);
 
 document.onkeydown = function (e) {
   e = e || window.event;
+  var doPrevent;
   if (e.keyCode === 8) {
+    var d = e.srcElement || e.target;
+    if (d.tagName.toUpperCase() === 'INPUT' || d.tagName.toUpperCase() === 'TEXTAREA') {
+      doPrevent = d.readOnly || d.disabled;
+    } else {
+      doPrevent = true;
+    }
+  } else {
+    doPrevent = false;
+  }
+  if (doPrevent) {
     e.preventDefault();
   }
 };

src/Setup.react.js

@@ -52,7 +52,7 @@ var Setup = React.createClass({
       <div className="contents">
         <RetinaImage src={img} checkIfRetinaImgExists={false}/>
         <div className="detail">
-          <Radial progress={SetupStore.percent()} thick={true} gray={true}/>
+          <Radial progress={this.state.progress} thick={true} gray={true}/>
         </div>
       </div>
     );
@@ -86,8 +86,13 @@ var Setup = React.createClass({
             <h4>Setup Cancelled</h4>
             <h1>Couldn&#39;t Install Requirements</h1>
             <p>Kitematic didn&#39;t receive the administrative privileges required to install or upgrade VirtualBox &amp; Docker.</p>
+<<<<<<< HEAD
             <p>Please click retry. If VirtualBox is not installed, you can download &amp; install it manually from the <a onClick={this.handleOpenWebsite}>official Oracle website</a>.</p>
             <button className="btn btn-action" onClick={this.handleRetry}>Retry</button>
+=======
+            <p>Please retry or download &amp; install VirutalBox manually from the <a onClick={this.handleOpenWebsite}>official Oracle website</a>.</p>
+            <p><button className="btn btn-action" onClick={this.handleRetry}>Retry</button></p>
+>>>>>>> master
           </div>
         </div>
       </div>

styles/animation.less

@@ -34,3 +34,12 @@
     -webkit-transform: translateY(20px);
   }
 }
+
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

styles/header.less

@@ -19,6 +19,7 @@
     position: relative;
     top: 10px;
     left: 15px;
+    z-index: 1000;
     &:hover {
       .button-minimize.enabled {
         .at2x('minimize.png', 10px, 10px);

styles/left-panel.less

@@ -1,6 +1,7 @@
 /* Sidebar */
 
 .sidebar {
+  .fade-in();
   padding-top: 28px;
   background-color: white;
   margin: 0;
@@ -222,28 +223,34 @@
   }
 }
 
-/* Auto-Update */
+/* Sidebar Buttons */
 
-.update-notification {
+.sidebar-buttons {
   background-color: white;
+  width: 259px;
   opacity: 0.9;
   position: fixed;
   bottom: 0;
-  width: 259px;
-  padding: 10px;
-  color: @gray-normal;
-  font-size: 12px;
-  .text {
-    position: relative;
-    top: 3px;
+  padding: 15px;
+  padding-top: 5px;
+  z-index: 10000;
+  .btn-label {
+    color: @gray-lighter;
+    font-size: 10px;
+    height: 18px;
+  }
+  .btn-sidebar {
+    display: inline-block;
+    margin-right: 7px;
   }
   .btn {
     position: relative;
+    top: 1px;
     float: right;
   }
 }
 
-.update-padding {
+.sidebar-buttons-padding {
   position: relative;
-  height: 40px;
+  height: 62px;
 }

styles/mixins.less

@@ -28,3 +28,10 @@
   position: relative;
   overflow: hidden;
 }
+
+.fade-in() {
+  opacity: 0;
+  -webkit-animation: fadein ease-in 1;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-duration: 0.2s;
+}

styles/right-panel.less

@@ -1,4 +1,5 @@
 .details {
+  .fade-in();
   background-color: @color-background;
   margin: 0;
   padding: 0;

styles/setup.less

@@ -1,4 +1,5 @@
 .setup {
+  .fade-in();
   display: flex;
   height: 100%;
   width: 100%;