New Issues Page: add spinners

5 files changed, 69 insertions, 41 deletions

diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js b/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
index 3d9b7693741..48a42c9170e 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
@@ -295,12 +295,12 @@ jQuery(function() {
     this.storeQuery(query, this.issues.sorting);
 
     var that = this;
-    this.issuesView.$el.addClass('fetching');
+    this.issuesView.$el.addClass('navigator-fetching');
     if (firstPage) {
       this.issues.fetch({
         data: fetchQuery,
         success: function() {
-          that.issuesView.$el.removeClass('fetching');
+          that.issuesView.$el.removeClass('navigator-fetching');
         }
       });
     } else {
@@ -308,7 +308,7 @@ jQuery(function() {
         data: fetchQuery,
         remove: false,
         success: function() {
-          that.issuesView.$el.removeClass('fetching');
+          that.issuesView.$el.removeClass('navigator-fetching');
         }
       });
     }
diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues.js b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
index 8b7e25c01ac..b45fdaf504b 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
@@ -170,14 +170,17 @@ jQuery(function() {
             model: this.model
           });
 
+      jQuery('.navigator-details').addClass('navigator-fetching');
       if (this.model.get('line')) {
         jQuery.when(detailView.model.fetch()).done(function() {
           that.fetchSource(detailView, function() {
+            jQuery('.navigator-details').removeClass('navigator-fetching');
             app.detailsRegion.show(detailView);
           });
         });
       } else {
         jQuery.when(detailView.model.fetch()).done(function() {
+          jQuery('.navigator-details').removeClass('navigator-fetching');
           app.detailsRegion.show(detailView);
         });
       }
@@ -769,7 +772,13 @@ jQuery(function() {
 
 
     fetchRule: function() {
-      this.rule.fetch();
+      var that = this;
+      this.$('#tab-issue-rule').addClass('navigator-fetching');
+      this.rule.fetch({
+        success: function() {
+          that.$('#tab-issue-rule').removeClass('navigator-fetching');
+        }
+      });
     },
 
 
@@ -897,10 +906,13 @@ jQuery(function() {
             detailView: this
           });
 
+      this.$('.code-issue-actions').addClass('navigator-fetching');
+
       actionPlans.fetch({
         reset: true,
         data: { project: this.model.get('project') },
         success: function() {
+          that.$('.code-issue-actions').removeClass('navigator-fetching');
           that.showActionView(planFormView);
         }
       });
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index b5f8c9bd1dc..48690f44904 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -69,6 +69,23 @@
   left: 0;
   width: 100%;
 }
+.navigator-fetching:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff url(../images/loading.gif) no-repeat 4px 4px;
+}
+.navigator-fetching.code-issue-actions,
+.navigator-fetching#tab-issue-rule {
+  position: relative;
+}
+.navigator-fetching.code-issue-actions:before,
+.navigator-fetching#tab-issue-rule:before {
+  background-color: #EFEFEF;
+}
 .navigator-header {
   padding: 0 10px;
   border-bottom: 1px solid #cdcdcd;
@@ -166,18 +183,6 @@
 .navigator-results-list > li.active .line:last-child {
   border-bottom-color: #e1e1e1;
 }
-.navigator-results-list.fetching {
-  position: relative;
-}
-.navigator-results-list.fetching:before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(255, 255, 255, 0.7);
-}
 .navigator-results-no-issues {
   padding-top: 20%;
   color: #999;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.css b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
index 87f33b867fa..48c5f71bd73 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
@@ -69,6 +69,23 @@
   left: 0;
   width: 100%;
 }
+.navigator-fetching:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff url(../images/loading.gif) no-repeat 4px 4px;
+}
+.navigator-fetching.code-issue-actions,
+.navigator-fetching#tab-issue-rule {
+  position: relative;
+}
+.navigator-fetching.code-issue-actions:before,
+.navigator-fetching#tab-issue-rule:before {
+  background-color: #EFEFEF;
+}
 .navigator-header {
   padding: 0 10px;
   border-bottom: 1px solid #cdcdcd;
@@ -166,18 +183,6 @@
 .navigator-results-list > li.active .line:last-child {
   border-bottom-color: #e1e1e1;
 }
-.navigator-results-list.fetching {
-  position: relative;
-}
-.navigator-results-list.fetching:before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(255, 255, 255, 0.7);
-}
 .navigator-results-no-issues {
   padding-top: 20%;
   color: #999;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.less b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
index a1b35b28e83..435d20aca37 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.less
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
@@ -65,6 +65,25 @@
 }
 
 
+.navigator-fetching {
+  &:before {
+    content: " ";
+    position: absolute;
+    top: 0; bottom: 0; left: 0; right: 0;
+    background: #fff url(../images/loading.gif) no-repeat 4px 4px;
+  }
+
+  &.code-issue-actions,
+  &#tab-issue-rule {
+    position: relative;
+
+    &:before {
+      background-color: #EFEFEF;
+    }
+  }
+}
+
+
 
 // Header
 .navigator-header {
@@ -189,19 +208,6 @@
     }
 
   }
-
-
-  &.fetching {
-    position: relative;
-
-    &:before {
-      content: " ";
-      position: absolute;
-      top: 0; bottom: 0; left: 0; right: 0;
-      background-color: rgba(255, 255, 255, 0.7);
-    }
-  }
-
 }
 
 .navigator-results-no-issues {