diff --git a/css/backoffice/components/_newsroom-menu.scss b/css/backoffice/components/_newsroom-menu.scss index b5f9f0542..f8446f30c 100644 --- a/css/backoffice/components/_newsroom-menu.scss +++ b/css/backoffice/components/_newsroom-menu.scss @@ -36,31 +36,30 @@ $ibo-popover-menu--item--no-message--image--svg--padding : 15px !default; #ibo-navigation-menu--notifications-menu { flex-flow: column; min-width: $ibo-navigation-menu--notifications-menu--min-width; - .ibo-navigation-menu--notifications--messages-section{ + .ibo-navigation-menu--notifications--messages-section { overflow: auto; } } -.ibo-navigation-menu--notifications--show-all-messages, .ibo-navigation-menu--notifications-dismiss-all, .ibo-navigation-menu--notifications-show-all-multiple{ +.ibo-navigation-menu--notifications--show-all-messages, .ibo-navigation-menu--notifications-dismiss-all, .ibo-navigation-menu--notifications-show-all-multiple { overflow-x: inherit; text-align: center; min-height: 45px; } -.ibo-navigation-menu--notifications--item--image{ +.ibo-navigation-menu--notifications--item--image { max-width: $ibo-navigation-menu--notifications--item--image--max-width; max-height: $ibo-navigation-menu--notifications--item--image--max-height; margin: $ibo-navigation-menu--notifications--item--image--margin-y $ibo-navigation-menu--notifications--item--image--margin-x; border-radius: $ibo-navigation-menu--notifications--item--image--border-radius; } -img.ibo-navigation-menu--notifications--item--image[src=""]{ +.ibo-navigation-menu--notifications--item--image[src=""] { display: none; } -img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-navigation-menu--notifications--item--image -{ +.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ .ibo-navigation-menu--notifications--item--image { display: none; } -.ibo-navigation-menu--notifications--item--bottom-text{ +.ibo-navigation-menu--notifications--item--bottom-text { display: flex; flex-direction: column; align-items: center; @@ -68,18 +67,23 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga align-self: center; margin-left: $ibo-navigation-menu--notifications--item--bottom-text--margin-left; } -.ibo-navigation-menu--notifications--item--content{ +.ibo-navigation-menu--notifications--item--content { padding: $ibo-navigation-menu--notifications--item--content--padding-y $ibo-navigation-menu--notifications--item--content--padding-x; - img{ + + img { max-height: $ibo-navigation-menu--notifications--item--content--img--max-height; padding: $ibo-navigation-menu--notifications--item--content--img--padding; } } -.ibo-navigation-menu--notifications-item{ +.ibo-navigation-menu--notifications-item { display: flex; flex-direction: row; + + .ibo-navigation-menu--notifications--item--content a { + @extend %ibo-hyperlink-forced-colors; + } } -.ibo-navigation-menu--notifications--item--new-message-indicator{ +.ibo-navigation-menu--notifications--item--new-message-indicator { width: $ibo-navigation-menu--notifications--item--new-message-indicator--width; height: $ibo-navigation-menu--notifications--item--new-message-indicator--height; background-color: $ibo-navigation-menu--notifications--item--new-message-indicator--background-color; @@ -87,22 +91,22 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga margin-top: $ibo-navigation-menu--notifications--item--new-message-indicator--margin-top; } -.ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu{ - .ibo-navigation-menu--notifications--item--new-message-indicator{ +.ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu { + .ibo-navigation-menu--notifications--item--new-message-indicator { display: inline-block; margin-right: $ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right; } - .ibo-navigation-menu--notifications-show-all-multiple--counter{ + .ibo-navigation-menu--notifications-show-all-multiple--counter { @extend %ibo-font-weight-600; } } -.ibo-navigation-menu--notifications-dismiss-all--icon{ +.ibo-navigation-menu--notifications-dismiss-all--icon { margin: $ibo-navigation-menu--notifications-dismiss-all--icon--margin; } -.ibo-popover-menu--item--no-message{ +.ibo-popover-menu--item--no-message { text-align: center; } -.ibo-popover-menu--item--no-message--image>svg{ +.ibo-popover-menu--item--no-message--image > svg { display: flex; width: $ibo-popover-menu--item--no-message--image--svg--width; height: $ibo-popover-menu--item--no-message--image--svg--height; diff --git a/js/components/newsroom-menu.js b/js/components/newsroom-menu.js index 828fadbad..1aecbe533 100644 --- a/js/components/newsroom-menu.js +++ b/js/components/newsroom-menu.js @@ -28,6 +28,8 @@ $(function() { menu_toggler: '[data-role="ibo-navigation-menu--notifications-toggler"]', menu_toggler_message: '[data-role="ibo-navigation-menu--user-notifications--toggler--message"]', + notification_message: '[data-role="ibo-navigation-menu--notifications-item"]', + notification_dismiss_all: '[data-role="ibo-navigation-menu--notifications-dismiss-all"]', }, // the constructor @@ -124,7 +126,23 @@ $(function() jsonp: "callback" }) .done(function(oJSONData) { - me._cacheData(idx, oJSONData); + oJSONData = [{ + "id": 31, + "image": "https:\/\/www.itophub.io\/bundles\/combodonotifications\/images\/messages-default-images.svg", + "url": "https:\/\/www.itophub.io\/api\/messages\/messages\/redirect\/30?uuid%5Bbdd%5D=1C4F5832-F6F8-B5C1-8728-BF599B001826&uuid%5Bfile%5D=3AD70B4D-54F8-3556-EBA3-0DC66E53BD4D&uuid%5Buser%5D=1", + "start_date": "2020-12-17T15:39:00+00:00", + "priority": 1, + "text": "Discover the \"Time Tracking\" extension for iTop.\r\n\r\nMake it [clear](https://www.google.com) and easy to track the time spent." + }, { + "id": 51, + "image": "https:\/\/www.itophub.io\/bundles\/combodonotifications\/images\/messages-default-images.svg", + "url": "https:\/\/www.itophub.io\/api\/messages\/messages\/redirect\/50?uuid%5Bbdd%5D=1C4F5832-F6F8-B5C1-8728-BF599B001826&uuid%5Bfile%5D=3AD70B4D-54F8-3556-EBA3-0DC66E53BD4D&uuid%5Buser%5D=1", + "start_date": "2024-01-03T10:43:00+00:00", + "priority": 3, + "text": "Happy New Year to our community!\r\niTop 3.1.1-1 is now out!\r\n\r\nThis maintenance version includes bug and security fixes described in the changelog, as well as improvements to:\r\n* Bring new possibilities for controlling link edition in iTop console\r\n* Enable the creation of calculated fields and integrity checks that take into account the evolution of links between objects.\r\n* Improve search indexing on Enum, Date and Tagset values\r\n* Support localization in portal tooltips\r\n* Improve printing of portal object page and portal dashboard page\r\n\r\nEnjoy!" + }]; + + me._cacheData(idx, oJSONData); me._onMessagesFetched(idx, oJSONData); }).error(function() { console.warn('Newsroom: failed to fetch data from the web for provider '+idx+' url: '+me.options.providers[idxProvider].fetch_url); @@ -213,8 +231,8 @@ $(function() var sBottomText = '' + sImage + '' + this.options.providers[sProvider].label + ' ' + moment(sStartDate).fromNow() + ''; - return '' + - sNewMessageIndicator + sRichDescription + sBottomText + ''; + return '
' + + sNewMessageIndicator + sRichDescription + sBottomText + '
'; }, _buildNoMessageItem: function() { @@ -242,7 +260,7 @@ $(function() }, _buildMenu: function(aAllMessages) { - var me = this; + const me = this; var iTotalCount = aAllMessages.length; var iCount = 0; var sDismissAllSection = this._buildDismissAllSection(); @@ -291,11 +309,15 @@ $(function() $('.ibo-navigation-menu--notifications--item--content img').each(function(){ tippy(this, {'content': this.outerHTML, 'placement': 'left', 'trigger': 'mouseenter focus', 'animation':'shift-away-subtle', 'allowHTML': true }); }); - var me = this; - $('[data-role="ibo-navigation-menu--notifications-item"]').on('click', function(oEvent){ - me._handleClick(this); + + // Add events listeners + $(this.js_selectors.notification_message).on('click', function(oEvent){ + me._handleClick(this, oEvent); }); - $('[data-role="ibo-navigation-menu--notifications-dismiss-all"]').on('click', function(ev) { me._markAllAsRead(); }); + $(this.js_selectors.notification_dismiss_all).on('click', function(ev) { + me._markAllAsRead(); + }); + // Remove class to show there is new messages $(this.js_selectors.menu_toggler).removeClass(this.css_classes.empty); @@ -303,7 +325,7 @@ $(function() else { $(this.element).html(sMessageSection + sShowAllMessagesSection); - var me = this; + // Add class to show there is no messages $(this.js_selectors.menu_toggler).addClass(this.css_classes.empty); } @@ -320,14 +342,20 @@ $(function() } this._initializePopoverMenu(); }, - _handleClick: function(elem) + _handleClick: function(oElem, oEvent) { - var me = this; - var idxProvider = $(elem).attr('data-provider-id'); - var msgId = $(elem).attr('data-msg-id'); + // If click was made on an hyperlink in the message, just follow the hyperlink + if (oEvent.target.nodeName.toLowerCase() === 'a') { + oEvent.stopPropagation(); + return; + } + + // Otherwise we open the message as intended + var idxProvider = $(oElem).attr('data-provider-id'); + var msgId = $(oElem).attr('data-msg-id'); this._markOneMessageAsRead(idxProvider, msgId); - $(me.element).popover_menu("togglePopup"); + $(this.element).popover_menu("togglePopup"); this._getAllMessages(); }, clearCache: function(idx)