suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #430 from travis-ci/lp-branch-tiles

Browse Source 
show build number on hover in branch tiles #yolo
This commit is contained in:
Lisa P 2016-01-12 15:20:34 +01:00
commit ea79bb1625
11 changed files with 81 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/build-tile.js
View File

@ -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')
});

2
app/styles/app.scss
View File

@ -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";

4
app/styles/app/_mixins/colors.sass
View File

@ -1,7 +1,9 @@
$teal: #40a3ad
$green: #44a662
$yellow: #e5da3f
$yellow-bg: $yellow
$yellow-font: #beab04
$yellow-tile: #dbc040
$red: #d94341
$grey: #666

14
app/styles/app/_mixins/mixins.sass
View File

@ -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)

37
app/styles/app/components/build-tile.sass
View File

@ -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')

25
app/styles/app/components/status-icon.sass Normal file
View File

@ -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)

34
app/styles/app/layouts/branches.sass
View File

@ -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

12
app/styles/app/layouts/jobs.sass
View File

@ -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}

10
app/styles/app/modules/build-header.sass
View File

@ -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

10
app/styles/app/modules/row.sass
View File

@ -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)

6
app/templates/components/build-tile.hbs
View File

@ -1,10 +1,6 @@
{{#if build.number}}
{{#link-to "build" build.id}}
{{status-icon status=build.state}}
{{build.last_build.state}}
{{!-- <div class="dropup--status">
{{request-icon event=build.eventType state=build.state}} <span class="label-align">#{{build.number}}</span>
</div> --}}
<span class="build-tile-number">#{{build.number}}</span>
{{/link-to}}
{{/if}}