diff --git a/app/components/build-tile.js b/app/components/build-tile.js
index dba111af..5310d4cd 100644
--- a/app/components/build-tile.js
+++ b/app/components/build-tile.js
@@ -6,8 +6,9 @@ export default Ember.Component.extend({
attributeBindings: ['title'],
title: function() {
- var num;
+ var num, state;
num = this.get('build.number');
- return "#" + num;
+ state = this.get('build.state');
+ return "Build #" + num + " " + state;
}.property('build')
});
diff --git a/app/styles/app.scss b/app/styles/app.scss
index dd07d913..a873572c 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -20,6 +20,7 @@
@import "app/components/sync-button";
@import "app/components/loading-indicator";
@import "app/components/build-tile";
+@import "app/components/status-icon";
@import "app/animation/tractor";
@@ -70,4 +71,3 @@
@import "app/pages/team";
@import "app/pages/plans";
@import "app/pages/logo";
-
diff --git a/app/styles/app/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass
index 74987765..fcaa32d5 100644
--- a/app/styles/app/_mixins/colors.sass
+++ b/app/styles/app/_mixins/colors.sass
@@ -1,7 +1,9 @@
-
$teal: #40a3ad
$green: #44a662
$yellow: #e5da3f
+$yellow-bg: $yellow
+$yellow-font: #beab04
+$yellow-tile: #dbc040
$red: #d94341
$grey: #666
diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass
index f4fe8390..3a7f0e82 100644
--- a/app/styles/app/_mixins/mixins.sass
+++ b/app/styles/app/_mixins/mixins.sass
@@ -1,4 +1,3 @@
-
@mixin fadeOut($position, $angle, $color, $width: 0%)
content: ""
display: block
@@ -84,7 +83,7 @@
.row-name .status-icon g > *,
.row-request .icon-request g > *
fill: $color
-
+
.build a,
.repo-title a
color: $color
@@ -103,22 +102,21 @@
@if $building
.#{$status},
.#{$status} a,
- color: #beab04
+ color: $yellow-font
@else
.#{$status},
.#{$status} a,
color: $color
-=colorRows($color, $status, $width, $is-building: false)
+=colorRows($color, $status, $width, $is-building: false, $color-icon: $color)
@include colorBg($color, $status, $width)
@include colorLinks($color, $status, $is-building)
- @include colorStatusIcons($color, $status)
+ @include colorStatusIcons($color-icon, $status)
-=colorJobs($color, $status, $width, $hover, $is-building: false)
+=colorJobs($color, $status, $width, $hover, $is-building: false, $bg-start: $color)
&.#{$status}
@include colorLinks($color, $status, $is-building)
@include colorStatusIcons($color, $status)
&:hover,
&:active
- @include colorBg($color, $status, $width, $hover)
-
+ @include colorBg($bg-start, $status, $width, $hover)
diff --git a/app/styles/app/components/build-tile.sass b/app/styles/app/components/build-tile.sass
index b796c827..9b449ab9 100644
--- a/app/styles/app/components/build-tile.sass
+++ b/app/styles/app/components/build-tile.sass
@@ -10,14 +10,7 @@
fill: $white
.status-icon .circle
border-color: $white
-
- @media #{$medium-up}
- .dropup--status
- border-color: $extra-hover
- color: $color
- &:before
- background-color: $color
-
+ border-width: 2px
.build-tiles
height: 4.7em
@@ -44,6 +37,7 @@
height: 2.5rem !important
margin: auto !important
background-color: transparent
+ transition: top 200ms ease
.is-rotating
position: absolute
top: 0
@@ -56,6 +50,23 @@
.circle
width: 8px
height: 8px
+ .build-tile-number
+ margin: auto
+ height: 1em
+ width: auto
+ text-align: center
+ position: absolute
+ transform: scale(.7)
+ opacity: 0
+ color: white
+ transition: transform 200ms ease, opacity 200ms ease
+ top: 0; right: 0; bottom: -1.5em; left: 0
+ &:hover
+ .status-icon
+ top: -1.4em
+ .build-tile-number
+ transform: scale(1)
+ opacity: 1
a
display: block
height: 100%
@@ -65,8 +76,8 @@
@include buildTileColors(#D94341, #FFF7F5, 'failed')
@include buildTileColors(#D94341, #FFF7F5, 'errored')
@include buildTileColors(#A1A0A0, #F5F5F5, 'canceled')
- @include buildTileColors(#bfb502, #fdfcee, 'started', #e2c913)
- @include buildTileColors(#bfb502, #fdfcee, 'queued', #e2c913)
- @include buildTileColors(#bfb502, #fdfcee, 'booting', #e2c913)
- @include buildTileColors(#bfb502, #fdfcee, 'received', #e2c913)
- @include buildTileColors(#bfb502, #fdfcee, 'created', #e2c913)
+ @include buildTileColors($yellow-tile, #fdfcee, 'started')
+ @include buildTileColors($yellow-tile, #fdfcee, 'queued')
+ @include buildTileColors($yellow-tile, #fdfcee, 'booting')
+ @include buildTileColors($yellow-tile, #fdfcee, 'received')
+ @include buildTileColors($yellow-tile, #fdfcee, 'created')
diff --git a/app/styles/app/components/status-icon.sass b/app/styles/app/components/status-icon.sass
new file mode 100644
index 00000000..25d43404
--- /dev/null
+++ b/app/styles/app/components/status-icon.sass
@@ -0,0 +1,25 @@
+.status-icon
+ .is-rotating
+ width: 17px
+ height: 18px
+ line-height: 0.9
+ text-align: center
+ transform-origin: center center
+ will-change: transform
+ animation: rotation 3s infinite ease
+ .circle
+ display: inline-block
+ vertical-align: middle
+ width: 5px
+ height: 5px
+ border: solid 1px #bfb502
+ border-radius: 50%
+ transform-origin: center center
+
+@keyframes rotation
+ 0%
+ transform: rotateZ(0deg)
+ 45%, 55%
+ transform: rotateZ(180deg)
+ 100%
+ transform: rotateZ(360deg)
diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass
index 308119b7..c21344dc 100644
--- a/app/styles/app/layouts/branches.sass
+++ b/app/styles/app/layouts/branches.sass
@@ -1,4 +1,3 @@
-
.branches
.small-title
margin: 1.5em 0 0.7em
@@ -49,7 +48,7 @@
z-index: 5
background-color: $white
border-radius: 2px
-
+
&:after,
&:before
content: ""
@@ -94,7 +93,7 @@
.icon-trigger path,
.icon-eye path
fill: $white
-
+
@media #{$medium-up}
width: 10em
left: 0
@@ -156,33 +155,6 @@
path
fill: $teal-dark
-// @todo refactor to status-icon module
-.status-icon
- .is-rotating
- width: 17px
- height: 19px
- line-height: 0.9
- text-align: center
- transform-origin: center center
- will-change: transform
- animation: rotation 3s infinite ease
- .circle
- display: inline-block
- vertical-align: middle
- width: 5px
- height: 5px
- border: solid 1px #bfb502
- border-radius: 50%
- transform-origin: center center
-
-@keyframes rotation
- 0%
- transform: rotateZ(0deg)
- 45%, 55%
- transform: rotateZ(180deg)
- 100%
- transform: rotateZ(360deg)
-
.is-relative
position: relative
@@ -211,5 +183,3 @@ a.nobuilds-tigger
color: white
.icon-trigger svg path
fill: #fff
-
-
diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass
index 7ee297b7..ece92120 100644
--- a/app/styles/app/layouts/jobs.sass
+++ b/app/styles/app/layouts/jobs.sass
@@ -27,11 +27,11 @@
@include colorJobs($red, 'failed', 6px, rgba($red, .1))
@include colorJobs($red, 'errored', 6px, rgba($red, .1))
@include colorJobs($grey, 'canceled', 6px, #f1f1f1)
- @include colorJobs($yellow, 'started', 6px, rgba($yellow, .1), true)
- @include colorJobs($yellow, 'queued', 6px, rgba($yellow, .1), true)
- @include colorJobs($yellow, 'booting', 6px, rgba($yellow, .1), true)
- @include colorJobs($yellow, 'received', 6px, rgba($yellow, .1), true)
- @include colorJobs($yellow, 'created', 6px, rgba($yellow, .1), true)
+ @include colorJobs($yellow-font, 'started', 6px, rgba($yellow, .1), true, $yellow-bg)
+ @include colorJobs($yellow-font, 'queued', 6px, rgba($yellow, .1), true, $yellow-bg)
+ @include colorJobs($yellow-font, 'booting', 6px, rgba($yellow, .1), true, $yellow-bg)
+ @include colorJobs($yellow-font, 'received', 6px, rgba($yellow, .1), true, $yellow-bg)
+ @include colorJobs($yellow-font, 'created', 6px, rgba($yellow, .1), true, $yellow-bg)
@include colorFadeOut('passed',#ECF6EF)
@include colorFadeOut('failed', #FBECEB)
@@ -96,7 +96,7 @@
height: 20px
vertical-align: middle
padding-left: 1.5em
- background:
+ background:
size: auto 18px
repeat: no-repeat
@media #{$medium-up}
diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass
index 16606615..e9a31e37 100644
--- a/app/styles/app/modules/build-header.sass
+++ b/app/styles/app/modules/build-header.sass
@@ -7,11 +7,11 @@
@include colorRows($red, 'failed', 12px)
@include colorRows($red, 'errored', 12px)
@include colorRows($grey, 'canceled', 12px)
- @include colorRows($yellow, 'started', 12px, true)
- @include colorRows($yellow, 'queued', 12px, true)
- @include colorRows($yellow, 'booting', 12px, true)
- @include colorRows($yellow, 'received', 12px, true)
- @include colorRows($yellow, 'created', 12px, true)
+ @include colorRows($yellow-bg, 'started', 12px, true, $yellow-font)
+ @include colorRows($yellow-bg, 'queued', 12px, true, $yellow-font)
+ @include colorRows($yellow-bg, 'booting', 12px, true, $yellow-font)
+ @include colorRows($yellow-bg, 'received', 12px, true, $yellow-font)
+ @include colorRows($yellow-bg, 'created', 12px, true, $yellow-font)
@media #{$medium-up}
display: flex
diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass
index 3509a90b..8d978fda 100644
--- a/app/styles/app/modules/row.sass
+++ b/app/styles/app/modules/row.sass
@@ -92,8 +92,8 @@
@include statusColors($red, 'failed', 10px)
@include statusColors($red, 'errored', 10px)
@include statusColors($grey, 'canceled', 10px)
- @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)
+ @include statusColors($yellow-font, 'started', 10px, $yellow-bg, true)
+ @include statusColors($yellow-font, 'queued', 10px, $yellow-bg, true)
+ @include statusColors($yellow-font, 'booting', 10px, $yellow-bg, true)
+ @include statusColors($yellow-font, 'received', 10px, $yellow-bg, true)
+ @include statusColors($yellow-font, 'created', 10px, $yellow-bg, true)
diff --git a/app/templates/components/build-tile.hbs b/app/templates/components/build-tile.hbs
index 13403525..26dd4c27 100644
--- a/app/templates/components/build-tile.hbs
+++ b/app/templates/components/build-tile.hbs
@@ -1,10 +1,6 @@
{{#if build.number}}
{{#link-to "build" build.id}}
{{status-icon status=build.state}}
-
- {{build.last_build.state}}
-{{!--
- {{request-icon event=build.eventType state=build.state}} #{{build.number}}
-
--}}
+ #{{build.number}}
{{/link-to}}
{{/if}}