Add more spinning indicators to our many buttons.

fedora-infra · Sep 10, 2015 · 31037a8 · 31037a8
1 parent 1231fa9
commit 31037a8
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/bodhi/static/js/forms.js b/bodhi/static/js/forms.js
@@ -9,6 +9,14 @@ function Form(idx, url){
 Form.prototype.idx = null;
 Form.prototype.url = null;
 
+Form.prototype.toggle_spinning_icons = function() {
+    $.each($('.indicator'), function(i, element) {
+        var spinclass = this.dataset['spinclass'];
+        this.dataset['spinclass'] = $(this).attr('class');
+        $(this).attr('class', spinclass);
+    });
+}
+
 // TODO, we call start before we start and finish before we finish, each time.
 // Ideally, it should not be possible to call start twice without the first
 // start having gotten to a finish already.  This might be a good place to look
@@ -18,12 +26,14 @@ Form.prototype.start = function() {
     // TODO -- clear all error divs before attempt this,
     // both knock their content, and hide them
     $(this.idx + " button").attr("disabled", "disable");
+    this.toggle_spinning_icons();
     cabbage.spin();
 }
 
 Form.prototype.finish = function() {
     $(this.idx + " button").attr("disabled", null);
     cabbage.finish();
+    this.toggle_spinning_icons();
 }
 
 Form.prototype.success = function(data) {

diff --git a/bodhi/templates/new_stack.html b/bodhi/templates/new_stack.html
@@ -159,11 +159,17 @@ <h2 class="pull-left">New Stack</span>
     <div class="row col-md-5">
       % if stack is not UNDEFINED:
       <div class="pull-left">
-            <button id="delete" class="btn btn-danger">Delete</button>
+            <button id="delete" class="btn btn-danger">
+              <span class="indicator fa fa-trash-o" data-spinclass="indicator fa fa-spinner fa-spin"></span>
+              Delete
+            </button>
       </div>
       % endif
       <div class="pull-right">
-            <button id="submit" class="btn btn-success">Save</button>
+            <button id="submit" class="btn btn-success">
+              <span class="indicator fa fa-save" data-spinclass="indicator fa fa-spinner fa-spin"></span>
+              Save
+            </button>
       </div>
     </div> <!-- end row -->
 

diff --git a/bodhi/templates/new_update.html b/bodhi/templates/new_update.html
@@ -311,8 +311,10 @@ <h2 class="pull-left">Edit
 
             <button id="submit" class="btn btn-success">
               % if update:
+              <span class="indicator fa fa-edit" data-spinclass="indicator fa fa-spinner fa-spin"></span>
               Edit
               % else:
+              <span class="indicator fa fa-save" data-spinclass="indicator fa fa-spinner fa-spin"></span>
               Submit
               % endif
             </button>

diff --git a/bodhi/templates/override.html b/bodhi/templates/override.html
@@ -134,9 +134,15 @@ <h2 class="pull-left">New Override</span>
       <div class="col-md-12">
         <div class="panel panel-default">
             <span class="pull-right">
-              <button id="submit" class="btn btn-success">Submit</button>
+              <button id="submit" class="btn btn-success">
+                <span class="indicator fa fa-save" data-spinclass="indicator fa fa-spinner fa-spin"></span>
+                Submit
+              </button>
               %if override is not UNDEFINED and override.expired_date is None:
-              <button id="expire" class="btn btn-warning">Expire</button>
+              <button id="expire" class="btn btn-warning">
+                <span class="indicator fa fa-clock-o" data-spinclass="indicator fa fa-spinner fa-spin"></span>
+                Expire
+              </button>
               %endif
             </span>
           </div>

diff --git a/bodhi/templates/update.html b/bodhi/templates/update.html
@@ -742,7 +742,10 @@ <h3>Comments <span class="badge">${len(update.comments)}</span>
 
       <div class="form-group">
         <div class="col-sm-offset-1 col-sm-5">
-          <button type="submit" class="pull-right btn btn-default">Add Comment</button>
+          <button type="submit" class="pull-right btn btn-default">
+            <span class="indicator fa fa-comment" data-spinclass="indicator fa fa-spinner fa-spin"></span>
+            Add Comment
+          </button>
         </div>
       </div>
     </form>