Replacing the gif AJAX spinner with spin.js

Fixes Bug 992822

Change-Id: Ibd1b81ca54dd47ffb01f3ced9ca92ad1ed727483

horizon/static/horizon/js/horizon.js

@@ -80,6 +80,16 @@ var Horizon = function() {
     }
   };
 
+  horizon.spinner_options = {
+    lines:  10,
+    length: 5,
+    width:  2,
+    radius: 3,
+    color:  '#000',
+    speed:  0.8,
+    trail:  50
+  };
+
   /* Namespace for core functionality related to DataTables. */
   horizon.datatables = {
     update: function () {
@@ -140,11 +150,17 @@ var Horizon = function() {
             },
             success: function (data, textStatus, jqXHR) {
               var $new_row = $(data);
+
               if($new_row.hasClass('status_unknown')) {
-                // only add spinning animation if row needs update
-                var spinner = '<i class="icon-updating ajax-updating"></i>';
-                $new_row.find("td.status_unknown").prepend(spinner);
+                var spinner_elm = $new_row.find("td.status_unknown:last");
+
+                spinner_elm.css('padding-left', '32px');
+                spinner_elm.spin(horizon.spinner_options);
+
+                $(spinner_elm.data().spinner.el).css('top', '9px');
+                $(spinner_elm.data().spinner.el).css('left', '-15px');
               }
+
               // Only replace row if the html content has changed
               if($new_row.html() != $row.html()) {
                 if($row.find(':checkbox').is(':checked')) {

horizon/static/horizon/js/spin.jquery.js

@@ -0,0 +1,17 @@
+// jQuery add-on for allowing spin.js to act on jQuery elements directly.
+
+$.fn.spin = function(opts) {
+  this.each(function() {
+    var $this = $(this),
+        data = $this.data();
+
+    if (data.spinner) {
+      data.spinner.stop();
+      delete data.spinner;
+    }
+    if (opts !== false) {
+      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
+    }
+  });
+  return this;
+};

openstack_dashboard/static/dashboard/css/style.css

@@ -514,17 +514,8 @@ table form {
   white-space: nowrap;
 }
 
-.icon-updating.ajax-updating {
-  background: transparent url(../img/spinner.gif) no-repeat center center;
-  padding: 1px;
-}
-
-td .icon-updating.ajax-updating {
-  margin-right: 5px;
-}
-
 .overview {
-    font-size: 24px;
+  font-size: 24px;
 }
 
 #monitoring {

openstack_dashboard/templates/_scripts.html

@@ -1,5 +1,7 @@
 {% comment %} jQuery and Plugins {% endcomment %}
 <script src='{{ STATIC_URL }}horizon/js/jquery/jquery.min.js' type='text/javascript' charset="utf-8"></script>
+<script src="{{ STATIC_URL }}horizon/js/spin.js" type="text/javascript" charset="utf-8"></script>
+<script src="{{ STATIC_URL }}horizon/js/spin.jquery.js" type="text/javascript" charset="utf-8"></script>
 <script src='{{ STATIC_URL }}horizon/js/json2.js' type='text/javascript' charset="utf-8"></script>
 <script src='{{ STATIC_URL }}horizon/js/jquery/jquery.cookie.js' type='text/javascript' charset="utf-8"></script>
 <script src='{{ STATIC_URL }}horizon/js/jquery/jquery.quicksearch.js' type='text/javascript' charset="utf-8"></script>