Add active container to ContainerStore

app/ContainerModal.react.js

@@ -5,7 +5,10 @@ var RetinaImage = require('react-retina-image');
 var $ = require('jquery');
 var ContainerStore = require('./ContainerStore');
 
+var Navigation = Router.Navigation;
+
 var ContainerModal = React.createClass({
+  mixins: [Navigation],
   getInitialState: function () {
     return {
       query: '',
@@ -36,7 +39,10 @@ var ContainerModal = React.createClass({
   },
   handleClick: function (event) {
     var name = event.target.getAttribute('name');
+    var self = this;
     ContainerStore.create(name, 'latest', function (err, containerName) {
+      ContainerStore.setActive(containerName);
+      self.props.onRequestHide();
     });
   },
   render: function () {

app/ContainerStore.js

@@ -9,6 +9,7 @@ var _ = require('underscore');
 var ContainerStore = assign(EventEmitter.prototype, {
   _containers: {},
   _logs: {},
+  _active: null,
   init: function (callback) {
     // TODO: Load cached data from db on loading
 
@@ -212,6 +213,13 @@ var ContainerStore = assign(EventEmitter.prototype, {
       // Pull image
       // When image is done pulling then
   },
+  setActive: function (containerName) {
+    this._active = containerName;
+    this.emit('change');
+  },
+  active: function () {
+    return this._active;
+  },
   logs: function (containerName) {
     return logs[containerId];
   },

app/Containers.react.js

@@ -18,15 +18,18 @@ var ContainerList = React.createClass({
   mixins: [Navigation],
   getInitialState: function () {
     return {
+      active: null,
       containers: []
     };
   },
   componentDidMount: function () {
     this.update();
-    ContainerStore.addChangeListener(this.update);
-    if (this.state.active) {
-      this.transitionTo('container', {name: this.state.active});
+    if (this.state.containers.length > 0) {
+      var name = this.state.containers[0].Name.replace('/', '');
+      active = name;
+      ContainerStore.setActive(name);
     }
+    ContainerStore.addChangeListener(this.update);
   },
   componentWillMount: function () {
     this._start = Date.now();
@@ -38,17 +41,18 @@ var ContainerList = React.createClass({
     var containers = _.values(ContainerStore.containers()).sort(function (a, b) {
       return a.Name.localeCompare(b.Name);
     });
-    var state = {};
-    if (!this.state.active && containers.length > 0) {
-      state.active = containers[0].Name.replace('/', '');
+
+    this.setState({
+      active: ContainerStore.active(),
+      containers: containers
+    });
+
+    if (ContainerStore.active()) {
+      this.transitionTo('container', {name: ContainerStore.active()});
     }
-    state.containers = containers;
-    this.setState(state);
   },
   handleClick: function (containerId) {
-    this.setState({
-      active: containerId
-    });
+    ContainerStore.setActive(name);
   },
   render: function () {
     var self = this;

app/styles/main.less

@@ -0,0 +1,206 @@
+@import "bootstrap/bootstrap.less";
+@import "clearsans.less";
+@import "theme.less";
+@import "icons.less";
+@import "retina.less";
+@import "setup.less";
+@import "radial.less";
+@import "header.less";
+@import "containers.less";
+
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  font-family: 'Clear Sans', sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 13px;
+}
+
+::-webkit-scrollbar-track {
+  margin: 3px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  background: none;
+}
+
+::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  width: 7px;
+  border-radius: 8px;
+  background-color: rgba(0,0,0,0.2);
+}
+
+.create-modal {
+  @modal-padding: 32px;
+  @search-width: 372px;
+  @custom-width: 270px;
+  .modal-dialog {
+    margin-top: 8%;
+    width: calc(@modal-padding + @search-width + 2 * @modal-padding + @custom-width);
+  }
+  .modal-content {
+    //box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
+    border: none; //1px solid #ccc;
+    height: 610px;
+  }
+  .modal-body {
+    display: flex;
+    flex-direction: row;
+    padding: 32px 32px;
+
+    .title {
+      color: #CCD3D5;
+      font-weight: 400;
+      font-size: 13px;
+    }
+
+    aside.custom {
+      flex: 0 auto;
+      padding-left: 32px;
+      min-width: 270px;
+    }
+
+    section.search {
+      flex: 0 auto;
+      min-width: 404px;
+      padding-right: 32px;
+      border-right: 1px solid #eee;
+
+      .question {
+        a {
+          color: #CCD3D5;
+        }
+        font-size: 10px;
+        text-align: right;
+      }
+
+      input {
+        border-radius: 20px;
+        font-size: 13px;
+        height: 38px;
+        padding: 8px 16px;
+        font-weight: 400;
+        color: #666;
+
+        &:focus {
+          box-shadow: none;
+          border-color: #bbb;
+        }
+
+        &::-webkit-input-placeholder {
+          color: #ddd;
+          font-weight: 300;
+        }
+      }
+
+      .results {
+        overflow: auto;
+
+        .title {
+          margin-top: 16px;
+        }
+
+        ul {
+          list-style: none;
+          color: #555;
+          padding: 0;
+
+          li {
+            display: flex;
+            flex-direction: row;
+            margin: 12px;
+            border-bottom: 1px solid #eee;
+            .info {
+              .name {
+                max-width: 278px;
+                img {
+                  margin-right: 6px;
+                  margin-left: 2px;
+                }
+                font-size: 16px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .stars {
+                color: #A7A7A7;
+                margin-top: 2px;
+
+                .star-count {
+                  font-size: 10px;
+                  display: inline-block;
+                  position: relative;
+                  top: -3px;
+                  left: 1px;
+                  height: 17px;
+                }
+
+                .icon {
+                  overflow: hidden;
+                  display: inline-block;
+                  font-size: 15px;
+                  height: 15px;
+                }
+              }
+              flex: 0 auto;
+            }
+            .action {
+              text-align: right;
+              flex: 1 auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.modal-backdrop.in {
+  background: rgba(227,230,230,0.95);
+  opacity: 1;
+  height: 100%;
+}
+
+@-webkit-keyframes translatedownload {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes translatewave {
+  from {
+    -webkit-transform: translateX(0px);
+  }
+  to {
+    -webkit-transform: translateX(20px);
+  }
+}
+
+@-webkit-keyframes translatedownload {
+  0% {
+    -webkit-transform: translateY(6px);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+    -webkit-transform: translateY(6px);
+  }
+  50% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+  }
+}

app/styles/theme.less

@@ -24,7 +24,7 @@
 .btn-styles(@btn-color: #555) {
   .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
   background-repeat: repeat-x;
-  border-color: darken(@btn-color, 14%);
+  // border-color: darken(@btn-color, 14%);
 
   &:hover,
   &:focus  {

app/styles/variables.less

@@ -1,4 +1,4 @@
-@brand-primary: #49CEF2;
+@brand-primary:         #24B8EB;
 @brand-action:          #49CEF2;
 @brand-positive:        #3AD86D;
 @brand-negative:        #F74B1F;