instant feedback for jingle action buttons

2 files changed, 9 insertions, 0 deletions

diff --git a/www/js/jingles.js b/www/js/jingles.js
index 70d84f9..fb36934 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -209,6 +209,7 @@ Rivendell.JingleCutView.prototype.render = function() {
 };
 
 Rivendell.JingleCutView.prototype.move = function() {
+  this.$el.find('td:first').html('<span class="label label-default"><span class="glyphicon glyphicon-repeat spin"></span></span>')
   var self = this;
   var destinationCart = this.model.cartNumber;
 
@@ -237,6 +238,7 @@ Rivendell.JingleCutView.prototype.move = function() {
 };
 
 Rivendell.JingleCutView.prototype.toggleActive = function() {
+  this.$el.find('td:first').html('<span class="label label-default"><span class="glyphicon glyphicon-repeat spin"></span></span>')
   var destinationCart = this.model.cartNumber;
   if (this.model.active) {
     destinationCart++;
@@ -250,6 +252,7 @@ Rivendell.JingleCutView.prototype.toggleActive = function() {
 };
 
 Rivendell.JingleCutView.prototype.delete = function() {
+  this.$el.find('td:first').html('<span class="label label-default"><span class="glyphicon glyphicon-repeat spin"></span></span>')
   var self = this;
   rivendell.removeCut(this.model.cartNumber, this.model.number, function() {
     self.model.cart.removeCut(self.model);
diff --git a/www/styles/main-style.css b/www/styles/main-style.css
index 8a4793f..5b8c5db 100644
--- a/www/styles/main-style.css
+++ b/www/styles/main-style.css
@@ -97,3 +97,9 @@ body {
 .text-center {
     text-align: center;
 }
+
+.spin {
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin { 100% { transform:rotate(360deg); } }