From 15cf475d043f46297a3c5ba7a50a8b5c12b240bb Mon Sep 17 00:00:00 2001
From: Kevin Sawicki <kevin@github.com>
Date: Mon, 29 Apr 2013 14:13:21 -0700
Subject: [PATCH] Use loading octicon in command panel

This removes the SVG spinner which had been incorrectly
rendering since the bootstrap upgrade due to box sizing
issues.
---
 .../lib/command-panel-view.coffee             |  3 +-
 .../stylesheets/command-panel.less            | 33 ++++++++++++-------
 static/images/spinner.svg                     | 30 -----------------
 static/root-view.less                         | 12 -------
 4 files changed, 24 insertions(+), 54 deletions(-)
 delete mode 100644 static/images/spinner.svg

diff --git a/src/packages/command-panel/lib/command-panel-view.coffee b/src/packages/command-panel/lib/command-panel-view.coffee
index b2a846be1..38a0dc82f 100644
--- a/src/packages/command-panel/lib/command-panel-view.coffee
+++ b/src/packages/command-panel/lib/command-panel-view.coffee
@@ -12,7 +12,8 @@ module.exports =
 class CommandPanelView extends View
   @content: ->
     @div class: 'command-panel tool-panel', =>
-      @div class: 'loading is-loading', outlet: 'loadingMessage', 'Searching...'
+      @div class: 'loading is-loading', outlet: 'loadingMessage', =>
+        @span 'Searching...'
       @div class: 'header', outlet: 'previewHeader', =>
         @button outlet: 'collapseAll', class: 'btn btn-mini pull-right', 'Collapse All'
         @button outlet: 'expandAll', class: 'btn btn-mini pull-right', 'Expand All'
diff --git a/src/packages/command-panel/stylesheets/command-panel.less b/src/packages/command-panel/stylesheets/command-panel.less
index 1aa0928bb..c7721471a 100644
--- a/src/packages/command-panel/stylesheets/command-panel.less
+++ b/src/packages/command-panel/stylesheets/command-panel.less
@@ -3,17 +3,28 @@
   padding: 0;
 
   .is-loading {
-    display: block;
-    margin: 0 auto 10px auto;
-    width: 100px;
-    background-color: #111111;
-    background-size: auto;
-    background-position: 5px 5px;
-    padding: 5px 5px 10px 30px;
-    border-radius: 3px;
-    border: 1px solid rgba(255,255,255,0.1);
-    border-top: 1px solid rgba(0,0,0,1);
-    border-left: 1px solid rgba(0,0,0,1);
+    margin-bottom: 10px;
+    text-align: center;
+
+    span {
+      padding: 5px 10px 5px 10px;
+      background-color: #111111;
+      text-align: center;
+      border-radius: 3px;
+      border: 1px solid rgba(255,255,255,0.1);
+      border-top: 1px solid rgba(0,0,0,1);
+      border-left: 1px solid rgba(0,0,0,1);
+
+      &:before {
+        font-family: 'Octicons Regular';
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+        -webkit-font-smoothing: antialiased;
+        content: '\f09e';
+      }
+    }
   }
 
   .preview-count {
diff --git a/static/images/spinner.svg b/static/images/spinner.svg
deleted file mode 100644
index 90d8297c5..000000000
--- a/static/images/spinner.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version='1.0' standalone='no'?>
-<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
-<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='20px' height='20px'>
-  <g>
-<circle cx='10' cy='2' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0s' />
-</circle>
-<circle cx='15.6569' cy='4.3431' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.1s' />
-</circle>
-<circle cx='18' cy='10' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.2s' />
-</circle>
-<circle cx='15.6569' cy='15.6569' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.3s' />
-</circle>
-<circle cx='10' cy='18' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.4s' />
-</circle>
-<circle cx='4.3431' cy='15.6569' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.5s' />
-</circle>
-<circle cx='2' cy='10' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.6s' />
-</circle>
-<circle cx='4.3431' cy='4.3431' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.7s' />
-</circle>
-  </g>
-</svg>
diff --git a/static/root-view.less b/static/root-view.less
index f58c62d76..ec17879fc 100644
--- a/static/root-view.less
+++ b/static/root-view.less
@@ -72,15 +72,3 @@ html, body {
   font-weight: normal;
   font-style: normal;
 }
-
-.is-loading {
-  background-image: url(images/spinner.svg);
-  background-repeat: no-repeat;
-  width: 14px;
-  height: 14px;
-  opacity: 0.5;
-  background-size: contain;
-  position: relative;
-  display: inline-block;
-  padding-left: 19px;
-}