keep flash messages more visible

- 'sticky' now means persistent too, since a lot of calling code uses sticky - error classes are always persistent - click to hide now applies only on "X" target
apache · Mar 15, 2024 · d3c5f4b · d3c5f4b
1 parent 7ff9443
commit d3c5f4b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/Allura/allura/nf/allura/css/site_style.css b/Allura/allura/nf/allura/css/site_style.css
@@ -626,7 +626,7 @@ img.nav-logo {
   border: 2px solid #000;
   margin-bottom: 1em;
   color: #fff;
-  cursor: pointer;
+  position: relative;
 }
 .message a {
   color: white;
@@ -654,6 +654,16 @@ img.nav-logo {
 .message.warning header {
   text-shadow: none;
 }
+#messages .message-closer {
+  position: absolute;
+  top: 0;
+  right: 3px;
+  font-size: 30px;
+  line-height: 1;
+  width: 21px;
+  text-align: center;
+  cursor: pointer;
+}
 
 .no-js #messages {
   margin: 0 auto;

diff --git a/Allura/allura/public/nf/js/jquery.notify.js b/Allura/allura/public/nf/js/jquery.notify.js
@@ -60,11 +60,12 @@
     }
 
     function displayNotification(el, o){
-        var selector = '.' + o.newClass + '.' + o.messageClass;
-        $(selector).addClass(o.activeClass);
-        $(selector).fadeIn(500);
-        if (!$(selector).hasClass(o.persistentClass)) {
-            var timer = $(selector).attr('data-timer') || o.timer;
+        var $el = $(el);
+        $el.addClass(o.activeClass);
+        $el.prepend('<div class="message-closer" aria-label="Close">&times;</div>');
+        $el.fadeIn(500);
+        if (!$el.hasClass(o.persistentClass) && !$el.hasClass(o.stickyClass) && !$el.hasClass('error')) {
+            var timer = $el.attr('data-timer') || o.timer;
             setTimeout(function() {
                 closer(el, o);
             }, timer);
@@ -83,8 +84,8 @@
             }
             $('.' + o.messageClass, self).addClass(o.newClass);
             var selector = '.' + o.newClass + '.' + o.messageClass;
-            $('body').on("click", selector, function(e) {
-              closer(this, o);
+            $('body').on("click", selector + ' .message-closer', function(e) {
+              closer(this.parentNode, o);
             });
             displayNotification($(selector).get(0), o);
         });
@@ -142,7 +143,6 @@
         activeClass: 'notify-active',
         inactiveClass: 'notify-inactive',
         messageClass: 'message',
-        closeIcon: '<b title="Close" class="fa fa-close" style="float:right;"></b>'
     };
 
 }(jQuery));