(allura) branch master updated: keep flash messages more visible

[gcruz]

This is an automated email from the ASF dual-hosted git repository.

gcruz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/allura.git


The following commit(s) were added to refs/heads/master by this push:
     new d3c5f4b24 keep flash messages more visible
d3c5f4b24 is described below

commit d3c5f4b245140650e64435e16e1c5ff34a046e60
Author: Dave Brondsema <dbronds...@slashdotmedia.com>
AuthorDate: Fri Mar 15 13:07:15 2024 -0400

    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
---
 Allura/allura/nf/allura/css/site_style.css  | 12 +++++++++++-
 Allura/allura/public/nf/js/jquery.notify.js | 16 ++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/Allura/allura/nf/allura/css/site_style.css 
b/Allura/allura/nf/allura/css/site_style.css
index b2ca323bc..b2de89e91 100644
--- 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
index c01220726..2c1365ccc 100644
--- 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));