diff --git a/_layouts/default.html b/_layouts/default.html index 53d619d7..e251d0d0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -17,8 +17,8 @@ - - + +
diff --git a/app/index.html b/app/index.html index 48df1faf..9fe1ae93 100644 --- a/app/index.html +++ b/app/index.html @@ -24,6 +24,7 @@ + @@ -65,10 +66,7 @@
- Recline Data Explorer - + Recline Data Explorer
- Use the Explorer - Use the Library + Use the Explorer + Use the Library
diff --git a/src/view.js b/src/view.js index ed3edfce..ada96afb 100644 --- a/src/view.js +++ b/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 = ' \ -
× \ - {{message}} \ - {{#loader}} \ + if (tmplData.loader) { + var _template = ' \ +
\ + {{message}} \   \ - {{/loader}} \ -
'; - var _templated = $.mustache(_template, tmplData); +
'; + } else { + var _template = ' \ +
× \ + {{message}} \ +
'; + } + 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(); + }); } });