[#82,notifications][s]: less obtrusive notifications - fixes #82.

* switch loading notification to overlay and make it persist until loading complete (then fade)
* get rid of query success notification

css/data-explorer.css

@@ -1,3 +1,8 @@
+.recline-data-explorer .data-view-container {
+  display: block;
+  clear: both;
+}
+
 .recline-data-explorer .header .navigation,
 .recline-data-explorer .header .navigation li,
 .recline-data-explorer .header .pagination,
@@ -25,6 +30,10 @@
   display: inline;
 }
 
+/**********************************************************
+  * Query Editor
+  *********************************************************/
+
 .header .recline-query-editor {
   float: right;
   height: 30px;
@@ -64,10 +73,9 @@
   vertical-align: top;
 }
 
-.recline-data-explorer .data-view-container {
-  display: block;
-  clear: both;
-}
+/**********************************************************
+  * Query Editor
+  *********************************************************/
 
 .recline-filter-editor .filter-term .input-append a {
   margin-left: -5px;
@@ -88,3 +96,20 @@
   display: inline-block;
 }
 
+.recline-data-explorer .alert-loader {
+  position: absolute;
+  width: 200px;
+  left: 50%;
+  margin-left: -100px;
+  z-index: 10000;
+  padding: 40px 0px 40px 0px;
+  margin-top: -10px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  border-top: none;
+}
+

src/view.js

@@ -222,12 +222,11 @@ my.DataExplorer = Backbone.View.extend({
     }
 
     this.model.bind('query:start', function() {
-        self.notify({message: 'Loading data', loader: true});
+        self.notify({loader: true, persist: true});
       });
     this.model.bind('query:done', function() {
         self.clearNotifications();
         self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
-        self.notify({message: 'Data loaded', category: 'success'});
       });
     this.model.bind('query:fail', function(error) {
         self.clearNotifications();
@@ -392,19 +391,25 @@ my.DataExplorer = Backbone.View.extend({
   // * loader: if true show loading spinner
   notify: function(flash) {
     var tmplData = _.extend({
-      message: '',
-      category: 'warning'
+      message: 'Loading',
+      category: 'warning',
+      loader: false
       },
       flash
     );
-    var _template = ' \
-      <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
-        {{message}} \
-          {{#loader}} \
+    if (tmplData.loader) {
+      var _template = ' \
+        <div class="alert alert-info alert-loader"> \
+          {{message}} \
           <span class="notification-loader">&nbsp;</span> \
-          {{/loader}} \
-      </div>';
-    var _templated = $.mustache(_template, tmplData); 
+        </div>';
+    } else {
+      var _template = ' \
+        <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
+          {{message}} \
+        </div>';
+    }
+    var _templated = $($.mustache(_template, tmplData));
     _templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
     if (!flash.persist) {
       setTimeout(function() {
@@ -420,7 +425,9 @@ my.DataExplorer = Backbone.View.extend({
   // Clear all existing notifications
   clearNotifications: function() {
     var $notifications = $('.recline-data-explorer .alert-messages .alert');
-    $notifications.remove();
+    $notifications.fadeOut(1500, function() {
+      $(this).remove();
+    });
   }
 });