From 63062399e3c9fee87ec8ba480be3fe237f55ccd3 Mon Sep 17 00:00:00 2001
From: Jeffrey Morgan <jmorganca@gmail.com>
Date: Tue, 20 Jan 2015 21:49:32 -0500
Subject: [PATCH] Containers

---
 app/Containers.react.js | 66 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 app/Containers.react.js

diff --git a/app/Containers.react.js b/app/Containers.react.js
new file mode 100644
index 0000000000..7b118559fc
--- /dev/null
+++ b/app/Containers.react.js
@@ -0,0 +1,66 @@
+var React = require('react/addons');
+var Router = require('react-router');
+var Modal = require('react-bootstrap/Modal');
+var RetinaImage = require('react-retina-image');
+var ModalTrigger = require('react-bootstrap/ModalTrigger');
+var ContainerModal = require('./ContainerModal.react');
+var ContainerStore = require('./ContainerStore');
+var ContainerList = require('./ContainerList.react');
+var Header = require('./Header.react');
+var async = require('async');
+var _ = require('underscore');
+var docker = require('./docker');
+var $ = require('jquery');
+
+var Link = Router.Link;
+var RouteHandler = Router.RouteHandler;
+
+var Containers = React.createClass({
+  getInitialState: function () {
+    return {
+      sidebarOffset: 0
+    };
+  },
+  handleScroll: function (e) {
+    if (e.target.scrollTop > 0 && !this.state.sidebarOffset) {
+      this.setState({
+        sidebarOffset: e.target.scrollTop
+      });
+    } else if (e.target.scrollTop === 0 && this.state.sidebarOffset) {
+      this.setState({
+        sidebarOffset: 0
+      });
+    }
+  },
+  render: function () {
+    var sidebarHeaderClass = 'sidebar-header';
+    if (this.state.sidebarOffset) {
+      sidebarHeaderClass += ' sep';
+    }
+    return (
+      <div className="containers">
+        <Header/>
+        <div className="containers-body">
+          <div className="sidebar">
+            <section className={sidebarHeaderClass}>
+              <h3>containers</h3>
+              <div className="create">
+                <ModalTrigger modal={<ContainerModal/>}>
+                  <div className="wrapper">
+                    <span className="icon icon-add-3"></span>
+                  </div>
+                </ModalTrigger>
+              </div>
+            </section>
+            <section className="sidebar-containers" onScroll={this.handleScroll}>
+              <ContainerList/>
+            </section>
+          </div>
+          <RouteHandler/>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = Containers;