From dd319b343eec8777d532241864540e113d5b0acd Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Fri, 17 Jul 2015 17:58:27 +0200
Subject: [PATCH] add svg animation of received state

---
 app/components/jobs-item.coffee              |  5 +++++
 app/styles/app.scss                          |  2 ++
 app/styles/app/animations/booting-state.sass | 18 ++++++++++++++++++
 app/styles/app/layouts/build-job.sass        |  3 +++
 app/styles/app/modules/icons.sass            |  1 -
 app/templates/components/jobs-item.hbs       | 12 +++++++++++-
 6 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 app/styles/app/animations/booting-state.sass

diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee
index d2a60524..249ddab1 100644
--- a/app/components/jobs-item.coffee
+++ b/app/components/jobs-item.coffee
@@ -7,6 +7,11 @@ JobsItemComponent = Ember.Component.extend
   classNameBindings: ['job.state']
   classNames: ['tile', 'tile--jobs', 'row']
 
+  isBooting: (->
+    if @get('job.state') == 'received'
+      return true
+  ).property('job.state')
+
   languages: (->
     output = []
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index f0f266bc..8d65e9c2 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -25,6 +25,8 @@
 @import "app/components/sync-button";
 @import "app/components/loading-indicator";
 
+@import "app/animations/booting-state";
+
 @import "app/modules/section";
 @import "app/modules/loader";
 @import "app/modules/tiles";
diff --git a/app/styles/app/animations/booting-state.sass b/app/styles/app/animations/booting-state.sass
new file mode 100644
index 00000000..6c68fb80
--- /dev/null
+++ b/app/styles/app/animations/booting-state.sass
@@ -0,0 +1,18 @@
+.svg-booting
+  .bubble
+    transform-origin: center center
+    animation: bubbleScale 1.2s infinite linear
+
+  .bubble:nth-of-type(2)
+    animation-delay: 0.35s
+
+  .bubble:nth-of-type(3)
+    animation-delay: 0.7s
+
+
+@keyframes bubbleScale
+  0%, 80%, 100%
+    transform: scale(0)
+
+  40%
+    transform: scale(1.0)
diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass
index 3926191f..9006b152 100644
--- a/app/styles/app/layouts/build-job.sass
+++ b/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
diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass
index ec27b927..89a0b4cf 100644
--- a/app/styles/app/modules/icons.sass
+++ b/app/styles/app/modules/icons.sass
@@ -134,7 +134,6 @@
   background-image: inline-image('svg/icon-job-errored.svg')
 .icon--job.started,
 .icon--job.created,
-.icon--job.received,
 .icon--job.queued,
 .icon--started-yellow
   background-image: inline-image('svg/icon-job-started.svg')
diff --git a/app/templates/components/jobs-item.hbs b/app/templates/components/jobs-item.hbs
index 093678bd..a7a4a676 100644
--- a/app/templates/components/jobs-item.hbs
+++ b/app/templates/components/jobs-item.hbs
@@ -1,6 +1,16 @@
 {{#link-to "job" repo job}}
   <div class="tile-status tile-status--job">
-    <span class="icon icon--job {{job.state}}"></span>
+    {{#if isBooting}}
+      <svg class="svg-booting" version="1.1" width="30" height="12" viewBox="0 0 10 10" preserveAspectRatio="xMinYMid meet">
+        <g>
+          <circle class="bubble" fill="#CDBC2C" cx="7.686" cy="7.369" r="2"/>
+          <circle class="bubble" fill="#D6C826" cx="13.143" cy="7.369" r="2"/>
+          <circle class="bubble" fill="#D6C826" cx="2.232" cy="7.369" r="2"/>
+        </g>
+      </svg>
+    {{else}}
+      <span class="icon icon--job {{job.state}}"></span>
+    {{/if}}
   </div>
 
   <p class="job-id jobs-item build-status">