Merge pull request #379 from travis-ci/booting-state

received state animation

app/components/jobs-item.coffee

@@ -7,6 +7,15 @@ JobsItemComponent = Ember.Component.extend
   classNameBindings: ['job.state']
   classNames: ['tile', 'tile--jobs', 'row']
 
+  isAnimating: (->
+    state = @get('job.state')
+    animationStates = ['received', 'queued', 'started', 'booting']
+
+    unless animationStates.indexOf(state) == -1
+      true
+
+  ).property('job.state')
+
   languages: (->
     output = []
 

app/styles/app/layouts/build-job.sass

@@ -38,6 +38,9 @@
   .tile-status--job
     width: 2em
 
+    .svg-booting
+      margin: 0.7em 0.3em
+
   .jobs-item
     padding: .1em 0
     .icon

app/styles/app/modules/icons.sass

@@ -121,22 +121,19 @@
 
 .icon--env
   background-image: inline-image('svg/icon-environment-dark2.svg')
-.icon--cross-red,
 .icon--job.failed,
 .icon--job.rejected
   background-image: inline-image('svg/icon-job-failed.svg')
-.icon--check-green,
 .icon--job.passed,
 .icon--job.accepted
   background-image: inline-image('svg/icon-job-passed.svg')
-.icon--error-grey,
 .icon--job.errored
   background-image: inline-image('svg/icon-job-errored.svg')
 .icon--job.started,
-.icon--job.created,
-.icon--job.received,
 .icon--job.queued,
-.icon--started-yellow
+.icon--job.booting,
+.icon--job.received,
+.icon--job.created,
   background-image: inline-image('svg/icon-job-started.svg')
 .icon--job.canceled
   background-image: inline-image('svg/icon-job-canceled.svg')
@@ -210,3 +207,29 @@
 
 .icon-flag
   background-image: inline-image('svg/notice-flag.svg')
+
+
+.icon-receiving
+  margin: 0.3rem 0.5rem;
+  display: inline-block;
+  i
+    width: 4px
+    height: 4px
+    border-radius: 50%
+    display: inline-block
+    background-color: $start-bg-color
+    transform-origin: center center
+    animation: bubbleScale 1.2s infinite linear
+  i:nth-of-type(2)
+    animation-delay: 0.35s
+  i:nth-of-type(3)
+    animation-delay: 0.7s
+
+
+@keyframes bubbleScale
+  0%, 80%, 100%
+    transform: scale(0)
+
+  40%
+    transform: scale(1.0)
+

app/templates/components/jobs-item.hbs

@@ -1,6 +1,10 @@
 {{#link-to "job" repo job}}
   <div class="tile-status tile-status--job">
-    <span class="icon icon--job {{job.state}}"></span>
+    {{#if isAnimating}}
+      <span class="icon-receiving"><i></i><i></i><i></i></span>
+    {{else}}
+      <span class="icon icon--job {{job.state}}"></span>
+    {{/if}}
   </div>
 
   <p class="job-id jobs-item build-status">