SONAR-4725 Update error display. Update select/deselect effects.

2 files changed, 49 insertions, 11 deletions

diff --git a/sonar-server/src/main/webapp/javascripts/select-list.js b/sonar-server/src/main/webapp/javascripts/select-list.js
index b3394481320..b2cb77dfd8b 100644
--- a/sonar-server/src/main/webapp/javascripts/select-list.js
+++ b/sonar-server/src/main/webapp/javascripts/select-list.js
@@ -1,7 +1,9 @@
-/*global alert:false, Backbone:false, Spinner:false*/
+/*global Backbone:false, Spinner:false*/
 
 (function ($) {
 
+  var showError = null;
+
   /*
    * SelectList Collection
    */
@@ -72,6 +74,20 @@
               this.settings.tooltips.select);
     },
 
+    remove: function(postpone) {
+      if (postpone) {
+        var that = this;
+        setTimeout(function() {
+          that.$el.addClass('removed');
+          setTimeout(function() {
+            Backbone.View.prototype.remove.call(that, arguments);
+          }, 500);
+        }, 500);
+      } else {
+        Backbone.View.prototype.remove.call(this, arguments);
+      }
+    },
+
     toggle: function() {
       var selected = this.model.get('selected'),
           that = this;
@@ -89,9 +105,7 @@
           .done(function() {
             that.model.set('selected', !selected);
           })
-          .fail(function() {
-            alert(that.settings.errorMessage);
-          });
+          .fail(showError);
     }
   });
 
@@ -132,6 +146,8 @@
     initialize: function(options) {
       this.listenTo(this.collection, 'add', this.renderListItem);
       this.listenTo(this.collection, 'reset', this.renderList);
+      this.listenTo(this.collection, 'remove', this.removeModel);
+      this.listenTo(this.collection, 'change:selected', this.confirmFilter);
       this.settings = options.settings;
     },
 
@@ -154,10 +170,17 @@
           .on('keyup', $.debounce(250, keyup));
 
       this.listItemViews = [];
+
+      showError = function() {
+        $('<div>')
+            .addClass('error').text(that.settings.errorMessage)
+            .insertBefore(that.$el);
+      };
     },
 
     renderList: function() {
       this.listItemViews.forEach(function(view) { view.remove(); });
+      this.listItemViews = [];
       this.collection.each(this.renderListItem, this);
       this.$listContainer.scrollTop(0);
     },
@@ -172,6 +195,17 @@
       itemView.render();
     },
 
+    confirmFilter: function(model) {
+      if (this.currentFilter !== 'all') {
+        this.collection.remove(model);
+      }
+    },
+
+    removeModel: function(model, collection, options) {
+      this.listItemViews[options.index].remove(true);
+      this.listItemViews.splice(options.index, 1);
+    },
+
     filterBySelection: function(filter) {
       var that = this;
       filter = this.currentFilter = filter || this.currentFilter;
@@ -193,9 +227,7 @@
           success: function() {
             that.hideFetchSpinner();
           },
-          error: function() {
-            alert(that.settings.errorMessage);
-          }
+          error: showError
         });
       }
     },
@@ -230,9 +262,7 @@
           success: function() {
             that.hideFetchSpinner();
           },
-          error: function() {
-            alert(that.settings.errorMessage);
-          }
+          error: showError
         });
       } else {
         this.filterBySelection();
diff --git a/sonar-server/src/main/webapp/stylesheets/select-list.css b/sonar-server/src/main/webapp/stylesheets/select-list.css
index 3cf00de8555..d0b4b1e6927 100644
--- a/sonar-server/src/main/webapp/stylesheets/select-list.css
+++ b/sonar-server/src/main/webapp/stylesheets/select-list.css
@@ -17,7 +17,7 @@
 }
 
 .select-list-list {
-
+  overflow-x: hidden;
 }
 
   .select-list-list > li {
@@ -48,6 +48,14 @@
     opacity: 0.6;
   }
 
+  .select-list-list > li.removed {
+    -webkit-transform: translateX(100%);
+       -moz-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+         -o-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+
 .select-list-list-checkbox {
   position: absolute;
   top: 0; left: 0; bottom: 0;