From 1cf44c252efdc8139a8b94cc928029259c9e96c2 Mon Sep 17 00:00:00 2001 From: david g Date: Tue, 25 Jun 2024 12:27:47 -0400 Subject: [PATCH] #3355 - Fixed system notification dissmisal issue (#3370) * #3355 - Fixed system notification dismissal issue --- CHANGELOG.md | 8 +- .../system-notifications/.content.xml | 18 -- .../clientlibs/.content.xml | 22 +- .../system-notifications/clientlibs/page.js | 24 +- .../system-notifications/clientlibs/page.less | 95 +++++-- .../notification/.content.xml | 22 +- .../notification/clientlibs/.content.xml | 22 +- .../notification/clientlibs/notification.js | 79 +++--- .../notification/clientlibs/notification.less | 87 ++---- .../notification/notification.jsp | 44 +++- .../system-notifications.html | 249 ++++++++---------- 11 files changed, 293 insertions(+), 377 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a8087ddc4..9e569f968e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com) ## Unreleased ([details][unreleased changes details]) +### Fixed + +- #3355 - Fixed system notifications dismissal, and upgraded to CoralUI 3. + ### Added - #3333 - Use lodash embedded by ACS AEM Commons @@ -31,9 +35,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com) - #3306 - Sling Model Tag injector - #3320 - Content Sync: add an option to disable ssl cert check -### Fixed +### Fixed -- #3310 - User mapping | moved author specific user mapping from config to config.author +- #3310 - User mapping | moved author specific user mapping from config to config.author - #3301 - CM report fix WrongLogLevelInCatchBlock issue - #2854 - Code optimization: convert class fields to local variables - #2279 - Unit tests coverage for Deck Dynamo: servlet and service configuration diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/.content.xml b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/.content.xml index 5ca687668e..7ae06018f5 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/.content.xml @@ -1,22 +1,4 @@ - - - - + dependencies="coralui3" + jsProcessor="[default:none,min:gcc]"/> diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.js b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.js index 4307b7a7de..be24b37eb9 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.js +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.js @@ -18,18 +18,24 @@ * #L% */ -$(function() { - $('.fn-acsCommons-Notifications-save').click(function(event) { - var $form; - - event.stopPropagation(); +$(function() { + $('[data-fn-acs-commons-system-notification-cancel]').click(function(event) { + var url = $(this).attr('data-fn-acs-commons-system-notification-cancel'); event.preventDefault(); + event.stopPropagation(); - $form = $('#fn-acsCommons-Notifications-form'); + window.location.href = url; - $.post($form.attr('action'), $form.serialize(), function() { - location.reload(true); - }); + }); + $('[data-fn-acs-commons-system-notification-form]').submit(function(event) { + event.preventDefault(); + event.stopPropagation(); + + $.post($(this).attr('action'), $(this).serialize(), function() { + $('body').fadeOut(500, function() { + location.reload(true); + }); + }); }); }); diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.less b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.less index a19df999b0..24b2b6082b 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.less +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.less @@ -20,42 +20,87 @@ #acsCommons-System-Notifications-Page { padding-bottom: 2rem; + margin: 1rem auto; + max-width: 800px; - .acsCommons-System-Notifications-Page-form { - margin-left: auto; - margin-right: auto; - position: relative; - text-align: left; - width: 50%; - min-width: 300px; + .preview { + grid-area: preview; + margin-bottom: 2rem; + .acsCommons-System-Notification { + position: relative; + top: auto; + left: auto; + margin-left: auto; + width: 100%; + z-index: 0; + } + } - .acsCommons-System-Notifications-Form-row { - margin: 1rem 0; + .form { + display: grid; + grid-template-areas: + 'enabled enabled' + 'style style' + 'title title' + 'message message' + 'dismissable dismissableLabel' + 'onTime offTime' + 'save save'; + grid-gap: 1rem; + + coral-alert, + coral-datepicker, + input, + textarea { + width: 100%; } - .acsCommons-System-Notifications-Page-input--text, - .acsCommons-System-Notifications-Page-input--textarea { - width: 100%; + + label { + display: block; + margin-bottom: .25rem; } - .acsCommons-System-Notifications-Page-input--datepicker { - width: 80% + + .enabled { + grid-area: enabled; } - } - #acsCommons-System-Notifications { - position: static; - margin-top: 1rem; - margin-bottom: 2rem; - margin-left: 0; - left: auto; - width: 100%; + .style { + grid-area: style; + } - .acsCommons-System-Notification { - width: calc(100% - 4rem - 10px); + .title { + grid-area: title; } - } + + .message { + grid-area: message; + } + + .dismissable { + grid-area: dismissable; + } + + .dismissable-label { + grid-area: dismissableLabel; + } + + .on-time { + grid-area: onTime; + } + + .off-time { + grid-area: offTime; + } + + .save { + grid-area: save; + justify-self: end; + } + + } } diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/.content.xml b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/.content.xml index c181d9a786..5ebec7804a 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/.content.xml @@ -1,23 +1,5 @@ - - - diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/.content.xml b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/.content.xml index f3c6f216d5..79fd4bba7b 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/.content.xml @@ -1,22 +1,6 @@ - + categories="acs-commons.system-notifications.notification" + dependencies="coralui3" + jsProcessor="[default:none,min:gcc]"/> diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.js b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.js index c9e7b0a844..ade89dd0ca 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.js +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.js @@ -18,59 +18,42 @@ * #L% */ -$(function() { - $.get('/etc/acs-commons/notifications/_jcr_content.list.html', function(data) { - $('body').append(data); +$(function() { + var LOCAL_STORAGE_KEY = 'acs-commons-system-notifications-dismissed-uids'; + + $.get('/etc/acs-commons/notifications/_jcr_content.list.html', function(html) { + var $tmp = $('
').html(html), + $notification, + uids = localStorage.getItem(LOCAL_STORAGE_KEY) || ''; + uids = uids.split(','); + + uids.forEach(function(uid) { + $tmp.find('[data-fn-acs-commons-system-notification-uid="'+ uid +'"]').remove(); + }); + + $('body').append($tmp.html()); }); + + /* Handle dismissing of notifications */ - $('body').on('click', '.acsCommons-System-Notification-dismiss', function(e) { + $('body').on('click', '[data-fn-acs-commons-system-notification-dismiss]', function(e) { e.preventDefault(); - - var $notification = $(this).closest('.acsCommons-System-Notification'), - uid = $notification.data('uid'), - dismissible = $notification.data('dismissible'), - uids; - - $notification.hide(); - - if (dismissible) { - // Track dismissal - uids = getCookieValue('acs-commons-system-notifications'); - if (uids) { - // UIDs have been tracked - if (uids.indexOf(uid) === -1) { - // This notification has not been dismissed before, mark as dismissed - uids = uids + "," + uid; - } - } else { - // Nothing has been dismissed, mark this notification as dismissed - uids = uid; - } - setSessionCookie('acs-commons-system-notifications', uids); + if ($('[data-fn-acs-commons-system-notification-form]').length > 0) { + return; } - }); - - function setSessionCookie(name, value) { - document.cookie = name + '=' + value + '; expires=Tue, 01 Jan 2999 12:00:00 UTC; path=/;'; - } - function getCookieValue(name) { - var cookies = document.cookie.split(';'), - i, - cookie; - name = name + '='; - - for (i = 0; i < cookies.length; i++) { - cookie = cookies[i]; - while (cookie.charAt(0) === ' ') { - cookie = cookie.substring(1, cookie.length); - if (cookie.indexOf(name) === 0) { - return cookie.substring(name.length, cookie.length); - } - } + var uid = $(this).data('fn-acs-commons-system-notification-dismiss'), + uids = localStorage.getItem(LOCAL_STORAGE_KEY) || ''; + + if (uids.indexOf(uid) === -1) { + // This notification has not been dismissed before, mark as dismissed + localStorage.setItem(LOCAL_STORAGE_KEY, uids + "," + uid); + } else { + // Nothing has been dismissed, mark this notification as dismissed + localStorage.setItem(LOCAL_STORAGE_KEY, uid); } - - return null; - } + + $(this).closest('[data-fn-acs-commons-system-notification-uid]').remove(); + }); }); diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.less b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.less index 90f38707ba..52435d7ac3 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.less +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.less @@ -17,75 +17,24 @@ * limitations under the License. * #L% */ - -@red: #FC776A; -@green: #A4CE6E; -@blue: #7BAEE8; -@yellow: #FBD360; -@dark-grey: #323232; -@width: 60%; - -#acsCommons-System-Notifications { - position: fixed; - top: 55px; - left: 50%; - margin-left: calc(-1 * (@width / 2)); - width: @width; - max-width: 1000px; - font-family: adobe-clean, Helvetica, Arial, sans-serif; - z-index: 1000000; - font-size: 14px; - line-height: 1.25rem; - - .acsCommons-System-Notification { - border: solid 5px; - color: @dark-grey; - margin: 0 auto 1rem auto; - padding: 1rem 2rem; - min-width: 300px; - - .acsCommons-System-Notification-dismiss { - float: right; - color: @dark-grey; - font-size: .75rem; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - .acsCommons-System-Notification-title { - font-size: 1.5rem; - font-weight: bold; - margin-bottom: 1rem; +.acsCommons-System-Notification { + @width: 800px; + position: fixed; + top: 60px; + left: 50%; + margin-left: calc(-1 * (@width / 2)); + width: @width; + z-index: 1000000; + box-shadow: 0 5px 5px rgba(0, 0, 0, 10%); + + /* Force correct font and icon color */ + color: #323232; + coral-icon { + color: #323232; } - a { - color: @dark-grey; + /* Force correct coral alert background color */ + .coral3-Alert-content { + background-color: rgb(250, 125, 115); } - } - - .acsCommons-System-Notification--yellow { - background-color: @yellow; - border-color: darken(@yellow, 25%); - color: black; - } - - .acsCommons-System-Notification--green { - background-color: @green; - border-color: darken(@green, 25%); - } - - .acsCommons-System-Notification--blue { - background-color: @blue; - border-color: darken(@blue, 25%); - } - - .acsCommons-System-Notification--red { - background-color: @red; - border-color: darken(@red, 25%); - } -} - - +} \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/notification.jsp b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/notification.jsp index ec8dca844d..7b4f780da6 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/notification.jsp +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/notification.jsp @@ -31,7 +31,19 @@ String notificationId = systemNotifications.getNotificationId(pageManager.getContainingPage(resource)); pageContext.setAttribute("title", xssAPI.encodeForHTML(properties.get("jcr:title", String.class))); - pageContext.setAttribute("style", xssAPI.encodeForHTMLAttr(properties.get("style", "green"))); + + String style = properties.get("style", "green"); + if ("green".equals(style)) { + style = "success"; + } else if ("red".equals(style)) { + style = "error"; + } else if ("yellow".equals(style)) { + style = "warning"; + } else if ("blue".equals(style)) { + style = "info"; + } + + pageContext.setAttribute("style", xssAPI.encodeForHTMLAttr(style)); pageContext.setAttribute("uid", xssAPI.encodeForHTMLAttr(notificationId)); Date onTime = properties.get("onTime", Date.class); @@ -51,14 +63,26 @@ message = systemNotifications.getMessage(message, onTimeFormatted, offTimeFormatted); pageContext.setAttribute("message", message); - boolean dismissible = properties.get("dismissible", true); - pageContext.setAttribute("dismissible", dismissible ); + pageContext.setAttribute("dismissible", dismissible); + + pageContext.setAttribute("dismissibleLabel", + xssAPI.encodeForHTML(properties.get("dismissibleLabel", "Close"))); + -%>
-<% if (dismissible) { %> Dismiss<% } %> -
${title}
-
${message}
-
\ No newline at end of file +%> + ${title} + + ${message} + <% if (dismissible) { %> +
+ +
+ <% } %> + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/system-notifications.html b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/system-notifications.html index 0fc6967c79..fd58a8ec14 100644 --- a/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/system-notifications.html +++ b/ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/system-notifications.html @@ -17,13 +17,14 @@ --> - + ${'System Notification' @ i18n} + - -
+ +

${'System Notification' @ i18n}

+ +
+ +
+ + + + method="post"> @@ -51,136 +59,103 @@ - -
-
- Back - - -

${'System Notification' @ i18n}

- -
-
-
- -
- -
- -
- -
- -
- - - - -
-
- -
- - -
- -
- - -
- - -
- -
- -
- -
- - -
-
- - - - -
-
-
- -
- - -
-
- - - - -
-
-
- -
-
- -
-
+
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+ + + + Green + + + Blue + + + Yellow + + + Red + + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ + +
+ + + +
+ +
+ + + +