sweet github icons now

src/git.js

@@ -694,6 +694,11 @@ GitEngine.prototype.dispatch = function(command, callback) {
   command.set('status', 'processing');
   this[command.get('method') + 'Starter'](); 
 
+  // TODO (get rid of)
+  for (var i = 0; i < 3; i++) {
+    this.animationQueue.add(new Animation({closure: function() { console.log(Math.random()); }}));
+  }
+
   this.animationQueue.start();
 };
 

src/index.html

@@ -47,8 +47,11 @@
       <p class="commandLine transitionBackground <%= status %>">
         <span class="arrows">&gt; &gt; &gt;</span>
         <%= rawStr %>
-        <span class="icons">
+        <span class="icons transitionOpacity">
-
+          <i class="icon-exclamation-sign"></i>
+          <i class="icon-check-empty"></i>
+          <i class="icon-retweet"></i>
+          <i class="icon-check"></i>
         </span>
       </p>
 

src/style/main.css

@@ -8,11 +8,9 @@ html, body {
   background: -ms-radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);
   background: radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);
   -webkit-perspective:600px;
-  font-family: 'Lato', Times, 'Times New Roman', serif;
-  font-size: 36px;
-  font-weight: 200;
-  letter-spacing: -0.02em;
 
+  font-family: Monaco, Courier, font-monospace;
+  font-size: 1.4em;
   color: #eee;
 }
 
@@ -25,6 +23,14 @@ html, body {
   transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+.transitionOpacity {
+  -webkit-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -moz-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -ms-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -o-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
 #controls {
   position: absolute;
   top: 0px;
@@ -45,6 +51,22 @@ p.commandLine, p.commandLineResult {
   background-color: black;
 }
 
+p.commandLine span.icons {
+  float: right;
+  margin-right: 5px;
+}
+
+p.commandLine span.icons i {
+  opacity: 0;
+}
+
+p.commandLine.inqueue span.icons i.icon-check-empty,
+p.commandLine.error span.icons i.icon-exclamation-sign,
+p.commandLine.processing span.icons i.icon-retweet,
+p.commandLine.finished span.icons i.icon-check {
+  opacity: 1;
+}
+
 p.commandLine.error {
   background-color: red;
 }