From a6d6e40f9c6641840caecc7839cf81895c1a729e Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 11:08:38 +0200 Subject: [PATCH 1/8] Initial version of a new build header. Based on @Juice10's original designs at travis-ci/travis-assets#24. --- assets/scripts/app/templates/builds/show.hbs | 28 +++++++ assets/styles/main/summary.sass | 78 ++++++++++++++++++++ 2 files changed, 106 insertions(+) diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs index 325cfef2..d17173a9 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/assets/scripts/app/templates/builds/show.hbs @@ -1,6 +1,34 @@ {{#if loading}} Loading {{else}} +
+
+
+ #{{build.number}} {{build.state}} +
+ +
+ ran for {{formatDuration build.duration}} +
+ +
+ {{formatTime build.finishedAt}} +
+
+ +
+ {{build.commit.branch}} +
+ - +
+ {{formatMessage build.commit.subject repoBinding=build.repo}} +
+ + 
+{{formatMessage build.commit.body repoBinding=build.repo pre=true}}
+
+
+
Build
diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index 783d74a5..93b6bfdc 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -1,5 +1,83 @@ @import "_mixins/all" +.green .build-status + background-color: #0d8136 + +.yellow .build-status + background-color: #e7d700 + +.red .build-status + background-color: #e10000 + +.gray .build-status + background-color: #a8a8a9 + +#new-summary + @include clearfix + @include border-radius(5px) + width: 100% + background-color: #fafafa + min-height: 30px + padding: 5px 15px + margin-bottom: 20px + + .branch + font-weight: bold + font-size: 16px + max-width: 200px + display: inline-block + margin-top: 10px + overflow: hide + + .subject + display: inline + font-size: 15px + overflow: hide + margin-top: 10px + + .body + min-width: 500px + display: block + min-height: 30px + font-size: 12px + font-family: Monaco, 'Liberation Mono', Courier, monospace + margin-bottom: 0px + + .build-status + @include border-radius(4px) + float: right + min-height: 30px + min-width: 90px + color: white + padding-top: 5px + padding-left: 10px + padding-right: 10px + font-size: 16px + text-align: center + + .runtime + float: right + font-size: 11px + display: block + width: 100% + text-align: right + line-height: 13px + margin-top: 5px + + .finished + float: right + font-size: 11px + width: 100% + text-align: right + line-height: 20px + + .right + margin-top: 10px + float: right + width: 150px + font-size: 11px + margin-right: 30px + #summary margin: 0 0 0 12px @include clearfix From 4554ca3c0bc16e7a1e9b3d8c408452c78f6d418a Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 11:20:06 +0200 Subject: [PATCH 2/8] Underline links in the commit body. --- assets/styles/main/summary.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index 93b6bfdc..b6dc773d 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -42,6 +42,9 @@ font-size: 12px font-family: Monaco, 'Liberation Mono', Courier, monospace margin-bottom: 0px + + a + text-decoration: underline .build-status @include border-radius(4px) From 744e32a15c98951c15dd88a02a58b3d8506e8195 Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 12:37:00 +0200 Subject: [PATCH 3/8] Add footer section for commit and author details. --- assets/scripts/app/templates/builds/show.hbs | 22 +++++++++++++++++ assets/styles/main/summary.sass | 26 ++++++++++++++++++-- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs index d17173a9..69a52496 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/assets/scripts/app/templates/builds/show.hbs @@ -27,6 +27,28 @@ 
 {{formatMessage build.commit.body repoBinding=build.repo pre=true}}
+ +
+
+ {{#if commit.authorName}} + {{commit.authorName}} authored + {{/if}} + {{#if commit.committerName}} + {{commit.committerName}} committed + {{/if}} +
+ +
+ Commit {{formatSha commit.sha}} + {{#if build.pullRequest}} + #{{build.pullRequestNumber}}: {{build.pullRequestTitle}} {{else}} + {{#if build.commit.compareUrl}} + Compare {{pathFrom build.commit.compareUrl}} + {{/if}} + {{/if}} + +
+
diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index b6dc773d..d935f2dd 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -15,7 +15,6 @@ #new-summary @include clearfix @include border-radius(5px) - width: 100% background-color: #fafafa min-height: 30px padding: 5px 15px @@ -79,7 +78,30 @@ float: right width: 150px font-size: 11px - margin-right: 30px + + .footer + a + text-decoration: underline + + .commit + text-align: right + width: inherit + margin-top: 0px + float: right + + img + margin-left: 5px + margin-right: 5px + vertical-align: middle + + .author + float: left + + img + height: 15px + width: 15px + + .github #summary margin: 0 0 0 12px From 1ceb935e1901268195e93945d76332290b9badcb Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 13:21:45 +0200 Subject: [PATCH 4/8] Shorter commits for compare URLs, optimize footer. The flow when reducing the browser width isn't fully right yet, but we're getting there. --- assets/scripts/app/helpers/handlebars.coffee | 4 ++++ assets/scripts/app/templates/builds/show.hbs | 7 ++++--- assets/styles/main/summary.sass | 10 ++++++++-- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/assets/scripts/app/helpers/handlebars.coffee b/assets/scripts/app/helpers/handlebars.coffee index 99b8c154..ba119579 100644 --- a/assets/scripts/app/helpers/handlebars.coffee +++ b/assets/scripts/app/helpers/handlebars.coffee @@ -331,6 +331,10 @@ Ember.Handlebars.helper 'formatMessage', (message, options) -> Ember.registerBoundHelper 'formatConfig', (config, options) -> safe Travis.Helpers.formatConfig(config) +Ember.registerBoundHelper 'shortCompareShas', (url, options) -> + shas = Travis.Helpers.pathFrom(url).split('...') + "#{shas[0][0..6]}..#{shas[1][0..6]}" + Ember.registerBoundHelper 'formatLog', (log, options) -> parentView = @get 'parentView' repo = parentView.get(options.repo) diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs index 69a52496..d0434ede 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/assets/scripts/app/templates/builds/show.hbs @@ -39,11 +39,12 @@
- Commit {{formatSha commit.sha}} + {{#if build.pullRequest}} - #{{build.pullRequestNumber}}: {{build.pullRequestTitle}} {{else}} + + {{else}} {{#if build.commit.compareUrl}} - Compare {{pathFrom build.commit.compareUrl}} + {{/if}} {{/if}} diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index d935f2dd..08a3b638 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -19,6 +19,7 @@ min-height: 30px padding: 5px 15px margin-bottom: 20px + padding-bottom: 10px .branch font-weight: bold @@ -89,6 +90,13 @@ margin-top: 0px float: right + div + display: inline + clear: none + max-width: 200px + overflow: hidden + white-space: nowrap + img margin-left: 5px margin-right: 5px @@ -101,8 +109,6 @@ height: 15px width: 15px - .github - #summary margin: 0 0 0 12px @include clearfix From 882d479c0fc2a1f7370fdfd721caf2fd1f67d205 Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 15:31:27 +0200 Subject: [PATCH 5/8] Fix compare link text for tags. --- assets/scripts/app/helpers/handlebars.coffee | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/scripts/app/helpers/handlebars.coffee b/assets/scripts/app/helpers/handlebars.coffee index ba119579..08a59ab5 100644 --- a/assets/scripts/app/helpers/handlebars.coffee +++ b/assets/scripts/app/helpers/handlebars.coffee @@ -332,8 +332,12 @@ Ember.registerBoundHelper 'formatConfig', (config, options) -> safe Travis.Helpers.formatConfig(config) Ember.registerBoundHelper 'shortCompareShas', (url, options) -> - shas = Travis.Helpers.pathFrom(url).split('...') - "#{shas[0][0..6]}..#{shas[1][0..6]}" + path = Travis.Helpers.pathFrom(url) + if path.indexOf('...') >= 0 + shas = path.split('...') + "#{shas[0][0..6]}..#{shas[1][0..6]}" + else + path Ember.registerBoundHelper 'formatLog', (log, options) -> parentView = @get 'parentView' From 1373308475322b2fdd80d5cf568c2a4d2e87b40d Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 16:00:28 +0200 Subject: [PATCH 6/8] Delete old summary, fix tests for the builds page. This commit breaks tests for the job page, but bear with me. It doesn't have the new layout yet. --- assets/scripts/app/templates/builds/show.hbs | 59 ++----------------- .../scripts/spec/support/expectations.coffee | 34 +++++------ assets/styles/main/summary.sass | 3 + 3 files changed, 24 insertions(+), 72 deletions(-) diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs index d0434ede..6ed1326f 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/assets/scripts/app/templates/builds/show.hbs @@ -4,7 +4,7 @@
- #{{build.number}} {{build.state}} + {{#link-to "build" repo build}}#{{build.number}} {{build.state}}{{/link-to}}
@@ -39,12 +39,12 @@
- + {{#if build.pullRequest}} - + {{else}} {{#if build.commit.compareUrl}} - + {{/if}} {{/if}} @@ -52,57 +52,6 @@
-
-
-
Build
-
- - {{#if build.id}} - {{#if build.repo.slug}} - {{#link-to "build" repo build}}{{build.number}}{{/link-to}} - {{/if}} - {{/if}} -
-
State
-
{{capitalize build.state}}
-
Finished
-
{{formatTime build.finishedAt}}
-
Duration
-
{{formatDuration build.duration}}
-
- - {{#with build}} -
-
Commit
-
{{formatCommit commit}}
- {{#if pullRequest}} -
Pull Request
-
#{{pullRequestNumber}} {{pullRequestTitle}}
- {{else}} - {{#if commit.compareUrl}} -
Compare
-
{{pathFrom commit.compareUrl}}
- {{/if}} - {{/if}} - {{#if commit.authorName}} -
Author
-
{{commit.authorName}}
- {{/if}} - {{#if commit.committerName}} -
Committer
-
{{commit.committerName}}
- {{/if}} -
- {{/with}} - - -
Message
-
- {{formatMessage build.commit.subject repoBinding=build.repo}} - 
{{formatMessage build.commit.body repoBinding=build.repo pre=true}}
-
-
- {{#unless build.isMatrix}} {{view Travis.AnnotationsView annotationsBinding="build.jobs.firstObject.annotations"}} {{/unless}} diff --git a/assets/scripts/spec/support/expectations.coffee b/assets/scripts/spec/support/expectations.coffee index b5f168ed..6d63b1af 100644 --- a/assets/scripts/spec/support/expectations.coffee +++ b/assets/scripts/spec/support/expectations.coffee @@ -9,36 +9,36 @@ equal($("#tab_#{name}").hasClass('display-inline'), !tab.hidden, "#{name} tab should have class display-inline") if name in ['build', 'job'] @displaysSummaryBuildLink = (link, number) -> - element = $('#summary .number a') + element = $('#new-summary .build-status a') equal( element.attr('href') , link) - equal( element.text().trim() , "#{number}") + equal( element.text().trim() , "##{number} started") @displaysSummary = (data) -> - element = $('#summary .left:first-child dt:first-child') - equal(element.text(), $.camelize(data.type)) - - element = $('#summary .number a') + element = $('#new-summary .build-status a') equal(element.attr('href'), "/#{data.repo}/#{data.type}s/#{data.id}") - element = $('#summary .finished_at') - equal(element.text(), data.finishedAt) + element = $('#new-summary .finished') + equal(element.text().trim(), data.finishedAt) - element = $('#summary .duration') - equal(element.text(), data.duration) + element = $('#new-summary .runtime') + equal(element.text().trim(), "ran for #{data.duration}") - element = $('#summary .commit a') + element = $('#new-summary .commit a.commit') equal(element.attr('href'), "https://github.com/#{data.repo}/commit/#{data.commit}") - element = $('#summary .commit a') - equal(element.text(), "#{data.commit} (#{data.branch})") + element = $('#new-summary .commit a.commit') + equal(element.text(), "Commit #{data.commit}") - element = $('#summary .compare a') + element = $('#new-summary .branch') + equal(element.text().trim(), data.branch) + + element = $('#new-summary .commit a.compare') equal(element.attr('href'), "https://github.com/compare/#{data.compare}") - element = $('#summary .compare a') - equal(element.text(), data.compare) + element = $('#new-summary .commit a.compare') + equal(element.text(), "Compare #{data.compare}") - element = $('#summary .message') + element = $('#new-summary .subject') equal(element.text().trim(), data.message) @displaysLog = (lines) -> diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index 08a3b638..6c111bba 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -58,6 +58,9 @@ font-size: 16px text-align: center + a + color: white + .runtime float: right font-size: 11px From e1bd11122401df72aaefc2eaf40bcf9056a27503 Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 16:31:33 +0200 Subject: [PATCH 7/8] Change summary on job page, fix more tests. This brings both pages on par, though the duplication isn't ideal. --- assets/scripts/app/templates/builds/show.hbs | 8 +- assets/scripts/app/templates/jobs/show.hbs | 85 ++++++++++--------- .../scripts/spec/support/expectations.coffee | 8 +- assets/styles/main/summary.sass | 6 +- 4 files changed, 57 insertions(+), 50 deletions(-) diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs index 6ed1326f..58614d58 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/assets/scripts/app/templates/builds/show.hbs @@ -31,15 +31,15 @@
{{#if commit.authorName}} - {{commit.authorName}} authored +
{{commit.authorName}} authored
{{/if}} {{#if commit.committerName}} - {{commit.committerName}} committed +
{{commit.committerName}} committed
{{/if}}
-
- +
+ {{#if build.pullRequest}} {{else}} diff --git a/assets/scripts/app/templates/jobs/show.hbs b/assets/scripts/app/templates/jobs/show.hbs index 0a2ad988..831c2522 100644 --- a/assets/scripts/app/templates/jobs/show.hbs +++ b/assets/scripts/app/templates/jobs/show.hbs @@ -1,53 +1,56 @@ {{#if job.isLoaded}}
-
-
-
Job
-
- - {{#if job.id}} - {{#if job.repo.slug}} - {{#link-to "job" repo job}}{{job.number}}{{/link-to}} - {{/if}} - {{/if}} -
-
State
-
{{capitalize job.state}}
-
Finished
-
{{formatTime job.finishedAt}}
-
Duration
-
{{formatDuration job.duration}}
+
+
+
+ {{#link-to "job" repo job}}#{{job.number}} {{job.state}}{{/link-to}} +
+ +
+ ran for {{formatDuration job.duration}} +
+ +
+ {{formatTime job.finishedAt}} +
+
+ +
+ {{job.commit.branch}} +
+ - +
+ {{formatMessage job.commit.subject repoBinding=job.repo}}
- {{#with job}} -
-
Commit
-
{{formatCommit commit}}
- {{#if build.pullRequest}} -
-
#{{build.pullRequestNumber}} {{build.pullRequestTitle}}
- {{else}} - {{#if commit.compareUrl}} -
Compare
-
{{pathFrom commit.compareUrl}}
- {{/if}} - {{/if}} + 
+{{formatMessage job.commit.body repoBinding=job.repo pre=true}}
+
+ +
+
{{#if commit.authorName}} -
Author
-
{{commit.authorName}}
+ {{commit.authorName}} authored {{/if}} {{#if commit.committerName}} -
Committer
-
{{commit.committerName}}
+ {{commit.committerName}} committed {{/if}}
- {{/with}} -
Message
-
- {{formatMessage job.commit.subject repoBinding=job.repo}} - 
{{formatMessage job.commit.body repoBinding=job.repo pre=true}}
-
-
+ +
+ + {{#if job.build.pullRequest}} + + {{else}} + {{#if job.commit.compareUrl}} + + {{/if}} + {{/if}} + +
+
+
{{view Travis.AnnotationsView annotationsBinding="view.annotations"}} diff --git a/assets/scripts/spec/support/expectations.coffee b/assets/scripts/spec/support/expectations.coffee index 6d63b1af..60c3be99 100644 --- a/assets/scripts/spec/support/expectations.coffee +++ b/assets/scripts/spec/support/expectations.coffee @@ -23,19 +23,19 @@ element = $('#new-summary .runtime') equal(element.text().trim(), "ran for #{data.duration}") - element = $('#new-summary .commit a.commit') + element = $('#new-summary .commit-changes a.commit') equal(element.attr('href'), "https://github.com/#{data.repo}/commit/#{data.commit}") - element = $('#new-summary .commit a.commit') + element = $('#new-summary .commit-changes a.commit') equal(element.text(), "Commit #{data.commit}") element = $('#new-summary .branch') equal(element.text().trim(), data.branch) - element = $('#new-summary .commit a.compare') + element = $('#new-summary .commit-changes a.compare') equal(element.attr('href'), "https://github.com/compare/#{data.compare}") - element = $('#new-summary .commit a.compare') + element = $('#new-summary .commit-changes a.compare') equal(element.text(), "Compare #{data.compare}") element = $('#new-summary .subject') diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index 6c111bba..d835d2be 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -87,7 +87,7 @@ a text-decoration: underline - .commit + .commit-changes text-align: right width: inherit margin-top: 0px @@ -108,6 +108,10 @@ .author float: left + div + display: inline + clear: none + img height: 15px width: 15px From bf84301710febc29d58f52aa1909b0992ead3188 Mon Sep 17 00:00:00 2001 From: Mathias Meyer Date: Thu, 8 May 2014 17:11:15 +0200 Subject: [PATCH 8/8] Improve spacing for octocats. --- assets/scripts/app/templates/builds/show.hbs | 9 +++++---- assets/scripts/app/templates/jobs/show.hbs | 11 ++++++----- assets/styles/main/summary.sass | 17 ++++++++++------- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs index 58614d58..aee204f7 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/assets/scripts/app/templates/builds/show.hbs @@ -39,15 +39,16 @@
- + +
diff --git a/assets/scripts/app/templates/jobs/show.hbs b/assets/scripts/app/templates/jobs/show.hbs index 831c2522..c9d8062e 100644 --- a/assets/scripts/app/templates/jobs/show.hbs +++ b/assets/scripts/app/templates/jobs/show.hbs @@ -38,16 +38,17 @@
- + + +
diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass index d835d2be..ca92f101 100644 --- a/assets/styles/main/summary.sass +++ b/assets/styles/main/summary.sass @@ -87,6 +87,9 @@ a text-decoration: underline + img + vertical-align: middle + .commit-changes text-align: right width: inherit @@ -96,14 +99,12 @@ div display: inline clear: none - max-width: 200px - overflow: hidden - white-space: nowrap - img - margin-left: 5px - margin-right: 5px - vertical-align: middle + img + margin-right: 2px + margin-left: 4px + height: 15px + width: 15px .author float: left @@ -115,6 +116,8 @@ img height: 15px width: 15px + margin-right: 4px + margin-left: 2px #summary margin: 0 0 0 12px