work on branch coloring and things
This commit is contained in:
Lisa P
parent
05b22c40e0
commit
cecd09fa99
|
|
@ -1,5 +1,19 @@
|
|||
`import Ember from 'ember'`
|
||||
`import { gravatarImage } from 'travis/utils/urls'`
|
||||
`import { githubCommit as githubCommitUrl } from 'travis/utils/urls'`
|
||||
|
||||
BranchRowComponent = Ember.Component.extend()
|
||||
BranchRowComponent = Ember.Component.extend
|
||||
|
||||
tagName: 'li'
|
||||
classNameBindings: ['build.state']
|
||||
classNames: ['branch-row']
|
||||
|
||||
urlAuthorGravatarImage: (->
|
||||
gravatarImage(@get('build.commit.authorEmail'), 15)
|
||||
).property('build.commit.authorEmail')
|
||||
|
||||
urlGithubCommit: (->
|
||||
githubCommitUrl(@get('build.repo.slug'), @get('build.commit.sha'))
|
||||
).property('build.commit.sha')
|
||||
|
||||
`export default BranchRowComponent`
|
||||
|
|
|
|||
|
|
@ -1,8 +1,35 @@
|
|||
@mixin statusColors($color, $status)
|
||||
&.#{$status}
|
||||
background: linear-gradient(to right, $color 0%, $color 9px, transparent 10px, transparent 100%) no-repeat
|
||||
.branch-name,
|
||||
.branch-request a
|
||||
color: $color
|
||||
&:hover
|
||||
border-color: $color
|
||||
|
||||
@mixin buildTileColors($color, $bg, $status)
|
||||
.#{$status}
|
||||
background-color: $bg
|
||||
a
|
||||
color: $color
|
||||
@media #{$medium-up}
|
||||
.dropup--status
|
||||
border-color: $color
|
||||
&:before
|
||||
background-color: $bg
|
||||
|
||||
.tabbody
|
||||
ul
|
||||
padding: 0
|
||||
margin: 0
|
||||
list-style: none
|
||||
|
||||
.branch-row
|
||||
border: 1px solid $cream-dark
|
||||
font-size: 16px
|
||||
text-align: right
|
||||
margin-bottom: .3rem
|
||||
color: $grey-dark
|
||||
|
||||
span
|
||||
width: 1em
|
||||
|
|
@ -13,14 +40,16 @@
|
|||
vertical-align: middle
|
||||
|
||||
.avatar
|
||||
border-radius: 50%
|
||||
width: 15px
|
||||
margin-right: .5em
|
||||
border-radius: 50%
|
||||
vertical-align: middle
|
||||
|
||||
.row-item
|
||||
margin: .2em
|
||||
font-size: 16px
|
||||
font-weight: 400
|
||||
white-space: nowrap
|
||||
a
|
||||
color: $grey-dark
|
||||
text-decoration: none
|
||||
|
|
@ -39,6 +68,16 @@
|
|||
& > div:nth-of-type(5)
|
||||
width: 26%
|
||||
|
||||
@include statusColors($green-dark, 'passed')
|
||||
@include statusColors($red-dark, 'failed')
|
||||
@include statusColors($red-dark, 'errored')
|
||||
@include statusColors($grey-medium, 'canceled')
|
||||
@include statusColors(#ECCE4B, 'started')
|
||||
@include statusColors(#ECCE4B, 'queued')
|
||||
@include statusColors(#ECCE4B, 'booting')
|
||||
@include statusColors(#ECCE4B, 'received')
|
||||
@include statusColors(#ECCE4B, 'created')
|
||||
|
||||
|
||||
%row-element
|
||||
vertical-align: middle
|
||||
|
|
@ -144,7 +183,7 @@
|
|||
padding: 1em 0
|
||||
|
||||
.build-tiles
|
||||
height: 4.8rem
|
||||
height: 5.6rem
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
|
@ -153,7 +192,6 @@
|
|||
display: inline-block
|
||||
height: 100%
|
||||
width: 18.8%
|
||||
background-color: #999
|
||||
.icon-status
|
||||
position: absolute
|
||||
top: 0
|
||||
|
|
@ -168,4 +206,14 @@
|
|||
height: 100%
|
||||
text-align: center
|
||||
|
||||
@include buildTileColors(#44A662, #F5FBF6, 'passed')
|
||||
@include buildTileColors(#D94341, #FFF7F5, 'failed')
|
||||
@include buildTileColors(#D94341, #FFF7F5, 'errored')
|
||||
@include buildTileColors(#A1A0A0, #F5F5F5, 'canceled')
|
||||
@include buildTileColors(#ECCE4B, #eeeeee, 'started')
|
||||
@include buildTileColors(#ECCE4B, #eeeeee, 'queued')
|
||||
@include buildTileColors(#ECCE4B, #eeeeee, 'booting')
|
||||
@include buildTileColors(#ECCE4B, #eeeeee, 'received')
|
||||
@include buildTileColors(#ECCE4B, #eeeeee, 'created')
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
{{#if content.isLoaded}}
|
||||
{{#each controller as |build|}}
|
||||
<ul>
|
||||
{{#each controller as |build|}}
|
||||
|
||||
{{#if displayNewBranchRows}}
|
||||
{{branch-row build=build}}
|
||||
{{else}}
|
||||
{{builds-item build=build}}
|
||||
{{/if}}
|
||||
|
||||
{{#if displayNewBranchRows}}
|
||||
{{branch-row build=build}}
|
||||
{{else}}
|
||||
{{builds-item build=build}}
|
||||
{{/if}}
|
||||
|
||||
{{else}}
|
||||
{{no-builds repo=noticeData isPR=displayPullRequests isBranch=displayBranches}}
|
||||
{{/each}}
|
||||
{{no-builds repo=noticeData isPR=displayPullRequests isBranch=displayBranches}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{#if displayShowMoreButton}}
|
||||
<p>
|
||||
{{show-more-button isLoading=isLoading showMore=(action 'showMoreBuilds')}}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,75 @@
|
|||
<li class="branch-row failed">
|
||||
<div class="two-line">
|
||||
<div class="branch-name">
|
||||
<h2 class="row-item"><span class="icon-status failed"></span>master</h2>
|
||||
</div>
|
||||
<div class="branch-builds">
|
||||
<div class="row-item"><a href="#"><span class="icon-crane"></span>6 builds</a></div>
|
||||
</div>
|
||||
<div class="two-line">
|
||||
<div class="branch-name">
|
||||
<h2 class="row-item"><span class="icon-status {{build.state}}" title="{{build.state}}"></span>{{build.commit.branch}}</h2>
|
||||
</div>
|
||||
<div class="two-line">
|
||||
<div class="branch-request">
|
||||
<div class="row-item"><a href="#"><span class="icon-request push"></span>#2937 failed</a></div>
|
||||
</div>
|
||||
<div class="branch-calendar">
|
||||
<div class="row-item"><a href="#"><span class="icon-calendar"></span>2 days ago</a></div>
|
||||
</div>
|
||||
<div class="branch-builds">
|
||||
<div class="row-item"><a href="#"><span class="icon-crane"></span>~buildcount~ builds</a></div>
|
||||
</div>
|
||||
<div class="two-line">
|
||||
<div class="branch-commit">
|
||||
<div class="row-item"><a href="#"><span class="icon-request push"></span>1cbc26</a></div>
|
||||
</div>
|
||||
<div class="branch-commiter">
|
||||
<div class="row-item"><img src="//placehold.it/15x15" alt="" class="avatar">Mr. T</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two-line">
|
||||
<div class="branch-request">
|
||||
<div class="row-item">
|
||||
{{#link-to "build" build.repo build}}
|
||||
<span class="icon-request {{build.eventType}}" title="{{build.eventType}}"></span>{{build.number}} {{build.state}}
|
||||
{{/link-to}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="one-line">
|
||||
<div class="branch-nav dropup-trigger">
|
||||
<div class="row-item"><a href="#"><span class="icon-tofu"></span></a></div>
|
||||
</div>
|
||||
<div class="dropup--blue">
|
||||
<ul>
|
||||
<li><a href="#"><span class="icon-trigger"></span>Trigger a build</a></li>
|
||||
<li><a href="#"><span class="icon-eye"></span>View all builds</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="branch-calendar">
|
||||
<div class="row-item" title="{{pretty-date build.formattedFinishedAt}}"><span class="icon-calendar"></span>{{format-time build.finishedAt}}</div>
|
||||
</div>
|
||||
<div class="one-line">
|
||||
<ul class="build-tiles">
|
||||
<li class="passed">
|
||||
<a href="#" class="dropup-trigger">
|
||||
<span class="icon-status failed"></span>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="passed">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status passed"></span></a>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
<li class="passed">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status canceled"></span></a>
|
||||
<div class="dropup dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
<li class="passed">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status errored"></span></a>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
<li class=""></li>
|
||||
</div>
|
||||
<div class="two-line">
|
||||
<div class="branch-commit">
|
||||
<div class="row-item"><a href="{{urlGithubCommit}}" title="commit on GitHub"><span class="icon-github"></span>{{format-sha build.commit.sha}}</a></div>
|
||||
</div>
|
||||
<div class="branch-commiter">
|
||||
<div class="row-item"><img src="{{urlAuthorGravatarImage}}" alt="avatar" class="avatar">{{build.commit.committerName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one-line">
|
||||
<div class="branch-nav dropup-trigger">
|
||||
<div class="row-item"><a href="#"><span class="icon-tofu"></span></a></div>
|
||||
</div>
|
||||
<div class="dropup--blue">
|
||||
<ul>
|
||||
<li><a href="#"><span class="icon-trigger"></span>Trigger a build</a></li>
|
||||
<li><a href="#"><span class="icon-eye"></span>View all builds</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="one-line">
|
||||
<ul class="build-tiles">
|
||||
<li class="failed">
|
||||
<a href="#" class="dropup-trigger">
|
||||
<span class="icon-status failed"></span>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="passed">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status passed"></span></a>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
<li class="errored">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status errored"></span></a>
|
||||
<div class="dropup dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
<li class="canceled">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status canceled"></span></a>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
<li class="received">
|
||||
<a href="#" class="dropup-trigger"><span class="icon-status received"></span></a>
|
||||
<div class="dropup--status">
|
||||
<span class="icon-request push"></span> #23872
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user