work on branch coloring and things

app/components/branch-row.coffee

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

app/styles/app/layouts/branches.sass

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

app/templates/builds.hbs

@@ -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}}
+      {{no-builds repo=noticeData isPR=displayPullRequests isBranch=displayBranches}}
-    {{/if}}
+    {{/each}}
-
+  </ul>
-  {{else}}
-    {{no-builds repo=noticeData isPR=displayPullRequests isBranch=displayBranches}}
-  {{/each}}
   {{#if displayShowMoreButton}}
     <p>
       {{show-more-button isLoading=isLoading showMore=(action 'showMoreBuilds')}}

app/templates/components/branch-row.hbs

@@ -1,68 +1,75 @@
-<li class="branch-row failed">
+<div class="two-line">
-  <div class="two-line">
+  <div class="branch-name"> 
-    <div class="branch-name"> 
+    <h2 class="row-item"><span class="icon-status {{build.state}}" title="{{build.state}}"></span>{{build.commit.branch}}</h2>
-      <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>
-  <div class="two-line">
+  <div class="branch-builds">
-    <div class="branch-request">
+    <div class="row-item"><a href="#"><span class="icon-crane"></span>~buildcount~ builds</a></div>
-      <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>
-  <div class="two-line">
+</div>
-    <div class="branch-commit">
+<div class="two-line">
-      <div class="row-item"><a href="#"><span class="icon-request push"></span>1cbc26</a></div>
+  <div class="branch-request">
-    </div>
+    <div class="row-item">
-    <div class="branch-commiter">
+      {{#link-to "build" build.repo build}}
-      <div class="row-item"><img src="//placehold.it/15x15" alt="" class="avatar">Mr. T</div>
+        <span class="icon-request {{build.eventType}}" title="{{build.eventType}}"></span>{{build.number}} {{build.state}}
-    </div>
+      {{/link-to}}
+      </div>
   </div>
-  <div class="one-line">
+  <div class="branch-calendar">
-    <div class="branch-nav dropup-trigger">
+    <div class="row-item" title="{{pretty-date build.formattedFinishedAt}}"><span class="icon-calendar"></span>{{format-time build.finishedAt}}</div>
-      <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>
-  <div class="one-line">
+</div>
-    <ul class="build-tiles">
+<div class="two-line">
-      <li class="passed">
+  <div class="branch-commit">
-        <a href="#" class="dropup-trigger">
+    <div class="row-item"><a href="{{urlGithubCommit}}" title="commit on GitHub"><span class="icon-github"></span>{{format-sha build.commit.sha}}</a></div>
-          <span class="icon-status failed"></span>
+  </div>
-          <div class="dropup--status">
+  <div class="branch-commiter">
-            <span class="icon-request push"></span> #23872
+    <div class="row-item"><img src="{{urlAuthorGravatarImage}}" alt="avatar" class="avatar">{{build.commit.committerName}}</div>
-          </div>
+  </div>
-        </a>
+</div>
-      </li>
+<div class="one-line">
-      <li class="passed">
+  <div class="branch-nav dropup-trigger">
-        <a href="#" class="dropup-trigger"><span class="icon-status passed"></span></a>
+    <div class="row-item"><a href="#"><span class="icon-tofu"></span></a></div>
-        <div class="dropup--status">
+  </div>
-          <span class="icon-request push"></span> #23872
+  <div class="dropup--blue">
-        </div>
+    <ul>
-      </li>
+      <li><a href="#"><span class="icon-trigger"></span>Trigger a build</a></li>
-      <li class="passed">
+      <li><a href="#"><span class="icon-eye"></span>View all builds</a></li>
-        <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>
     </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>