diff --git a/app/components/builds-item.coffee b/app/components/builds-item.coffee index 52be7376..d836ec1c 100644 --- a/app/components/builds-item.coffee +++ b/app/components/builds-item.coffee @@ -3,8 +3,10 @@ `import { githubCommit as githubCommitUrl } from 'travis/utils/urls'` BuildsItemComponent = Ember.Component.extend + + tagName: 'li' classNameBindings: ['build.state'] - classNames: ['tile', 'tile--small', 'tile--build', 'row'] + classNames: ['row-li', 'pr-row'] urlAuthorGravatarImage: (-> gravatarImage(@get('build.commit.authorEmail'), 40) diff --git a/app/components/repos-list-item.coffee b/app/components/repos-list-item.coffee index af4ee542..e6c5da71 100644 --- a/app/components/repos-list-item.coffee +++ b/app/components/repos-list-item.coffee @@ -10,15 +10,11 @@ ReposListItemComponent = Ember.Component.extend Polling, pollModels: 'repo' classNames: ['repo'] - classNameBindings: ['color', 'selected'] + classNameBindings: ['selected'] selected: (-> @get('repo') == @get('selectedRepo') ).property('selectedRepo') - color: (-> - colorForState(@get('repo.lastBuildState')) - ).property('repo.lastBuildState') - scrollTop: (-> if (window.scrollY > 0) $('html, body').animate({scrollTop: 0}, 200) diff --git a/app/styles/app.scss b/app/styles/app.scss index a0a6a35c..d4e03f6b 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -56,6 +56,7 @@ @import "app/layouts/broadcasts"; @import "app/layouts/repo"; @import "app/layouts/jobs"; +@import "app/layouts/pull-requests"; @import "app/layouts/requests"; @import "app/layouts/caches"; diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 0b987c5e..e1fc76da 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -61,7 +61,7 @@ svg g > * fill: $color -=statusColors($color, $status, $width, $color2: $color) +=statusColors($color, $status, $width, $color2: $color, $building:false) &.#{$status} background: linear-gradient(to right, $color2 0%, $color2 $width, white $width, white 100%) no-repeat .row-name, @@ -82,6 +82,7 @@ .build-status color: $color @include colorStatusIcons($color, $status) + @include colorLinks($color, $status, $building) =colorBg($color, $status, $width, $color2: white) &.#{$status} diff --git a/app/styles/app/base.sass b/app/styles/app/base.sass index 8318b1e6..f2f13c1f 100644 --- a/app/styles/app/base.sass +++ b/app/styles/app/base.sass @@ -11,4 +11,4 @@ a text-decoration: none &:hover, &:active - text-decoration: underline + text-decoration: none diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index 1b7969a4..308119b7 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -5,15 +5,6 @@ .branch-row - .avatar - display: inline-block - width: 16px - height: 16px - margin-right: .7em - border-radius: 50% - vertical-align: middle - background-color: #E9EBEB - @media #{$medium-up} display: flex justify-content: space-between diff --git a/app/styles/app/layouts/pull-requests.sass b/app/styles/app/layouts/pull-requests.sass new file mode 100644 index 00000000..46613c5c --- /dev/null +++ b/app/styles/app/layouts/pull-requests.sass @@ -0,0 +1,28 @@ +.build-list + padding: 0 + margin: 0 + list-style: none + +.pr-row + @media #{$medium-up} + display: flex + justify-content: space-between + flex-flow: row wrap + + .two-line + padding: 0 + margin: .4em 0 + .row-item + display: block + + .row-committer + padding-left: 1.6em + + .two-line:first-of-type + flex: 0 0 55% + padding-left: .5em + border-right: 1px solid $cream-dark + .two-line:nth-of-type(2) + flex: 0 0 20% + .two-line:last-of-type + flex: 0 0 20% diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 7aed9ee2..1dc2d8c3 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -151,9 +151,22 @@ %icon-line-trigger-teal background-image: url('data:image/svg+xml;utf8,') +%icon-github + background-image: url('data:image/svg+xml;utf8,') +.icon-github + display: inline-block + width: 1em + height: 1.1em + margin-right: 0.3em + vertical-align: middle + background: + repeat: no-repeat + size: auto 23px + position: -9px -3px + @extend %icon-github + %icon-github-circle background-image: url('data:image/svg+xml;utf8,') - .icon-github-circle display: inline-block width: 1.2em diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass index 7a5d5392..3509a90b 100644 --- a/app/styles/app/modules/row.sass +++ b/app/styles/app/modules/row.sass @@ -18,10 +18,13 @@ color: $grey-dark background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat - h2, h3 + h2, h3, small margin: 0 font-weight: $font-weight-normal font-size: 16px + small + font-weight: $font-weight-bold + margin-right: 1em .row-header width: 100% @@ -53,7 +56,7 @@ .two-line @extend %row-element padding: .4em 0 - margin-left: 2em + margin-left: 1em text-align: left @media #{$medium-up} @@ -76,12 +79,21 @@ display: inline-block vertical-align: middle + .avatar + display: inline-block + width: 16px + height: 16px + margin: 0 .4em 0 .1em + border-radius: 50% + vertical-align: middle + background-color: #E9EBEB + @include statusColors($green, 'passed', 10px) @include statusColors($red, 'failed', 10px) @include statusColors($red, 'errored', 10px) @include statusColors($grey, 'canceled', 10px) - @include statusColors($yellow, 'started', 10px, #e5da3f) - @include statusColors($yellow, 'queued', 10px, #e5da3f) - @include statusColors($yellow, 'booting', 10px, #e5da3f) - @include statusColors($yellow, 'received', 10px, #e5da3f) - @include statusColors($yellow, 'created', 10px, #e5da3f) + @include statusColors($yellow, 'started', 10px, #e5da3f, true) + @include statusColors($yellow, 'queued', 10px, #e5da3f, true) + @include statusColors($yellow, 'booting', 10px, #e5da3f, true) + @include statusColors($yellow, 'received', 10px, #e5da3f, true) + @include statusColors($yellow, 'created', 10px, #e5da3f, true) diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass index af7ff79d..0dde7d0e 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -10,7 +10,7 @@ background-color: #818383 border-radius: 4px color: $white - font-size: $font-size-sm + font-size: 12px line-height: 1.3 text-align: center white-space: nowrap @@ -71,7 +71,6 @@ top: -4em left: -1.9em height: 3.2em - font-size: 12px &:before left: 2em @@ -93,7 +92,6 @@ left: -.5em height: 3.2em padding: .3em .4em - font-size: 12px &:before left: 0.6em .tooltip-trigger @@ -104,7 +102,6 @@ top: -2.2em height: 1.6em padding: 0.1em .4em - font-size: 12px &:before left: 0 right: 0 diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs index 6394768d..e2c07287 100644 --- a/app/templates/components/branch-row.hbs +++ b/app/templates/components/branch-row.hbs @@ -48,22 +48,7 @@
- - - - - - - - - + {{#if build.last_build}} {{format-time build.last_build.finished_at}} @@ -77,32 +62,7 @@
- - - - - - - + {{#if build.last_build}} {{format-sha build.last_build.commit.sha}} diff --git a/app/templates/components/build-repo-actions.hbs b/app/templates/components/build-repo-actions.hbs index ab51a2ff..7e6b80f0 100644 --- a/app/templates/components/build-repo-actions.hbs +++ b/app/templates/components/build-repo-actions.hbs @@ -2,7 +2,7 @@ {{#if cancelling}} {{loading-indicator height=true}} {{else}} - + Cancel build {{/if}} @@ -12,7 +12,7 @@ {{#if restarting}} {{loading-indicator height=true}} {{else}} - + Trigger build {{/if}} diff --git a/app/templates/components/builds-item.hbs b/app/templates/components/builds-item.hbs index ab40d847..4af52137 100644 --- a/app/templates/components/builds-item.hbs +++ b/app/templates/components/builds-item.hbs @@ -1,52 +1,52 @@ -
- - -
- -
-

+
+

+ {{status-icon status=build.state}} {{#if build.isPullRequest}} - PR #{{build.pullRequestNumber}} {{#link-to "build" build.repo build}} + PR #{{build.pullRequestNumber}} {{{format-message build.pullRequestTitle short="true" repoBinding=build.repo}}} {{/link-to}} {{else}} - {{build.commit.branch}} {{#link-to "build" build.repo build}} + {{build.commit.branch}} {{{format-message build.commit.message short="true" repoBinding=build.repo}}} {{/link-to}} {{/if}}

-

- {{build.commit.committerName}} committed -

-
-
-
-

- {{#if build.id}} - {{#link-to "build" build.repo build}} - - {{build.number}} {{build.state}} - {{/link-to}} - {{/if}} -

-

- - - {{format-sha build.commit.sha}} - -

+
+ {{build.commit.committerName}} avatar + {{build.commit.committerName}} committed
+
-
-

- - {{format-duration build.duration}} -

-

- - {{format-time build.finishedAt}} -

+
+

+ {{#if build.id}} + {{#link-to "build" build.repo build}} + {{request-icon event=build.eventType state=build.state}} + #{{build.number}} {{build.state}} + {{/link-to}} + {{/if}} +

+
+ + + {{format-sha build.commit.sha}} + +
+
+ +
+
+
+ + {{format-duration build.duration}} +
+
+
+
+ + {{format-time build.finishedAt}} +
diff --git a/app/templates/components/repos-list-item.hbs b/app/templates/components/repos-list-item.hbs index a455c683..9967ca73 100644 --- a/app/templates/components/repos-list-item.hbs +++ b/app/templates/components/repos-list-item.hbs @@ -10,12 +10,12 @@ {{#with repo.lastBuildHash as lastBuild}} {{#if repo.slug}} {{#if lastBuild.id}} -

- {{#link-to "build" repo lastBuild.id}} - - {{lastBuild.number}} - {{/link-to}} -

+

+ {{#link-to "build" repo lastBuild.id}} + + {{lastBuild.number}} + {{/link-to}} +

{{/if}} {{/if}} {{/with}}