diff --git a/app/styles/app.scss b/app/styles/app.scss index 229574e0..f0e08832 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -23,7 +23,7 @@ @import "app/main/log"; // @import "app/main/repository"; @import "app/main/sponsors"; -@import "app/main/summary"; +// @import "app/main/summary"; // @import "app/main/tools"; @import "app/main"; @import "app/maximize"; @@ -37,7 +37,7 @@ @import "app/right/sponsors"; @import "app/right"; @import "app/settings"; -@import "app/stats"; +// @import "app/stats"; @import "app/status"; @import "app/tabs"; @import "app/tipsy"; @@ -53,6 +53,7 @@ @import "app/modules/search"; @import "app/modules/dropdown"; @import "app/modules/tabs"; +@import "app/modules/tooltips"; @import "app/layout"; @import "app/layouts/dashboard"; diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 99512456..ec945b9a 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -4,7 +4,7 @@ $font-size-sm: 14px $line-height-m: 1.3 // colors -$teal1: #5FA5A4 +$teal1: #5BA5A4 $teal2: #63A4A3 $blue-grey: #404650 @@ -35,6 +35,7 @@ $start-color: #D2C93B $start-bg-color: #D2CA24 $cancel-color: #A1A0A0 $dropdown-color: $teal1 +$created-color: #CDBC2C $dashboard-text-color: #9d9fa1 @@ -68,7 +69,7 @@ $log-header-bg: #444444 // new build header $font-size-xxl: 30px -$grey1: #A5ACAD +$grey1: #A6ADAD $grey2: #969496 $grey3: #808080 $grey4: #e6e8e8 diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass index 51d425c1..23009ae1 100644 --- a/app/styles/app/layouts/buildheader.sass +++ b/app/styles/app/layouts/buildheader.sass @@ -5,7 +5,7 @@ .repo-header header - margin: 1rem 0 3rem + margin: 1rem 0 2.4rem > * vertical-align: middle @@ -54,9 +54,16 @@ .repo-main .button--showmore margin-top: 2em + .build-title + margin-top: 2.5rem + color: $grey1 + font-size: $font-size-sm + & span:hover + .tooltip + display: block .repo-main-commit position: relative + padding-bottom: 0.5em &, small margin: 0 @@ -64,6 +71,8 @@ font-size: $font-size-m color: $grey3 line-height: 1 + a + color: $grey3 small margin-right: .3em font-weight: 600 @@ -74,9 +83,12 @@ @include fadeOut(right, -90deg, $cream-light) .repo-main-description - + p:not(.body) + color: $grey3 + a + color: $grey3 p - margin: .5em 0 0 + margin: 0 @media #{$medium-up} position: relative height: 4.9em @@ -133,3 +145,9 @@ height: 1.05em .icon--codeclimate width: 1.2em + +.build-os + text-transform: capitalize + + + diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index c77ebf14..eda01337 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -133,4 +133,18 @@ $button-border-color: #d4d4d4 height: 0.7em margin-right: .5em +.button--help + position: relative + top: .4em + left: .5em + width: 1.4rem + height: 1.4rem + background: $grey1 + border: none + &:hover + background-color: $teal1 + .icon--question + @extend %absolute-center + width: 0.6em + height: 0.9em diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index f4f4f981..1c61f63c 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -36,20 +36,20 @@ .icon-star background-image: inline-image('dashboard/star-off.svg') -.icon.errored +.icon-status.errored background-image: inline-image('dashboard/status-errored.svg') -.icon.failed +.icon-status.failed background-image: inline-image('dashboard/status-failed.svg') -.icon.canceled +.icon-status.canceled background-image: inline-image('dashboard/status-cancelled.svg') -.icon.passed +.icon-status.passed background-image: inline-image('dashboard/status-passed.svg') -.icon.started, -.icon.created +.icon-status.started, +.icon-status.created background-image: inline-image('dashboard/status-pending.svg') .icon.push @@ -85,18 +85,36 @@ .icon--env background-image: inline-image('svg/icon-environment.svg') -.icon--cross-red +.icon--cross-red, +.icon--job.failed background-image: inline-image('svg/icon-job-failed.svg') -.icon--check-green +.icon--check-green, +.icon--job.passed background-image: inline-image('svg/icon-job-passed.svg') +.icon--error-grey, +.icon--job.errored + background-image: inline-image('svg/icon-job-errored.svg') +.icon--job.started, +.icon--job.created, +.icon--job.received, +.icon--started-yellow + background-image: inline-image('svg/icon-job-started.svg') + .icon--lang background-image: inline-image('svg/icon-language.svg') -.icon--linux +.icon--linux, +.icon.linux background-image: inline-image('svg/icon-linux.svg') -.icon--mac +.icon--mac, +.icon.mac background-image: inline-image('svg/icon-mac.svg') .icon--eye background-image: inline-image('svg/icon-showmore.svg') +.icon--question + background-image: inline-image('svg/icon-help.svg') + +.icon-tab-arrow + background-image: inline-image('svg/icon-tab-arrow.svg') .icon-arrow-down diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index 49b95878..c0a02746 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -44,16 +44,18 @@ position: relative padding-left: 1em &:before - content: "\003E" + content: "" display: block position: absolute color: $grey4 - left: -0.5em - width: .6em - height: 1em - font-size: 29px - line-height: 1 - transform: scale(0.6, 1.6) + top: 0.4em + left: -0.7em + width: .7em + height: 1.3em + background: + size: 100% + repeat: no-repeat + @extend .icon-tab-arrow .tabbody diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass index fd0f93c3..72ec6d56 100644 --- a/app/styles/app/modules/tiles.sass +++ b/app/styles/app/modules/tiles.sass @@ -6,28 +6,51 @@ .build-status a color: $color +@mixin colorJobs($color) + .build-status a + color: $color + .tile @extend border-radius-4px + overflow: hidden position: relative padding: .8rem .8rem .8rem 3rem background-color: $cream-light p margin: 0 white-space: nowrap + .icon + vertical-align: middle + .icon--lang + width: 1.2em + height: 0.9em - &.started, - &.created - @include colorTiles($start-color) - &.failed - @include colorTiles($fail-color) - &.errored - @include colorTiles($error-color) - &.canceled - @include colorTiles($cancel-color) - &.passed - @include colorTiles($pass-color) - &.inactive - @include colorTiles($cancel-color) + &:not(.tile--jobs) + &.started, + &.created + @include colorTiles($start-color) + &.failed + @include colorTiles($fail-color) + &.errored + @include colorTiles($error-color) + &.canceled + @include colorTiles($cancel-color) + &.passed + @include colorTiles($pass-color) + &.inactive + @include colorTiles($cancel-color) + + &.tile--jobs + &.failed + @include colorJobs($fail-color) + &.errored + @include colorJobs(#939292) + &.passed + @include colorJobs($pass-color) + &.started, + &.created, + &.received + @include colorJobs($created-color) @media #{$medium-up} height: 145px @@ -103,6 +126,8 @@ width: 1.1em height: 1.6em margin: -0.5em auto 0 + .icon--job + @extend %absolute-center .tile-author img @@ -137,3 +162,45 @@ .tile-additional @media #{$xlarge-up} @include grid-column(4) + +// job matrix +.tile--jobs + margin-bottom: 0.3em + @media #{$medium-up} + height: 64px + .tile-main + color: #7d8282 + // variations if env and/or code are set + p.tile-single-line + padding: 0 + line-height: 1.4 + &:only-of-type + padding: .7em 0 + .icon--env + height: 1.2em + .icon--code + width: 1.3em + height: 1.2em + .icon + margin-right: .3em + .icon.mac + height: 1.6em + @media #{$medium-up} + margin-left: -0.3em + white-space: nowrap + overflow: hidden + border-right: solid 1px $grey4 + &:after + @include fadeOut(right, -90deg, $cream-light) + @media #{$xlarge-up} + @include grid-column(5) + .tile-additional + @media #{$xlarge-up} + @include grid-column(7) + + +p.tile-single-line + padding: .7em 0 + .icon--code + width: 1.3em + height: 1.1em diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass new file mode 100644 index 00000000..1a27c228 --- /dev/null +++ b/app/styles/app/modules/tooltips.sass @@ -0,0 +1,42 @@ + +$tooltip-grey: #6A6C6D + +.tooltip + position: relative + display: none + +.tooltip-inner + position: absolute + bottom: 0 + right: 0 + background: $tooltip-grey + color: $white + font-size: $font-size-small + line-height: 18px + text-align: center + padding: 8px 5px + @extend %border-radius-4px + + &:after + content: '' + position: absolute + top: 98% + right: 3em + width: 0 + height: 0 + border-top: 13px solid $tooltip-grey + border-right: 13px solid transparent + border-left: 13px solid transparent + + @media #{$small-only} + bottom: -2.5em + + @media #{$medium-up} + width: 25rem + +.tooltip-inner + height: 4.1em + top: -8em + left: 4em + &:after + left: 4.1em \ No newline at end of file diff --git a/app/templates/build.hbs b/app/templates/build.hbs index 837a6759..cba093f5 100644 --- a/app/templates/build.hbs +++ b/app/templates/build.hbs @@ -18,7 +18,9 @@ {{/if}}
-

{{format-message build.commit.subject repoBinding=build.repo}}

+ {{#if build.pullRequest}} +

{{format-message build.commit.subject repoBinding=build.repo}}

+ {{/if}} 
{{format-message build.commit.body repoBinding=build.repo pre=true}}
diff --git a/app/templates/jobs.hbs b/app/templates/jobs.hbs index adc08d93..acd7a296 100644 --- a/app/templates/jobs.hbs +++ b/app/templates/jobs.hbs @@ -1,66 +1,56 @@ {{#if view.jobs.length}} - - {{#if view.required}} - - {{else}} - - {{/if}} - - - {{#each key in view.build.configKeys}} - - {{/each}} - - - - {{#each job in view.jobs}} - {{#view 'jobs-item' context=job}} - - - - {{#each value in configValues}} - - {{/each}} - {{/view}} - {{/each}} - -
- Build Matrix - - Allowed Failures - -
{{key}}
- - {{#if job.id}} - {{#if job.repo.slug}} - {{#link-to "job" repo job}}{{number}}{{/link-to}} - {{/if}} - {{/if}} - - {{format-duration duration}} - - {{format-time finishedAt}} - {{value}}
+
- {{#unless view.required}} - - {{/unless}} + {{#if view.required}} +

Build Jobs

+ {{else}} +

Allowed Failures + +
+

These are jobs you can allow to fail without failing your entire build

+
+

+ {{/if}} + + {{#each job in view.jobs}} + {{#view 'jobs-item' context=job}} +
+
+ +
+ +
+ {{#if config.env}} +

{{config.global_env}} {{config.env}}

+ {{/if}} + {{#if view.languages}} +

{{view.languages}}

+ {{/if}} +
+ +
+

+ + {{#if job.id}} + {{#if job.repo.slug}} + {{#link-to "job" repo job}}{{number}}{{/link-to}} + {{/if}} + {{/if}} +

+

+ + {{format-duration duration}} +

+

+ + {{format-time finishedAt}} +

+

{{config.os}}

+
+
+ + {{/view}} + {{job.configKeys}} + {{/each}} +
{{/if}} diff --git a/app/templates/repo/error.hbs b/app/templates/repo/error.hbs new file mode 100644 index 00000000..54f3245f --- /dev/null +++ b/app/templates/repo/error.hbs @@ -0,0 +1 @@ +There was an error while loading data. diff --git a/app/utils/keys-map.coffee b/app/utils/keys-map.coffee index 1de98cdc..2642d092 100644 --- a/app/utils/keys-map.coffee +++ b/app/utils/keys-map.coffee @@ -1,27 +1,33 @@ -configKeysMap = { +languageConfigKeys = { go: 'Go' - rvm: 'Ruby' - gemfile: 'Gemfile' - env: 'ENV' - jdk: 'JDK' - otp_release: 'OTP Release' php: 'PHP' node_js: 'Node.js' perl: 'Perl' python: 'Python' scala: 'Scala' - compiler: 'Compiler' - ghc: 'GHC' - os: 'OS' ruby: 'Ruby' - xcode_sdk: 'Xcode SDK' - xcode_scheme:'Xcode Scheme' d: 'D' julia: 'Julia' csharp: 'C#' mono: 'Mono' dart: 'Dart' elixir: 'Elixir' + ghc: 'GHC' + jdk: 'JDK' + rvm: 'Ruby' + otp_release: 'OTP Release' } +configKeys = { + env: 'ENV' + gemfile: 'Gemfile' + xcode_sdk: 'Xcode SDK' + xcode_scheme:'Xcode Scheme' + compiler: 'Compiler' + os: 'OS' +} + +configKeysMap = Ember.merge configKeys, languageConfigKeys + `export default configKeysMap` +`export { languageConfigKeys, configKeys }` diff --git a/app/views/jobs-item.coffee b/app/views/jobs-item.coffee index bcf55e6c..df04e841 100644 --- a/app/views/jobs-item.coffee +++ b/app/views/jobs-item.coffee @@ -1,8 +1,9 @@ `import BasicView from 'travis/views/basic'` `import { colorForState } from 'travis/utils/helpers'` +`import { languageConfigKeys } from 'travis/utils/keys-map';` View = BasicView.extend - tagName: 'tr' + tagName: 'div' classNameBindings: ['color'] repoBinding: 'context.repo' jobBinding: 'context' @@ -11,4 +12,15 @@ View = BasicView.extend colorForState(@get('job.state')) ).property('job.state') + languages: (-> + output = [] + + if config = @get('job.config') + for key, languageName of languageConfigKeys + if version = config[key] + output.push(languageName + ': ' + version) + + output.join(' ') + ).property() + `export default View` diff --git a/public/images/dashboard/hash.svg b/public/images/dashboard/hash.svg deleted file mode 100644 index 6eae15a3..00000000 --- a/public/images/dashboard/hash.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - diff --git a/public/images/svg/icon-help.svg b/public/images/svg/icon-help.svg new file mode 100644 index 00000000..a0c81ce9 --- /dev/null +++ b/public/images/svg/icon-help.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/public/images/svg/icon-job-errored.svg b/public/images/svg/icon-job-errored.svg new file mode 100644 index 00000000..914b14a8 --- /dev/null +++ b/public/images/svg/icon-job-errored.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/public/images/svg/icon-job-started.svg b/public/images/svg/icon-job-started.svg new file mode 100644 index 00000000..88a2827b --- /dev/null +++ b/public/images/svg/icon-job-started.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/public/images/svg/icon-tab-arrow.svg b/public/images/svg/icon-tab-arrow.svg new file mode 100644 index 00000000..4fcd0df5 --- /dev/null +++ b/public/images/svg/icon-tab-arrow.svg @@ -0,0 +1,8 @@ + + + + + +