new project selector

static/css/sources/components/projects.less

@@ -0,0 +1,43 @@
+.projects-selector {
+	position: relative;
+	width: 300px;
+	color: white;
+	cursor: pointer;
+	&_preview {
+		color: rgba(255, 255, 255, 0.5);
+		padding: 5px 25px 5px 5px;
+		&_text {
+			padding-left: 10px;
+		}
+	}
+
+	&_input {
+		width: 80%;
+		padding-bottom: 3px;
+		padding-left: 10px;
+		border: none;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+		background: transparent;
+		outline: none;
+	}
+
+	&_items {
+		position: absolute;
+		width: 100%;
+		padding: 15px 5px 5px;
+		left: 0;
+		background: #2c3e50;
+		list-style: none;
+	}
+
+	&_item {
+		padding: 5px 10px;
+		&_run {
+			color: rgba(255, 255, 255, 0.5);
+			&:hover {
+				color: white;
+				text-decoration: none;
+			}
+		}
+	}
+}

static/js/app/components/app/component.js

@@ -9,7 +9,6 @@ define([
 	'templates/app/components/app/template'
 ], function(React, ProjectActions, BuildActions, Projects, Builds, template) {
 	template = template.locals({
-		ProjectsList: Projects.List,
 		BuildsList: Builds.List
 	});
 

static/js/app/components/app/template.jade

@@ -1,8 +1,5 @@
 .main-row
 	.row
-		.col-md-4.col-md-push-8
-			h2 Projects
-			ProjectsList()
-
-		.col-md-8.col-md-pull-4
+		.col-md-8
+			h2 Active builds
 			BuildsList()

static/js/app/components/builds/list.jade

@@ -1,4 +1,6 @@
 - console.log('builds', items)
 .builds
+	if !items.length
+		p Build queue is empty
 	each build, index in items
 		Item(build=build, key=build.id)

static/js/app/components/header/component.js

@@ -3,10 +3,12 @@
 define([
 	'react',
 	'react-router',
+	'app/components/projects/selector/index',
 	'templates/app/components/header/template'
-], function(React, Router, template) {
+], function(React, Router, ProjectsSelector, template) {
 	template = template.locals({
-		Link: Router.Link
+		Link: Router.Link,
+		ProjectsSelector: ProjectsSelector
 	});
 
 	var Component = React.createClass({

static/js/app/components/header/template.jade

@@ -2,7 +2,6 @@
 	.container-fluid
 		.navbar-header
 			a.navbar-brand(href="/")
-				span Company Brand Name CI
-		form.navbar-left.navbar-form
-			.form-group
-				input.form-control(placeholder="Start typing project name...", style={width: '220px'})
+				span NCI
+		.navbar-left.navbar-form(style={paddingTop: "11px"})
+			ProjectsSelector()

static/js/app/components/projects/index.js

@@ -1,11 +1,9 @@
 'use strict';
 
 define([
-	'app/components/projects/item',
-	'app/components/projects/list'
-], function(Item, List) {
+	'app/components/projects/selector/index'
+], function(Selector) {
 	return {
-		Item: Item,
-		List: List
+		Selector: Selector
 	};
 });

static/js/app/components/projects/item.jade

@@ -1,3 +0,0 @@
-li.list-group-item
-	a.pull-right(href="javascript:void(0);", onClick=onProjectSelect(item.name)) start build
-	span= item.name

static/js/app/components/projects/item.js

@@ -1,19 +0,0 @@
-'use strict';
-
-define([
-	'react', 'app/actions/project', 'templates/app/components/projects/item',
-], function(React, ProjectActions, template) {
-	var Component = React.createClass({
-		onProjectSelect: function(projectName) {
-			ProjectActions.run(projectName)
-		},
-		render: function() {
-			return template({
-				item: this.props.item,
-				onProjectSelect: this.onProjectSelect
-			});
-		}
-	});
-
-	return Component;
-});

static/js/app/components/projects/list.jade

@@ -1,3 +0,0 @@
-ul.list-group
-	each project, index in items
-		Item(item=project, key=project.name)

static/js/app/components/projects/list.js

@@ -1,32 +0,0 @@
-'use strict';
-
-define([
-	'react',
-	'reflux',
-	'./item', 
-	'app/stores/project',
-	'templates/app/components/projects/list'
-], function(React, Reflux, Item, projectStore, template) {
-	var Component = React.createClass({
-		mixins: [Reflux.ListenerMixin],
-		componentDidMount: function() {
-			this.listenTo(projectStore, this.updateItems);
-		},
-		updateItems: function(items) {
-			this.setState({items: items});
-		},
-		render: function() {
-			return template({
-				Item: Item,
-				items: this.state.items
-			});
-		},
-		getInitialState: function() {
-			return {
-				items: []
-			};
-		}
-	});
-
-	return Component;
-});

static/js/app/components/projects/selector/index.jade

@@ -0,0 +1,23 @@
+.projects-selector(href="javascript:void(0);")
+	if !this.state.showSearch
+		span.projects-selector_preview(onClick=this.onSearchProject)
+			i.fa.fa-fw.fa-bars
+			span.projects-selector_preview_text Select a project...
+	else
+		input.projects-selector_input(
+			type="text",
+			value=this.state.searchQuery,
+			onChange=this.onSearchChange,
+			ref=this.onInputMount,
+			onBlur=this.onBlurSearch
+		)
+		ul.projects-selector_items
+			each project in this.state.projects
+				li.projects-selector_item.row(key=project.name)
+					.col-md-8
+						p= project.name
+					.col-md-4.text-small.text-right
+						a.projects-selector_item_run(href="javascript:void(0);", onMouseDown=this.onRunProject(project.name))
+							i.fa.fa-fw.fa-play
+
+

static/js/app/components/projects/selector/index.js

@@ -0,0 +1,45 @@
+'use strict';
+
+define([
+	'react', 'reflux', 'app/actions/project',
+	'app/stores/project',
+	'templates/app/components/projects/selector/index'
+], function(React, Reflux, ProjectActions, projectsStore, template) {
+	return React.createClass({
+		mixins: [Reflux.ListenerMixin],
+		componentDidMount: function() {
+			this.listenTo(projectsStore, this.updateItems);
+		},
+		getInitialState: function() {
+			return {
+				showSearch: false
+			};
+		},
+		onRunProject: function(projectName) {
+			ProjectActions.run(projectName)
+			this.setState({showSearch: false});
+		},
+		updateItems: function(projects) {
+			console.log(projects);
+			this.setState({projects: projects});
+		},
+		onSearchProject: function() {
+			this.setState({showSearch: true});
+		},
+		onInputMount: function(component) {
+			var node = React.findDOMNode(component);
+			if (node) {
+				node.focus();
+			}
+		},
+		onBlurSearch: function() {
+			this.setState({showSearch: false});
+		},
+		onSearchChange: function(event) {
+			var query = event.target.value;
+			this.setState({searchQuery: query});
+			ProjectActions.readAll({nameQuery: query});
+		},
+		render: template,
+	});
+});