work on booting state icons

app/components/status-icon.coffee

@@ -22,4 +22,12 @@ StatusIconComponent = Ember.Component.extend
     @get('build.state') == 'canceled'
   ).property('build.state')
 
+  isRunning: (->
+    @get('build.state') == 'started' || 
+    @get('build.state') == 'queued' ||
+    @get('build.state') == 'booting' ||
+    @get('build.state') == 'received' ||
+    @get('build.state') == 'created'
+  ).property('build.state')
+
 `export default StatusIconComponent`

app/controllers/branches.coffee

@@ -5,7 +5,6 @@
 BranchesController = Ember.Controller.extend
 
   defaultBranch: (->
-    
     repos = @get('model')
 
     # repos = repos.filter (item, index) ->

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/animation/tractor";
 

app/styles/app/components/build-tile.sass

@@ -0,0 +1,61 @@
+@mixin buildTileColors($color, $bg, $status)
+  > .#{$status}
+    background-color: $bg
+    .icon-request g > *
+      fill: $color
+    &:hover
+      background-color: $color
+      .status-icon g > *
+        fill: $white
+      .status-icon .circle
+        border-color: $white
+
+    @media #{$medium-up}
+      .dropup--status
+        border-color: $color
+        color: $color
+        &:before
+          background-color: $color
+
+
+.build-tiles
+  height: 5.6rem
+  margin: 0
+  padding: 0
+  list-style: none
+  li
+    position: relative
+    display: inline-block
+    height: 100%
+    width: 18.8%
+    .status-icon
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      width: 2rem
+      height: 2rem
+      margin: auto
+      background-color: transparent
+      .is-rotating
+        width: 100%
+        height: 100%
+        line-height: 1.5
+      .circle
+        width: 8px
+        height: 8px
+  a
+    display: block
+    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, rgba(#ECCE4B, 0.4), 'started')
+  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'queued')
+  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'booting')
+  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'received')
+  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'created')

app/styles/app/layouts/branches.sass

@@ -10,28 +10,12 @@
     .icon-request g > *
       fill: $color
 
-@mixin buildTileColors($color, $bg, $status)
-  > .#{$status}
-    background-color: $bg
-    .icon-request g > *
-      fill: $color
-    &:hover
-      background-color: $color
-      .status-icon g > *
-        fill: $white
 
-    @media #{$medium-up}
+// .tabbody
-      .dropup--status
+//   ul
-        border-color: $color
+//     padding: 0
-        color: $color
+//     margin: 0
-        &:before
+//     list-style: none
-          background-color: $color
-
-.tabbody
-  ul
-    padding: 0
-    margin: 0
-    list-style: none
 
 .branch-row
   border: 1px solid $cream-dark
@@ -198,7 +182,6 @@
   @media #{$medium-up}
     top: -3em
     padding: .2em .3em
-    transform: translate(-1em, 0em);
     white-space: nowrap
     font-size: 14px;
     border: 1px solid $red-dark
@@ -210,41 +193,29 @@
   path
     fill: $teal-dark
 
+// @todo refactor to status-icon module
+.status-icon
+  .is-rotating
+    width: 17px
+    height: 19px
+    line-height: 1
+    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 2px #ECCE4B
+      border-radius: 50%
+      transform-origin: center center
 
-// @todo refactor to build-tiles module
+@keyframes rotation
-.build-tiles
+  0%
-  height: 5.6rem
+    transform: rotateZ(0deg)
-  margin: 0
+  45%, 55%
-  padding: 0
+    transform: rotateZ(180deg)
-  list-style: none
+  100%
-  li
+    transform: rotateZ(360deg)
-    position: relative
-    display: inline-block
-    height: 100%
-    width: 18.8%
-    .status-icon
-      position: absolute
-      top: 0
-      right: 0
-      bottom: 0
-      left: 0
-      width: 2rem
-      height: 2rem
-      margin: auto
-      background-color: transparent
-  a
-    display: block
-    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, rgba(#ECCE4B, 0.5), 'started')
-  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'queued')
-  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'booting')
-  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'received')
-  @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'created')
-
 

app/styles/app/layouts/settings.sass

@@ -1,9 +1,4 @@
 
-.small-title
-  font-size: 18px
-  color: $teal-light
-  font-weight: 400
-
 .settings
   padding-top: .8em
 

app/styles/app/misc.sass

@@ -18,3 +18,12 @@
   a
     color: #c00
     text-decoration: underline
+
+
+.small-title
+  font-size: 18px
+  color: $teal-light
+  font-weight: 400
+
+.blank-list
+  @include resetul

app/templates/branches.hbs

@@ -1,16 +1,14 @@
 
 <section>
-  <h2>Default Branch</h2>
+  <h2 class="small-title">Default Branch</h2>
-
+  <ul class="blank-list">
-  <ul>
     {{branch-row build=defaultBranch}}
   </ul>
 </section>
 
 <section>
-  <h2>Active Branches</h2>
+  <h2 class="small-title">Active Branches</h2>
-
+  <ul class="blank-list">
-  <ul>
     {{#each branch in activeBranches}}
       {{branch-row build=branch}}
     {{else}}
@@ -20,9 +18,8 @@
 </section>
 
 <section>
-  <h2>Inactive Branches</h2>
+  <h2 class="small-title">Inactive Branches</h2>
-
+  <ul class="blank-list">
-  <ul>
     {{#each branch in inactiveBranches}}
       {{branch-row build=branch}}
     {{else}}
@@ -36,4 +33,4 @@
 
 {{!-- {{else}}
   {{loading-indicator}}
-{{/if}} --}}
+{{/if}} --}}

app/templates/components/branch-row.hbs

@@ -137,13 +137,15 @@
   </div>
 </div>
 <div class="one-line">
-  {{#unless isLoading }}
+  <ul class="build-tiles">
-    <ul class="build-tiles">
+    {{#unless isLoading }}
-      {{#each buildTile in getLast5Builds}}
+      <ul class="build-tiles">
-        {{build-tile build=buildTile}}
+        {{#each buildTile in getLast5Builds}}
-      {{/each}}
+          {{build-tile build=buildTile}}
-    </ul>
+        {{/each}}
-  {{else}}
+      </ul>
-    {{loading-indicator}}
+    {{else}}
-  {{/unless}}
+      {{loading-indicator}}
+    {{/unless}}
+  </ul>
 </div>

app/templates/components/status-icon.hbs

@@ -42,3 +42,9 @@
   </svg>
 {{/if}}
 
+{{#if isRunning}}
+  <div class="is-rotating">
+    <span class="circle"></span>
+    <span class="circle"></span>
+  </div>
+{{/if}}