builds list improvements

static/css/sources/common/variables.less

@@ -1 +1 @@
-@font-size-base:          13px;
+@font-size-base: 14px;

static/css/sources/components/builds.less

@@ -1,5 +1,7 @@
 .build {
-	padding: 25px;
+	.clearfix;
+	padding: 15px;
+	margin-bottom: 3px;
 
 	&__in-progress {
 		background: lighten(@brand-info, 40%);
@@ -7,4 +9,9 @@
 	&__done {
 		background: lighten(@brand-success, 50%);
 	}
+
+	&_info {
+		display: inline-block;
+		margin-right: 10px;
+	}
 }

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

@@ -1,20 +1,48 @@
 mixin statusText(build)
-	span #
-	span= build.id
-	span 
 	if build.status === 'in-progress'
-		span current step is: 
+		span in progress
-		span= build.currentStep
 
 	if build.status === 'queued'
-		span build queued
+		span queued
 
 	if build.status === 'done'
-		span build done
+		span done
+
+- var build = this.props.build;
 
 .build(class="build__#{build.status}")
 	.pull-right
-		span= build.project.name
+		div
+			a(href="javascript:void(0);", onClick=this.onBuildSelect(build.id), style={marginRight: '5px'}) show console
 	.build_header
-		+ statusText(build)
+		span #
-	a.pull-right(href="javascript:void(0);", onClick=onBuildSelect(build.id), style={marginRight: '5px'}) show console output
+		span= build.id
+		span 
+		a(href="javascript:void(0)")= build.project.name
+	div
+		if build.scm
+			span.build_info
+				i.fa.fa-fw.fa-code-fork
+				span= build.scm.rev.id
+
+			span.build_info
+				i.fa.fa-fw.fa-comment-o
+				| 
+				span= build.scm.rev.comment
+
+		if build.endDate
+			span.build_info
+				i.fa.fa-fw.fa-clock-o
+				| builded at 
+				DateTime(date=new Date(build.createDate))
+		else
+			if build.startDate
+				span.build_info
+					i.fa.fa-fw.fa-clock-o
+					| started at 
+					DateTime(date=new Date(build.createDate))
+			else
+				span.build_info
+					i.fa.fa-fw.fa-clock-o
+					| queued at 
+					DateTime(date=new Date(build.createDate))

static/js/app/components/builds/item.js

@@ -1,19 +1,20 @@
 'use strict';
 
 define([
-	'react', 'app/actions/build', 'templates/app/components/builds/item'
+	'react', 'app/actions/build', 'templates/app/components/builds/item',
-], function(React, BuildActions, template) {
+	'app/components/common/index'
+], function(React, BuildActions, template, CommonComponents) {
+	template = template.locals({
+		DateTime: CommonComponents.DateTime
+	});
+	console.log(CommonComponents.DateTime);
+
 	var Component = React.createClass({
 		onBuildSelect: function(buildId) {
 			console.log('on build select');
 			BuildActions.readConsoleOutput(buildId);
 		},
-		render: function() {
+		render: template
-			return template({
-				build: this.props.build,
-				onBuildSelect: this.onBuildSelect
-			});
-		}
 	});
 
 	return Component;

static/js/app/components/common/dateTime/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+define([
+	'react',
+	'templates/app/components/common/dateTime/template'
+], function(React, template) {
+	var Component = React.createClass({
+		propTypes: {
+			date: React.PropTypes.instanceOf(Date)
+		},
+		render: template
+	});
+
+	return Component;
+});

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

@@ -0,0 +1 @@
+span= this.props.date.toLocaleDateString() + ' ' + this.props.date.toLocaleTimeString()

static/js/app/components/common/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+define([
+	'./dateTime/index'
+], function(DateTime) {
+	return {
+		DateTime: DateTime
+	};
+});

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

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