Improved container home page.

src/ContainerHome.react.js

@@ -3,6 +3,7 @@ var $ = require('jquery');
 var React = require('react/addons');
 var RetinaImage = require('react-retina-image');
 var path = require('path');
+var exec = require('exec');
 
 var ContainerHome = React.createClass({
   handleResize: function () {
@@ -33,6 +34,18 @@ var ContainerHome = React.createClass({
       this._oldHeight = parent[0].scrollHeight - parent.height();
     }
   },
+  handleClickFolder: function (path) {
+    exec(['open', path], function (err) {
+      if (err) { throw err; }
+    });
+  },
+  handleClickPreview: function () {
+    if (this.props.defaultPort) {
+      exec(['open', this.props.ports[this.props.defaultPort].url], function (err) {
+        if (err) { throw err; }
+      });
+    }
+  },
   render: function () {
     var preview;
     if (this.props.defaultPort) {
@@ -40,19 +53,22 @@ var ContainerHome = React.createClass({
         <div className="web-preview">
           <h4>Web Preview</h4>
           <div className="widget">
-            <iframe name="disable-x-frame-options" src={this.props.ports[this.props.defaultPort].url}></iframe>
+            <iframe sandbox="allow-same-origin allow-scripts" src={this.props.ports[this.props.defaultPort].url} scrolling="no"></iframe>
+            <div className="iframe-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
           </div>
+          <div className="subtext">Not showing correctly?</div>
         </div>
       );
     }
     console.log(this.props.container.Volumes);
-    var folders = _.map(this.props.container.Volumes, function (val, key) {
+    var self = this;
+    var folders = _.map(self.props.container.Volumes, function (val, key) {
       var firstFolder = key.split(path.sep)[1];
       if (!val || val.indexOf(process.env.HOME) === -1) {
         return;
       } else {
         return (
-          <div key={key} className="folder">
+          <div key={key} className="folder" onClick={self.handleClickFolder.bind(self, val)}>
             <RetinaImage src="folder.png" />
             <div className="text">{firstFolder}</div>
           </div>
@@ -70,6 +86,7 @@ var ContainerHome = React.createClass({
               <h4>Logs</h4>
               <div className="widget">
                 {this.props.logs}
+                <div className="mini-logs-overlay"><span className="icon icon-scale-spread-1"></span><div className="text">Full Logs</div></div>
               </div>
             </div>
             <div className="folders">
@@ -77,6 +94,7 @@ var ContainerHome = React.createClass({
               <div className="widget">
                 {folders}
               </div>
+              <div className="subtext">Change Folders</div>
             </div>
           </div>
         </div>

styles/containers.less

@@ -629,6 +629,7 @@
         background-color: #FFF;
         &.home {
           background-color: #F9F9F9;
+          overflow: hidden;
           .content {
             display: flex;
             flex: 1 auto;
@@ -639,17 +640,54 @@
               flex-direction: column;
               .web-preview {
                 margin-right: 30px;
+                .subtext {
+                  text-align: right;
+                  color: @gray-lightest;
+                  margin-top: 2px;
+                }
                 .widget {
                   background-color: white;
                   width: 100%;
                   height: 100%;
                   border-radius: 4px;
                   border: 1px solid @gray-lightest;
+                  position: relative;
                   iframe {
                     border: 0;
                     border-radius: 4px;
+                    /*width: 100%;
+                    height: 100%;*/
+                    position: relative;
+                    top: -50%;
+                    left: -50%;
+                    width: 200%;
+                    height: 200%;
+                    transform: scale(0.5);
+                  }
+                  .iframe-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
                     width: 100%;
                     height: 100%;
+                    z-index: 100;
+                    color: transparent;
+                    transition: all 0.25s;
+                    .icon {
+                      margin-top: 40%;
+                      display: block;
+                      font-size: 60px;
+                      text-align: center;
+                    }
+                    .text {
+                      font-size: 20px;
+                      text-align: center;
+                    }
+                    &:hover {
+                      color: white;
+                      background-color: @gray-darkest;
+                      opacity: 0.75;
+                    }
                   }
                 }
               }
@@ -660,6 +698,7 @@
               .mini-logs {
                 margin-bottom: 50px;
                 .widget {
+                  position: relative;
                   border-radius: 4px;
                   border: 1px solid @gray-lightest;
                   background-color: @gray-darkest;
@@ -673,9 +712,40 @@
                   p {
                     margin-bottom: 0px;
                   }
+                  .mini-logs-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 100;
+                    color: transparent;
+                    transition: all 0.25s;
+                    .icon {
+                      margin-top: 25%;
+                      display: block;
+                      font-size: 60px;
+                      text-align: center;
+                    }
+                    .text {
+                      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+                      font-size: 20px;
+                      text-align: center;
+                    }
+                    &:hover {
+                      color: white;
+                      background-color: @gray-darkest;
+                      opacity: 0.75;
+                    }
+                  }
                 }
               }
               .folders {
+                .subtext {
+                  text-align: right;
+                  color: @gray-lightest;
+                  margin-top: 2px;
+                }
                 .widget {
                   padding: 20px 10px;
                   background-color: white;