Adding first pass of build options

src/css/components/_overlay.scss

@@ -0,0 +1,27 @@
+.Overlay {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(#32292c, 0.8);
+	color: #f0f0f0;
+}
+
+	.Overlay-inner {
+		overflow-y: auto;
+		height: 100%;
+	}
+
+		.Overlay-content {
+			width: 600px;
+			margin-left: auto;
+			margin-right: auto;
+			display: table;
+			height: 100%;
+		}
+
+			.Overlay-contentInner {
+				display: table-cell;
+				vertical-align: middle;
+			}

src/css/main.scss

@@ -18,6 +18,7 @@
 @import "components/bar";
 @import "components/main-nav";
 @import "components/menu-icon";
+@import "components/overlay";
 @import "utilities/size";
 @import "utilities/alignment";
 @import "utilities/misc";

src/js/components/App.jsx

@@ -23,6 +23,7 @@ var MainNav = require('jsx-loader!./MainNav.jsx');
 var Search = require('jsx-loader!./Search.jsx');
 var FilterLabel = require('jsx-loader!./FilterLabel.jsx');
 var HomePage = require('jsx-loader!./HomePage.jsx');
+var BuildOptionsOverlay = require('jsx-loader!./BuildOptionsOverlay.jsx');
 
 var App = React.createClass({
 	mixins: [WithFlux],
@@ -47,7 +48,8 @@ var App = React.createClass({
 
 	getInitialState: function() {
 		return {
-			page: 'index'
+			page: 'index',
+			buildOverlayOpen: false
 		};
 	},
 
@@ -79,7 +81,7 @@ var App = React.createClass({
 
 		var pages = [];
 
-		if(this.state.page === 'detects') {
+		// if(this.state.page === 'detects') {
 			pages.push(
 				<DetectsPage
 					key="detects"
@@ -126,25 +128,27 @@ var App = React.createClass({
 					}
 				/>
 			);
-		}
+		// }
 
-		{this.state.page === 'index' &&
-			pages.push(
-				<HomePage key="home" onCTAClick={this._onCTAClick} />
-			);
-		}
+		// {this.state.page === 'index' &&
+		// 	pages.push(
+		// 		<HomePage key="home" onCTAClick={this._onCTAClick} />
+		// 	);
+		// }
+
+		// /nav={<MainNav page={this.state.page} onStartClick={this._onCTAClick} items={['Detects', 'Guide', 'News', 'Resources']} />}
 
 		return (
 			<div className="App">
 				<div className="App-header c-contrast">
 					<MainHeader
-						nav={<MainNav page={this.state.page} onStartClick={this._onCTAClick} items={['Detects', 'Guide', 'News', 'Resources']} />}
 						search={<Search searchValue={this.state.searchValue} />}
 						selectionCount={selectionCount}
 						detectCount={this.state.detectCount}
 						extraCount={this.state.extraCount}
 						apiCount={this.state.apiCount}
 						selectionOnly={this.state.selectionOnly}
+						onBuildBtnClick={this._onMainHeaderBuildBtnClick}
 					/>
 				</div>
 				<div className="App-main">
@@ -156,6 +160,11 @@ var App = React.createClass({
 
 					</div>
 				</div>
+				{this.state.buildOverlayOpen &&
+					<BuildOptionsOverlay
+						onClick={this._onBuildOptionsOverlayClick}
+					/>
+				}
 			</div>
 		);
 
@@ -232,6 +241,18 @@ var App = React.createClass({
 			});
 		}, 600);
 
+	},
+
+	_onMainHeaderBuildBtnClick: function() {
+		this.setState({
+			buildOverlayOpen: true
+		});
+	},
+
+	_onBuildOptionsOverlayClick: function() {
+		this.setState({
+			buildOverlayOpen: false
+		});
 	}
 });
 

src/js/components/BuildOptionsOverlay.jsx

@@ -0,0 +1,56 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react');
+var LayeredComponentMixin = require('../mixins/LayeredComponentMixin');
+
+var BuildOptionsOverlay = React.createClass({
+
+	mixins: [
+		LayeredComponentMixin
+	],
+
+	renderLayer: function() {
+		return (
+			<div className="Overlay" onClick={this.props.onClick}>
+				<div className="Overlay-inner">
+					<div className="Overlay-content" style={{pointerEvents: 'none'}}>
+						<div className="Overlay-contentInner" onClick={this._onContentClick}>
+							<div className="BoxSet" style={{pointerEvents: 'auto'}}>
+								<div className="BoxSet-item c-base">
+									<div className="Box t-body" style={{overflow: 'hidden'}}>
+										<div style={{'float': 'left'}}>Unminfied</div>
+										<div style={{'float': 'right'}}>(<a className="c-action" href="#">Download</a> | <a className="c-action" href="#">Copy to clipboard</a>)</div>
+									</div>
+								</div>
+								<div className="BoxSet-item c-base">
+									<div className="Box t-body" style={{overflow: 'hidden'}}>
+										<div style={{'float': 'left'}}>Minified</div>
+										<div style={{'float': 'right'}}>(<a className="c-action" href="#">Download</a> | <a className="c-action" href="#">Copy to clipboard</a>)</div>
+									</div>
+								</div>
+								<div className="BoxSet-item c-base">
+									<div className="Box t-body" style={{overflow: 'hidden'}}>
+										<div style={{'float': 'left'}}>Grunt configuration</div>
+										<div style={{'float': 'right'}}>(<a className="c-action" href="#">Download</a> | <a className="c-action" href="#">Copy to clipboard</a>)</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	},
+
+	_onContentClick: function(event) {
+		event.stopPropagation();
+	},
+
+	render: function() {
+		return (<span />);
+	}
+});
+
+module.exports = BuildOptionsOverlay;

src/js/components/MainHeader.jsx

@@ -101,7 +101,7 @@ var MainHeader = React.createClass({
 														</div>
 													</div>
 												</div>
-												<div className={cx({'Grid-cell': true, 'u-size0': !this.props.selectionCount, 'u-size1of2': this.props.selectionCount, 'OpenSide-item': true, 'u-fullHeight': true})}>
+												<div className={cx({'Grid-cell': true, 'u-size0': !this.props.selectionCount, 'u-size1of2': this.props.selectionCount, 'OpenSide-item': true, 'u-fullHeight': true})} onClick={this._onBuildBtnClick}>
 													<div className="c-btn u-fullHeight Btn u-textCenter">
 														<strong className="t-action t-label">Build</strong>
 													</div>
@@ -124,8 +124,11 @@ var MainHeader = React.createClass({
 
 	_onTypeClick: function(props) {
 		ResultActions.filterByType(props.type);
-	}
+	},
 
+	_onBuildBtnClick: function(event) {
+		this.props.onBuildBtnClick(event);
+	}
 });
 
 module.exports = MainHeader;

src/js/mixins/LayeredComponentMixin.js

@@ -0,0 +1,58 @@
+// From http://jsfiddle.net/LBAr8/
+
+/* Create a new "layer" on the page, like a modal or overlay.
+ *
+ * var LayeredComponent = React.createClass({
+ *     mixins: [LayeredComponentMixin],
+ *     render: function() {
+ *         // render like usual
+ *     },
+ *     renderLayer: function() {
+ *         // render a separate layer (the modal or overlay)
+ *     }
+ * });
+ */
+
+var React = require('react');
+
+var LayeredComponentMixin = {
+    componentDidMount: function() {
+        // Appending to the body is easier than managing the z-index of
+        // everything on the page.  It's also better for accessibility and
+        // makes stacking a snap (since components will stack in mount order).
+        this._layer = document.createElement('div');
+        document.body.appendChild(this._layer);
+        this._renderLayer();
+    },
+
+    componentDidUpdate: function() {
+        this._renderLayer();
+    },
+
+    componentWillUnmount: function() {
+        this._unrenderLayer();
+        document.body.removeChild(this._layer);
+    },
+
+    _renderLayer: function() {
+        // By calling this method in componentDidMount() and
+        // componentDidUpdate(), you're effectively creating a "wormhole" that
+        // funnels React's hierarchical updates through to a DOM node on an
+        // entirely different part of the page.
+        React.renderComponent(this.renderLayer(), this._layer);
+
+        if (this.layerDidMount) {
+            this.layerDidMount(this._layer);
+        }
+    },
+
+    _unrenderLayer: function() {
+        if (this.layerWillUnmount) {
+            this.layerWillUnmount(this._layer);
+        }
+
+        React.unmountComponentAtNode(this._layer);
+    }
+};
+
+module.exports = LayeredComponentMixin;