Refactored widget display logic.

src/components/ContainerHome.react.js

@@ -35,6 +35,18 @@ var ContainerHome = React.createClass({
     shell.openExternal('https://github.com/kitematic/kitematic/issues/new');
   },
 
+  showWeb: function () {
+    console.log(_.keys(this.props.ports));
+    return _.keys(this.props.ports).length > 0;
+  },
+  
+  showFolders: function () {
+    console.log('SUPETEST');
+    console.log(this.props.container.Volumes);
+    console.log(_.keys(this.props.container.Volumes).length);
+    return this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running;
+  },
+  
   render: function () {
     if (!this.props.container) {
       return;
@@ -88,43 +100,40 @@ var ContainerHome = React.createClass({
         );
       }
     } else {
-      if (this.props.defaultPort) {
+      var logWidget = (
+        <ContainerHomeLogs container={this.props.container}/>
+      );
+      var webWidget;
+      if (this.showWeb()) {
+        webWidget = (
+          <ContainerHomePreview ports={this.props.ports} defaultPort={this.props.defaultPort} />
+        );
+      }
+      var folderWidget;
+      if (this.showFolders()) {
+        folderWidget = (
+          <ContainerHomeFolders container={this.props.container} />
+        );
+      }
+      if (logWidget && !webWidget && !folderWidget) {
         body = (
           <div className="details-panel home">
             <div className="content">
-              <div className="left">
+              {logWidget}
-                <ContainerHomeLogs container={this.props.container}/>
-              </div>
-              <div className="right">
-                <ContainerHomePreview ports={this.props.ports} defaultPort={this.props.defaultPort} />
-                <ContainerHomeFolders container={this.props.container} />
-              </div>
             </div>
           </div>
         );
       } else {
-        var right;
-        if (_.keys(this.props.ports) > 0) {
-          right = (
-            <div className="right">
-              <ContainerHomePreview  ports={this.props.ports} defaultPort={this.props.defaultPort} />
-              <ContainerHomeFolders container={this.props.container} />
-            </div>
-          );
-        } else {
-          right = (
-            <div className="right">
-              <ContainerHomeFolders container={this.props.container} />
-            </div>
-          );
-        }
         body = (
           <div className="details-panel home">
             <div className="content">
               <div className="left">
-                <ContainerHomeLogs container={this.props.container}/>
+                {logWidget}
+              </div>
+              <div className="right">
+                {webWidget}
+                {folderWidget}
               </div>
-              {right}
             </div>
           </div>
         );

src/components/ContainerHomeFolders.react.js

@@ -73,23 +73,21 @@ var ContainerHomeFolder = React.createClass({
       );
     });
 
-    if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) {
+    return (
-      return (
+      <div className="folders wrapper">
-        <div className="folders wrapper">
+        <div className="widget">
-          <div className="widget">
+          <div className="top-bar">
-            <div className="top-bar">
+            <div className="text">Edit Files</div>
-              <div className="text">Edit Files</div>
+            <div className="settings" onClick={this.handleClickChangeFolders}>
-            </div>
+              <span className="icon icon-preferences"></span>
-            <div className="folders-list">
-              {folders}
             </div>
           </div>
-          <div className="subtext" onClick={this.handleClickChangeFolders}>Change Folders</div>
+          <div className="folders-list">
+            {folders}
+          </div>
         </div>
-      );
+      </div>
-    } else {
+    );
-      return false;
-    }
   }
 });
 

src/components/ContainerHomePreview.react.js

@@ -47,18 +47,22 @@ var ContainerHomePreview = React.createClass({
 
   render: function () {
     var preview;
+    var tempDisp = (
+      <div className="frame-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
+    );
     if (this.props.defaultPort) {
       var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'});
       preview = (
         <div className="web-preview wrapper">
           <div className="widget">
             <div className="top-bar">
-              <div className="text">WEB PREVIEW</div>
+              <div className="text">Web Preview</div>
+              <div className="settings" onClick={this.handleClickNotShowingCorrectly}>
+                <span className="icon icon-preferences"></span>
+              </div>
             </div>
             {frame}
-            <div className="frame-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
           </div>
-          <div className="subtext" onClick={this.handleClickNotShowingCorrectly}>Not showing correctly?</div>
         </div>
       );
     } else {
@@ -78,6 +82,9 @@ var ContainerHomePreview = React.createClass({
           <div className="widget">
             <div className="top-bar">
               <div className="text">IP & PORTS</div>
+              <div className="settings" onClick={this.handleClickNotShowingCorrectly}>
+                <span className="icon icon-preferences"></span>
+              </div>
             </div>
             <p>You can access this container using the following IP address and port:</p>
             <div className="table ports">

styles/container-home.less

@@ -15,21 +15,14 @@
       width: 40%;
       flex-direction: column;
     }
-    .subtext {
-      text-align: right;
-      color: @gray-lighter;
-      margin-top: 2px;
-      transition: all 0.25s;
-      &:hover {
-        color: darken(@gray-lightest, 10%);
-      }
-    }
     .web-preview {
-      margin-bottom: 50px;
+      margin-bottom: 1rem;
       .widget {
         .widget-style();
+        .top-bar {
+          .widget-bar-style();
+        }
         background-color: white;
-        padding: 0.5rem;
         width: 100%;
         height: 100%;
         p {
@@ -90,6 +83,7 @@
           }
         }
         .frame {
+          padding-top: 8rem;
           border: 0;
           position: absolute;
           left: -100%;
@@ -132,14 +126,16 @@
           .widget-bar-style();
           background-color: darken(@gray-darkest, 3%);
           border-bottom: 1px solid rgba(255,255,255,0.1);
-          color: white;
+          .text {
+            color: white;
+          }
         }
         height: 100%;
         .logs {
           background-color: @gray-darkest;
           color: @gray-lightest;
           font-family: @font-code;
-          font-size: 9px;
+          font-size: 10px;
           white-space: pre-wrap;
           -webkit-user-select: text;
           padding: 1.2rem;
@@ -189,6 +185,9 @@
             display: flex;
             padding: 1rem;
             border-bottom: 1px solid @color-divider;
+            &:last-child {
+              border-bottom: none;
+            }
             &:hover {
               background-color: @color-box-button;
             }

styles/mixins.less

@@ -31,13 +31,30 @@
 
 .widget-bar-style() {
   height: 40px;
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: 500;
-  padding: 1.1rem;
   background-color: white;
-  color: @gray-light;
   border-bottom: 1px solid @color-divider;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  z-index: 99999;
+  .text {
+    flex: 1 auto;
+    padding: 1.1rem;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 500;
+    color: @gray-light;
+  }
+  .settings {
+    flex: 0 auto;
+    height: 40px;
+    width: 40px;
+    align-self: flex-end;
+    border-left: 1px solid @color-divider;
+    padding-top: 0.3rem;
+    padding-left: 0.9rem;
+    .box-button();
+  }
 }
 
 .fade-in() {
@@ -48,7 +65,7 @@
 }
 
 .box-button {
-  transition: all 140ms;
+  transition: all 100ms;
   color: @gray-light;
   font-size: 10px;
   font-weight: 500;