diff --git a/static/css/sources/common/variables.less b/static/css/sources/common/variables.less index 4714151..9d6b776 100644 --- a/static/css/sources/common/variables.less +++ b/static/css/sources/common/variables.less @@ -1 +1 @@ -@font-size-base: 13px; +@font-size-base: 14px; diff --git a/static/css/sources/components/builds.less b/static/css/sources/components/builds.less index 02f3917..67925c8 100644 --- a/static/css/sources/components/builds.less +++ b/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; + } } diff --git a/static/js/app/components/builds/item.jade b/static/js/app/components/builds/item.jade index 48a8ce2..15e14db 100644 --- a/static/js/app/components/builds/item.jade +++ b/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= build.currentStep + span in progress 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) - a.pull-right(href="javascript:void(0);", onClick=onBuildSelect(build.id), style={marginRight: '5px'}) show console output + span # + 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)) diff --git a/static/js/app/components/builds/item.js b/static/js/app/components/builds/item.js index 8a1261c..019e4f2 100644 --- a/static/js/app/components/builds/item.js +++ b/static/js/app/components/builds/item.js @@ -1,19 +1,20 @@ 'use strict'; define([ - 'react', 'app/actions/build', 'templates/app/components/builds/item' -], function(React, BuildActions, template) { + 'react', 'app/actions/build', 'templates/app/components/builds/item', + '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() { - return template({ - build: this.props.build, - onBuildSelect: this.onBuildSelect - }); - } + render: template }); return Component; diff --git a/static/js/app/components/common/dateTime/index.js b/static/js/app/components/common/dateTime/index.js new file mode 100644 index 0000000..54de4d4 --- /dev/null +++ b/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; +}); diff --git a/static/js/app/components/common/dateTime/template.jade b/static/js/app/components/common/dateTime/template.jade new file mode 100644 index 0000000..016cea4 --- /dev/null +++ b/static/js/app/components/common/dateTime/template.jade @@ -0,0 +1 @@ +span= this.props.date.toLocaleDateString() + ' ' + this.props.date.toLocaleTimeString() diff --git a/static/js/app/components/common/index.js b/static/js/app/components/common/index.js new file mode 100644 index 0000000..2377a30 --- /dev/null +++ b/static/js/app/components/common/index.js @@ -0,0 +1,9 @@ +'use strict'; + +define([ + './dateTime/index' +], function(DateTime) { + return { + DateTime: DateTime + }; +}); diff --git a/static/js/app/components/projects/item.js b/static/js/app/components/projects/item.js index 80d15c1..60ac47a 100644 --- a/static/js/app/components/projects/item.js +++ b/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) {