Close button added for alert messages.

Fixes bug 937222. Uses bootstrap-alert.js functionality. Added fade-in effect. Patch 2: changed x symbol to × Change-Id: Ie85d1b96b1fe06f72c92465434542ec4504bcc52
openstack · Feb 17, 2012 · 321778f · 321778f
1 parent 57257e2
commit 321778f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/horizon/horizon/dashboards/nova/templates/nova/images_and_snapshots/images/index.html b/horizon/horizon/dashboards/nova/templates/nova/images_and_snapshots/images/index.html
@@ -12,7 +12,8 @@
   {% if images %}
     {% include 'nova/images_and_snapshots/images/_list.html' %}
   {% else %}
-    <div class="alert alert-block alert-info">
+    <div class="alert alert-block alert-info fade in">
+      <a class="close" data-dismiss="alert" href="#">&times;</a>
       <p><strong>{% trans "Info: " %}</strong>{% trans "There are currently no images." %}</p>
     </div>
   {% endif %}

diff --git a/horizon/horizon/static/horizon/js/horizon.js b/horizon/horizon/static/horizon/js/horizon.js
@@ -29,6 +29,9 @@ var Horizon = function() {
       return false;
     });
 
+    // Bind dismiss(x) handlers for alert messages.
+    $(".alert").alert()
+
     $.each(initFunctions, function(ind, fn) {
       fn();
     });

diff --git a/horizon/horizon/templates/horizon/_messages.html b/horizon/horizon/templates/horizon/_messages.html
@@ -1,22 +1,26 @@
 {% load i18n %}
 {% for message in messages %}
   {% if "info" in message.tags %}
-    <div class="alert alert-block alert-info">
+    <div class="alert alert-block alert-info fade in">
+      <a class="close" data-dismiss="alert" href="#">&times;</a>
       <p><strong>{% trans "Info: " %}</strong>{{ message }}</p>
     </div>
   {% endif %}
   {% if "warning" in message.tags %}
-    <div class="alert alert-block alert-warning">
+    <div class="alert alert-block alert-warning fade in">
+      <a class="close" data-dismiss="alert" href="#">&times;</a>
       <p><strong>{% trans "Warning: " %}</strong>{{ message }}</p>
     </div>
   {% endif %}
   {% if "success" in message.tags %}
-    <div class="alert alert-block alert-success">
+    <div class="alert alert-block alert-success fade in">
+      <a class="close" data-dismiss="alert" href="#">&times;</a>
       <p><strong>{% trans "Success: " %}</strong>{{ message }}</p>
     </div>
   {% endif %}
   {% if "error" in message.tags %}
-    <div class="alert alert-block alert-error">
+    <div class="alert alert-block alert-error fade in">
+      <a class="close" data-dismiss="alert" href="#">&times;</a>
       <p><strong>{% trans "Error: " %}</strong>{{ message }}</p>
     </div>
   {% endif %}