Add handler to close flash messages

frodenas · Jan 17, 2012 · ccafe50 · ccafe50
1 parent 09499f0
commit ccafe50
Show file tree

Hide file tree

Showing 26 changed files with 106 additions and 77 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -22,6 +22,15 @@
 //= require users
 //= require_self
 
+// JQuery handler to close flash messages
+$(function() {
+  $('body').on('click', '#flash .close', function(e) {
+    $(this).parent('#flash').fadeOut('slow');
+    e && e.preventDefault()
+  });
+});
+
+// Browser Update
 var $buoop = {vs:{i:8,f:4,o:11,s:5,n:9}}
 $buoop.ol = window.onload;
 window.onload=function(){
@@ -32,6 +41,7 @@ window.onload=function(){
   document.body.appendChild(e);
 }
 
+// Google Analytics
 var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview'],['_trackPageLoadTime']];
 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';

diff --git a/app/assets/javascripts/apps.js.erb b/app/assets/javascripts/apps.js.erb
@@ -69,8 +69,8 @@ $(function() {
         }
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -85,8 +85,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('start');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -100,8 +100,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('stop');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -115,8 +115,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('restart');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -139,8 +139,8 @@ $(function() {
         }
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -154,8 +154,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('delete');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {

diff --git a/app/assets/javascripts/appsshow.js.erb b/app/assets/javascripts/appsshow.js.erb
@@ -74,16 +74,16 @@ $(function() {
               row.fadeIn(1800, function() {
                 $(this).removeClass('highlight');
               });
-              $('#flash').empty();
+              $('#flash-content').empty();
             },
             'submitdata' : function(value, settings) {
               var value = rangeapi.getValue();
               return {'instances': value};
             },
             'onerror'   : function(settings, original, xhr) {
               original.reset();
-              $('#flash').empty();
-              $('#flash').append('<div class="alert">Error ' + xhr.status + ': ' + xhr.responseText + '</div>');
+              $('#flash-content').empty();
+              $('#flash-content').append('<div class="alert">Error ' + xhr.status + ': ' + xhr.responseText + '</div>');
               $('#flash').fadeIn('slow');
             }
           });
@@ -101,12 +101,12 @@ $(function() {
               row.fadeIn(1800, function() {
                 $(this).removeClass('highlight');
               });
-              $('#flash').empty();
+              $('#flash-content').empty();
             },
             'onerror'  : function(settings, original, xhr) {
               original.reset();
-              $('#flash').empty();
-              $('#flash').append('<div class="alert">Error ' + xhr.status + ': ' + xhr.responseText + '</div>');
+              $('#flash-content').empty();
+              $('#flash-content').append('<div class="alert">Error ' + xhr.status + ': ' + xhr.responseText + '</div>');
               $('#flash').fadeIn('slow');
             }
           });
@@ -155,7 +155,7 @@ $(function() {
                       $(this).removeClass('highlight');
                     });
                     appEnvvarsTable.fnUpdate(value, aPos[0], aPos[1]);
-                    $('#flash').empty();
+                    $('#flash-content').empty();
                   },
                   'submitdata': function(value, settings) {
                     return {
@@ -166,8 +166,8 @@ $(function() {
                   },
                   'onerror'   : function(settings, original, xhr) {
                     original.reset();
-                    $('#flash').empty();
-                    $('#flash').append('<div class="alert">Error ' + xhr.status + ': ' + xhr.responseText + '</div>');
+                    $('#flash-content').empty();
+                    $('#flash-content').append('<div class="alert">Error ' + xhr.status + ': ' + xhr.responseText + '</div>');
                     $('#flash').fadeIn('slow');
                   }
                 });
@@ -232,8 +232,8 @@ $(function() {
       })
       .on('ajax:error', function(evt, xhr, status, error) {
         request_processed = true;
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {;
@@ -247,8 +247,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('delete');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -270,8 +270,8 @@ $(function() {
       })
       .on('ajax:error', function(evt, xhr, status, error) {
         request_processed = true;
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {;
@@ -285,8 +285,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('delete');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -308,8 +308,8 @@ $(function() {
       })
       .on('ajax:error', function(evt, xhr, status, error) {
         request_processed = true;
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -323,8 +323,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('delete');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {

diff --git a/app/assets/javascripts/services.js.erb b/app/assets/javascripts/services.js.erb
@@ -55,8 +55,8 @@ $(function() {
       })
       .on('ajax:error', function(evt, xhr, status, error) {
         request_processed = true;
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -70,8 +70,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('delete');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {

diff --git a/app/assets/javascripts/users.js.erb b/app/assets/javascripts/users.js.erb
@@ -44,8 +44,8 @@ $(function() {
       })
       .on('ajax:error', function(evt, xhr, status, error) {
         request_processed = true;
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {
@@ -59,8 +59,8 @@ $(function() {
         $(this).find('img').attr({ src : '<%= asset_path('wait.gif') %>'}).removeClass('delete');
       })
       .on('ajax:error', function(evt, xhr, status, error) {
-        $('#flash').empty();
-        $('#flash').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
+        $('#flash-content').empty();
+        $('#flash-content').append('<div class="alert">An error occurred processing your request, please reload the page and try again.</div>');
         $('#flash').fadeIn('slow');
       })
       .on('ajax:complete', function(evt, xhr, status) {

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -182,6 +182,23 @@ header a:hover {
   padding: 1em;
 }
 
+#main #flash .close {
+  color: #404040;
+  cursor: pointer;
+  float: right;
+  font-weight: bold;
+  opacity: 0.50;
+  padding: .5em;
+}
+
+#main #flash a.close, #main #flash a.close:active, #main #flash a.close:visited {
+  text-decoration: none;
+}
+
+#main #flash a.close:hover {
+  opacity: 0.75;
+}
+
 #main h1 {
   font-size: 150%;
   margin-bottom: 1em;

diff --git a/app/views/apps/create.js.erb b/app/views/apps/create.js.erb
@@ -1,4 +1,4 @@
-$('#flash').empty();
+$('#flash-content').empty();
 $('.modalBox-flash').empty();
 <%- if flash[:alert] %>
   request_processed = false;
@@ -11,7 +11,7 @@ $('.modalBox-flash').empty();
   appsTable.dataTable().fnDestroy();
   appsTable.dataTable(appsTable_Settings);
   <%- if flash[:notice] %>
-    $('#flash').append('<div class="notice"><%= escape_javascript(flash[:notice]) %></div>');
+    $('#flash-content').append('<div class="notice"><%= escape_javascript(flash[:notice]) %></div>');
     $('#flash').fadeIn('slow');
   <%- end %>
 <%- end %>
diff --git a/app/views/apps/delete.js.erb b/app/views/apps/delete.js.erb
@@ -1,6 +1,6 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   var row = $('tr.#app-<%= @name %>').html('<td colspan="9" class="tdcenter"><%= escape_javascript(flash[:notice]) %></td>').addClass('highlight');

diff --git a/app/views/apps/envvars/set_var.js.erb b/app/views/apps/envvars/set_var.js.erb
@@ -5,7 +5,7 @@
 <%= escape_javascript @var_value  %>
 <%- end %>
 <%- else %>
-  $('#flash').empty();
+  $('#flash-content').empty();
   $('.modalBox-flash').empty();
   <%- if flash[:alert] %>
     request_processed = false;

diff --git a/app/views/apps/envvars/unset_var.js.erb b/app/views/apps/envvars/unset_var.js.erb
@@ -1,6 +1,6 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   var row = $('tr.#app-<%= @name %>-envvar-<%= @var_name %>').html('<td colspan="3" class="tdcenter"><%= escape_javascript(flash[:notice]) %></td>').addClass('highlight');

diff --git a/app/views/apps/files/app_view_file.html.haml b/app/views/apps/files/app_view_file.html.haml
@@ -14,15 +14,15 @@
 - if flash[:alert]
   :javascript
     $(function() {
-      $('#flash').empty();
+      $('#flash-content').empty();
       $('.modalLog-flash').empty();
       $('.modalLog-flash').append('<div class="alert">#{escape_javascript(flash[:alert])}</div>');
       $('.modalLog-flash').fadeIn('slow');
     });
 - else
   :javascript
     $(function() {
-      $('#flash').empty();
+      $('#flash-content').empty();
       $('.modalLog-flash').empty();
       appLogfileTable_Settings = {
         'bAutoWidth':      false,

diff --git a/app/views/apps/files/files.js.erb b/app/views/apps/files/files.js.erb
@@ -1,6 +1,6 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   $('#app-files').hide(150, function() {

diff --git a/app/views/apps/files/view_file.js.erb b/app/views/apps/files/view_file.js.erb
@@ -1,6 +1,6 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   $('#app-files').hide(150, function() {

diff --git a/app/views/apps/restart.js.erb b/app/views/apps/restart.js.erb
@@ -1,7 +1,7 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
   request_processed = false;
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   request_processed = true;

diff --git a/app/views/apps/services/bind_service.js.erb b/app/views/apps/services/bind_service.js.erb
@@ -1,4 +1,4 @@
-$('#flash').empty();
+$('#flash-content').empty();
 $('.modalBox-flash').empty();
 <%- if flash[:alert] %>
   request_processed = false;

diff --git a/app/views/apps/services/unbind_service.js.erb b/app/views/apps/services/unbind_service.js.erb
@@ -1,6 +1,6 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   var row = $('tr.#app-<%= @name %>-service-<%= @service %>').html('<td colspan="4" class="tdcenter"><%= escape_javascript(flash[:notice]) %></td>').addClass('highlight');

diff --git a/app/views/apps/start.js.erb b/app/views/apps/start.js.erb
@@ -1,7 +1,7 @@
-$('#flash').empty();
+$('#flash-content').empty();
 <%- if flash[:alert] %>
   request_processed = false;
-  $('#flash').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
+  $('#flash-content').append('<div class="alert"><%= escape_javascript(flash[:alert]) %></div>');
   $('#flash').fadeIn('slow');
 <%- else %>
   request_processed = true;